kendo ui 好用的小部件--grid
阿新 • • 發佈:2018-08-19
data any oda osi http bsp country posit column
Kendo Ui Grid控件,繼承至Widget。
https://demos.telerik.com/kendo-ui/grid/index 快速上手教程 下面的代碼來自本教程
做表格時非常方便,具有非常強大的功能:
<div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { //數據源 type: "odata", transport: { read:"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" }, pageSize: 20 }, height: 550, groupable: true, //支持分組 sortable: true, //支持排序 pageable: { //分頁配置 refresh:true, pageSizes: true, buttonCount: 5 }, columns: [{ //列頭 或稱為表頭 theader部分 template: "<div class=‘customer-photo‘" + //模板功能 "style=‘background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);‘></div>" + "<div class=‘customer-name‘>#: ContactName #</div>", field:"ContactName", title: "Contact Name", width: 240 }, { field: "ContactTitle", title: "Contact Title" }, { field: "CompanyName", title: "Company Name" }, { field: "Country", width: 150 }] }); }); </script> </div> <style type="text/css"> .customer-photo { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-size: 32px 35px; background-position: center center; vertical-align: middle; line-height: 32px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); margin-left: 5px; } .customer-name { display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px; } </style>
kendo ui 好用的小部件--grid