kendoUI Grid (一) ：后端返回所有数据或前端定义所有数据后实现分页

html文件

<body>
  <div id="example">
    <!-- 定义grid显示的元素范围 -->
    <div id="grid"></div>
  
    <script>
      var products = [{
        ProductID: 1,
        ProductName: "Chai",
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: "10 boxes x 20 bags",
        UnitPrice: 18.0000,
        UnitsInStock: 39,
        UnitsOnOrder: 0,
        ReorderLevel: 10,
        Discontinued: false,
        Category: {
          CategoryID: 1,
          CategoryName: "Beverages",
          Description: "Soft drinks, coffees, teas, beers, and ales"
        }
      }, {
        ProductID: 2,
        ProductName: "Chang",
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: "24 - 12 oz bottles",
        UnitPrice: 19.0000,
        UnitsInStock: 17,
        UnitsOnOrder: 40,
        ReorderLevel: 25,
        Discontinued: false,
        Category: {
          CategoryID: 1,
          CategoryName: "Beverages",
          Description: "Soft drinks, coffees, teas, beers, and ales"
        }
      }, {
        ProductID: 3,
        ProductName: "Aniseed Syrup",
        SupplierID: 1,
        CategoryID: 2,
        QuantityPerUnit: "12 - 550 ml bottles",
        UnitPrice: 10.0000,
        UnitsInStock: 13,
        UnitsOnOrder: 70,
        ReorderLevel: 25,
        Discontinued: false,
        Category: {
          CategoryID: 2,
          CategoryName: "Condiments",
          Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
        }
      }];
      $(document).ready(function () {
        // 找到需要渲染的元素
        $("#grid").kendoGrid({
          dataSource: {
            // data是数据，作为数据源去渲染
            data: products,
            // schema是定义数据的类型
            schema: {
              model: {
                fields: {
                  ProductName: { type: "string" },
                  UnitPrice: { type: "number" },
                  UnitsInStock: { type: "number" },
                  Discontinued: { type: "boolean" }
                }
              }
            },
            // pageSize:分页所需字段，每页显示多少条数据
            pageSize: 2
          },
          // 表格高度（不定义则根据表格内容自定义显示）
          height:150,
          // 支持排序
          sortable: true,
          // 支持搜索
          filterable: true,
          // 支持分页
          pageable: true,
          // 表格显示列         
          columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
          ]
        });
      });
    </script>
  </div>
</body>

1、kendoGrid如果返回所有数据，在前端进行分页展示的话：只需要设置pageSize属性即可

2、若是需要请求接口去获取数据的话：需要替换DataSource里的data。

　　

dataSource: {
　　// 定义的数据，作为数据源去渲染
　　read: {
　　url: "请求的接口路径",
　　dataType: "jsonp"  --- 接口返回的格式（json）
},
// schema是定义数据的类型
schema: {
　　model: {
　　　　fields: {
　　　　　　ProductName: { type: "string" },
　　　　　　UnitPrice: { type: "number" },
　　　　　　UnitsInStock: { type: "number" },
　　　　　　Discontinued: { type: "boolean" }
　　　　　　}
　　　　}
},
// pageSize:分页所需字段，每页显示多少条数据
pageSize: 2
},

　　

posted @ 2020-03-23 10:41  萌髦  阅读(1301)  评论(0)  编辑  收藏  举报