[Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

  有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.
先Show出数据,然后讲解下.
后台代码:

1 public ActionResult OrderInfoList_Read(DataSourceRequest request)
2 {
3     var list = _orderInfoService.GetOrderInfoList();
4     //request.Page = 1;
5     DataSourceResult result = list.ToDataSourceResult(request);//这里需要引用Kendo.Mvc.Extensions命名空间 6     result.Total = list.Count;
7     return Json(result,JsonRequestBehavior.AllowGet);
8 }

 

视图代码:

 1 @using Kendo.Mvc.UI
 2 @{
 3     ViewBag.Title = "Index";
 4 }
 5 <style>
 6     .center{
 7         text-align:center;
 8     }
 9 </style>
10 <div style="display:block;width:800px;">
11     @(Html.Kendo().Grid<OrderViewModel>()
12                   .Name("orderInfoListGrid")
13                   .Columns(col => {
14                       col.Bound(x=>x.OrderCode).Title("订单编号");
15                       col.Bound(x=>x.Price).Width(20);
16                       col.Bound(x=>x.Quantity);
17                       col.Bound(x=>x.OrderStatus)
18                          .ClientTemplate("#if(OrderStatus==1){#"+
19                                             "<span>等待发货</span>"+
20                                          "#}else{#"+
21                                             "<span>其他状态</span>"+
22                                          "#}#");
23                       col.Bound(x => x.TrackingNumber)
24                          .ClientTemplate("#if(TrackingNumber==''){#" +
25                                             "<span>暂无订单号</span>"+
26                                          "#}#").HtmlAttributes(new {@class="center"});
27                       col.Bound(x=>x.CreateOn).Format("{0:yyyy-MM-dd}");
28                       col.Template(@<text></text>).ClientTemplate("<a class='test' data-operate-type=\"viewdetail\" href='\\#'>查看详情</a>");
29                   }).ToolBar( toolbar=>{
30                         toolbar.Template(@<text>
31                             <div>工具栏---这里使用的模板你可以自定义显示你想要的</div>
32                         </text>);
33                   })
34                   .Pageable(pager=>{
35                       pager.Refresh(true);
36                       pager.ButtonCount(5);//只显示5个按钮
37                       pager.PageSizes(new[]{10,20,30,50,100});
38                       pager.Messages(message => {
39                           message.ItemsPerPage("每页显示数目");
40                           message.Of("页,共[{0}]页");//这个属性和page的值用于自定义显示input框的信息
41                           message.Page("当前第");
42                       });
43                       pager.Input(true);//设置跳转框
44                   })
45                  .Sortable(x => x.Enabled(false))
46                  .Scrollable(x => x.Enabled(false))//这个属性设为true右侧会出现滚动条
47                  .DataSource(dataSource => dataSource
48                     .Ajax()
49                     .PageSize(20)
50                     .Events(events =>{
51                         //events.Error("error_handler");
52                         //events.RequestEnd("kendoRequestEnd");
53                     })
54                     .Model(model => model.Id(p => p.Id))
55                     .Read(read => read.Action("OrderInfoList_Read", "Home"))
56                  )
57 )
58 </div>
59 <script>
60     $("#orderInfoListGrid").find(".k-pager-input").insertAfter("#orderInfoListGrid .k-pager-sizes");//默认的页码框在按钮里,看着实在不舒服,直接用js改了 61 </script>

 

运行结果如图:

从代码可以看到这里显示的地方用了许多自定义的方式,功能基本在代码中我也注释了.主要讲下.ClientTemplate这里支持写一些基本的逻辑控制语句,如if、for等语句,代码域用##分隔  写过asp.net的应该对这种风格很熟悉.
这里.ClientTemplate的参数也可以调用js函数.如上边对OrderStatus的判断可以转到js里判断:
col.Bound(x=>x.OrderStatus).ClientTemplate("#:getText(OrderStatus)#");
<script>
　　function getText(data){
　　　　//对data进行处理
　　}
</script>

而col.Template(@<text></text>)则是使用模板列 模板列的内容由后面的.ClientTempalte填充,如上边查看详情的a标签即是自定义的,这里需要注意的是转义问题,a标签的href值为#的话需要对其进行转义,否则grid列表将无法生成,当遇到kendo生成时报错,先检查下代码的字符转义问题.
由于Grid默认没有CheckBox功能,可以通过模板自己实现.
    col.Bound(x=>x.Id).Title("<input name='selectAll' type='checkbox' value='' />").ClientTemplate("<input name='selectSingle' type='checkbox' value='#:Id#' />");

效果如下:

kendo grid的许多功能需要自己去尝试发现,官方文档是够详细的了,一些高级功能需要多去实验、挖掘.今天就先写到这里.
这些内容都是平常个人使用的总结,如果帮到了你,很高兴.帮不到你,说声抱歉.