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

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

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

 

视图代码:

@using Kendo.Mvc.UI
@{
    ViewBag.Title = "Index";
}
<style>
    .center{
        text-align:center;
    }
</style>
<div style="display:block;width:800px;">
    @(Html.Kendo().Grid<OrderViewModel>()
                  .Name("orderInfoListGrid")
                  .Columns(col => {
                      col.Bound(x=>x.OrderCode).Title("订单编号");
                      col.Bound(x=>x.Price).Width(20);
                      col.Bound(x=>x.Quantity);
                      col.Bound(x=>x.OrderStatus)
                         .ClientTemplate("#if(OrderStatus==1){#"+
                                            "<span>等待发货</span>"+
                                         "#}else{#"+
                                            "<span>其他状态</span>"+
                                         "#}#");
                      col.Bound(x => x.TrackingNumber)
                         .ClientTemplate("#if(TrackingNumber==''){#" +
                                            "<span>暂无订单号</span>"+
                                         "#}#").HtmlAttributes(new {@class="center"});
                      col.Bound(x=>x.CreateOn).Format("{0:yyyy-MM-dd}");
                      col.Template(@<text></text>).ClientTemplate("<a class='test' data-operate-type=\"viewdetail\" href='\\#'>查看详情</a>");
                  }).ToolBar( toolbar=>{
                        toolbar.Template(@<text>
                            <div>工具栏---这里使用的模板你可以自定义显示你想要的</div>
                        </text>);
                  })
                  .Pageable(pager=>{
                      pager.Refresh(true);
                      pager.ButtonCount(5);//只显示5个按钮
                      pager.PageSizes(new[]{10,20,30,50,100});
                      pager.Messages(message => {
                          message.ItemsPerPage("每页显示数目");
                          message.Of("页,共[{0}]页");//这个属性和page的值用于自定义显示input框的信息
                          message.Page("当前第");
                      });
                      pager.Input(true);//设置跳转框
                  })
                 .Sortable(x => x.Enabled(false))
                 .Scrollable(x => x.Enabled(false))//这个属性设为true右侧会出现滚动条
                 .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events =>{
                        //events.Error("error_handler");
                        //events.RequestEnd("kendoRequestEnd");
                    })
                    .Model(model => model.Id(p => p.Id))
                    .Read(read => read.Action("OrderInfoList_Read", "Home"))
                 )
)
</div>
<script>
    $("#orderInfoListGrid").find(".k-pager-input").insertAfter("#orderInfoListGrid .k-pager-sizes");//默认的页码框在按钮里,看着实在不舒服,直接用js改了
</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的许多功能需要自己去尝试发现,官方文档是够详细的了,一些高级功能需要多去实验、挖掘.今天就先写到这里.
这些内容都是平常个人使用的总结,如果帮到了你,很高兴.帮不到你,说声抱歉.