kendo ui 好用的小部件--grid
Posted baota
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了kendo ui 好用的小部件--grid相关的知识,希望对你有一定的参考价值。
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的主要内容,如果未能解决你的问题,请参考以下文章
如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑