1. 程式人生 > >kendo ui 好用的小部件--grid

kendo ui 好用的小部件--grid

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