Asp.net mvc Kendo UI Grid的使用(二)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

先上效果图:

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

[HttpPost]
public ActionResult PersonalList_Read(DataSourceRequest request)
{
IList<PersonalInfoModel> listmodel = new List<PersonalInfoModel>();
for(int i=;i<;i++)
{
listmodel.Add(new PersonalInfoModel {
Id=i,
Name="Summit"+i,
LocalArea="安徽省合肥市"
});
}
//request.Page = 1;
DataSourceResult result =listmodel.ToDataSourceResult(request);
result.Total = listmodel.Count();
return Json(result);
}

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

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

@(Html.Kendo().Grid<PersonalInfoModel>()
.Name("PersonalListGrid")
.Columns(columns =>
{
columns.Bound(c => c.Name).Title("名称").Width();
columns.Bound(c => c.LocalArea).Title("所在地");
})
.HtmlAttributes(new {style="width:700px;"})
.Editable(e => e.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(false))
.Sortable(sort => sort.Enabled(false))
.Pageable(page => page
.Refresh(true)
.ButtonCount()
.PageSizes(new[] { , , , })
.Messages(message=>message.ItemsPerPage("每页显示数目"))
)
.DataSource(datasource => datasource
.Ajax()
.PageSize()
.Model(model => model.Id(c => c.Id))
.Model(model => model.Field(c => c.Id).Editable(false))
.Read(read => read.Action("PersonalList_Read", "Home")) )
)