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>