一.Kendo-UI模板：
<script>$(document).ready(function () {$("#newsitem-grid").kendoGrid({dataSource: {type: "json",transport: {read: {url: "@Html.Raw(Url.Action("List", "News"))",type: "POST",dataType: "json",data: additionalData}},schema: {data: "Data",total: "Total",errors: "Errors"},error: function(e) {display_kendoui_grid_error(e);// Cancel the changesthis.cancelChanges();},pageSize: @(defaultGridPageSize),serverPaging: true,serverFiltering: true,serverSorting: true},pageable: {refresh: true,pageSizes: [@(gridPageSizes)]},editable: {confirmation: "@T("Admin.Common.DeleteConfirmation")",mode: "inline"},scrollable: false,columns: [{field: "Title",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.Title")"}, {field: "LanguageName",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.Language")",//update by zhouxiang 20190925 调整列宽 S//width: 200,width: 100,//update by zhouxiang 20190925 调整列宽 E}, {field: "Comments",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.Comments")",template: '<a href="Comments?filterByNewsItemId=#=Id#">@T("Admin.ContentManagement.News.NewsItems.Fields.Comments") - #=Comments# </a>',//update by zhouxiang 20190925 调整列宽 Swidth:200,//update by zhouxiang 20190925 调整列宽 E}, {field: "StartDate",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.StartDate")",width: 200,type: "date",format: "{0:G}"}, {field: "EndDate",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.EndDate")",width: 200,type: "date",format: "{0:G}"}, {field: "Published",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.Published")",width: 100,headerAttributes: { style: "text-align:center" },attributes: { style: "text-align:center" },template: '# if(Published) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #'}, {field: "CreatedOn",title: "@T("Admin.ContentManagement.News.NewsItems.Fields.CreatedOn")",width: 200,type: "date",format: "{0:G}"}, {field: "Id",title: "@T("Admin.Common.Edit")",width: 100,template: '<a href="Edit/#=Id#">@T("Admin.Common.Edit")</a>'}]});});</script>
二.kendoUI-Grid属性说明
- dataSource: Object | Array | kendo.data.DataSource 数据源，表格显示数据在这里设置。kendo.data.DataSource 为kendoUI数据源配置对象,该对象中可以配置表格的数据源各种操作后台请求路径，包括读取,添加，删除，更新等固定的方法，也可以定义自己的独有的列的操作方法。
columns: Array 表格列属性配置，在该配置中可以对显示的各列进行单独的配置，包括列的类型，模版显示，格式化，数据校验等
field：String 表格列对应的数据源中的列名，和对应的数据源绑定，显示对应的数据。title：String 表格头部显示的列名。width：Number 列的宽度。template: String | function 可以设置列的显示样式，也可以在该属性中过滤数据。attributes: Object 在属性可以为列添加class 和 style。editor: function 官方定义：提供一种方法来指定该列的自定义编辑UI。使用容器参数创建编辑UI。在使用过程中发现，在编辑数据时会根据该方法对数据进行分装。如该列为字典列，数据源与字典互相对应，该列在显示的时候应该显示字典而不是数据源数据，该方法可以解决这类问题。filterable：Boolean ｜Object 该配置可以将表级筛选进行关闭。command: String | Array 设置列的按钮。系统默认两种按钮 edit编辑，destroy删除，其他的按钮需要自定义生成。