Asp.netmvcKendoUIGrid的使用(二)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用

先上效果图:

要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc.Extensions两个命名空间然后实现数据的加载:

 1         [HttpPost]
 2         public ActionResult PersonalList_Read(DataSourceRequest request)
 3         {
 4             IList<PersonalInfoModel> listmodel = new List<PersonalInfoModel>();
 5             for(int i=0;i<50;i++)
 6             {
 7                 listmodel.Add(new PersonalInfoModel { 
 8                     Id=i,
 9                     Name="Summit"+i,
10                     LocalArea="安徽省合肥市"
11                 });
12             }
13             //request.Page = 1;
14             DataSourceResult result =listmodel.ToDataSourceResult(request);
15             result.Total = listmodel.Count();
16             return Json(result);
17         }

这里的DataSourceRequest是Kendo封装的方法接收前台传来的基本数据,DataSourceResult是把model的数据转换为Kendo所能识别的的格式然后以Json的形式返回

在View中先@using Kendo.Mvc.UI后才能使用Kendo的HtmlHelper,代码如下:

 1     @(Html.Kendo().Grid<PersonalInfoModel>()
 2         .Name("PersonalListGrid")
 3         .Columns(columns =>
 4         {
 5             columns.Bound(c => c.Name).Title("名称").Width(80);
 6             columns.Bound(c => c.LocalArea).Title("所在地");
 7         })
 8          .HtmlAttributes(new {style="width:700px;"})
 9          .Editable(e => e.Mode(GridEditMode.InLine))
10          .Scrollable(s => s.Enabled(false))
11          .Sortable(sort => sort.Enabled(false))
12          .Pageable(page => page
13                 .Refresh(true)
14                 .ButtonCount(5)
15                 .PageSizes(new[] { 10, 20, 30, 50 })
16                 .Messages(message=>message.ItemsPerPage("每页显示数目"))
17          )
18          .DataSource(datasource => datasource
19              .Ajax()
20              .PageSize(10)
21              .Model(model => model.Id(c => c.Id))
22              .Model(model => model.Field(c => c.Id).Editable(false))
23              .Read(read => read.Action("PersonalList_Read", "Home"))
24 
25          )
26     )