KendoUI Grid表头实现过滤筛选

 

kendo是一套强大方便的前端解决方案,而且新版还可以与angularjs集成,项目中就使用了一些kendo的控件,比如grid表格。

  grid提供了过滤功能,但中文网站缺少这方面的资料,在这里整理一下kendo grid怎么使用过滤。

  下面代码包含了grid的过滤的相关设置:

1、所有的列都进行过滤筛选

 

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
          columns: [
              { field: "name" },
              { field: "age" }
          ],
          filterable: true,
          dataSource: {
           data: [
            { id: 1, name: "Jane Doe", age: 30 },
            { id: 2, name: "John Doe", age: 33 }
           ],
           schema:{
            model: {
             id: "id",
             fields: {
               age: { type: "number"}
             }
            }
           }
          }
      });
    </script>

2、部分列不进行筛选

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
          columns: [
              { field: "name"},
              { field: "age" ,filterable:false}
          ],
          filterable: true,
          dataSource: {
           data: [
            { id: 1, name: "Jane Doe", age: 30 },
            { id: 2, name: "John Doe", age: 33 }
           ],
           schema:{
            model: {
             id: "id",
             fields: {
               age: { type: "number"}
             }
            }
           }
          }
      });
    </script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值