zoukankan      html  css  js  c++  java
  • [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;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的许多功能需要自己去尝试发现,官方文档是够详细的了,一些高级功能需要多去实验、挖掘.今天就先写到这里.
    这些内容都是平常个人使用的总结,如果帮到了你,很高兴.帮不到你,说声抱歉.

  • 相关阅读:
    CCF CSP 题解
    CCF CSP 2019032 二十四点
    CCF CSP 2018121 小明上学
    CCF CSP 2019092 小明种苹果(续)
    CCF CSP 2019091 小明种苹果
    CCF CSP 2019121 报数
    CCF CSP 2019031 小中大
    CCF CSP 2020061 线性分类器
    CCF CSP 2020062 稀疏向量
    利用国家气象局的webservice查询天气预报(转载)
  • 原文地址:https://www.cnblogs.com/summit7ca/p/4745373.html
Copyright © 2011-2022 走看看