KendoUI:用于多个网格的多级JSON数据源

KendoUI: one multi-level JSON dataSource for multiple grids

本文关键字：多级 JSON 数据源 网格 用于 KendoUI      更新时间：2023-09-26

我有一个JSON数据源，看起来像这样:

var productDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: 'http://...',
            dataType: "json"
        }
    },
    pageSize: 10
});

并返回如下内容:

{
   "ProdSet1":[
      {
         "Name": "Product 1-1",
         "Price": 20,
         "Quantity": 50,
         "Change": 4
      },
      {
         "Name": "Product 1-2",
         "Price": 14,
         "Quantity": 74,
         "Change": 5
      }
   ],
   "ProdSet2":[
      {
         "Name": "Product 2-1",
         "Price": 15,
         "Quantity": 12,
         "Change": 2
      }
   ]
}

然后我有多个网格使用这个数据源:

$("#prodSet1").kendoGrid({
    dataSource: productDataSource,
    columns: [
        { field: "ProdSet1[0].Name", title: "Name" },
        { field: "ProdSet1[0].Price", title: "Price" },
        { field: "ProdSet1[0].Quantity", title: "Quantity" },
        { field: "ProdSet1[0].Change", title: "Change" }
    ]
});
$("#prodSet2").kendoGrid({
    dataSource: productDataSource,
    columns: [
        { field: "ProdSet2[0].Name", title: "Name" },
        { field: "ProdSet2[0].Price", title: "Price" },
        { field: "ProdSet2[0].Quantity", title: "Quantity" },
        { field: "ProdSet2[0].Change", title: "Change" }
    ]
});

但是做{ field: "ProdSet1[0].Name" ...}不起作用。

如何引用正确的产品数据?

因为集合是在返回对象中命名的，所以可以设置模式。data属性到每个ProdSet，并绑定一个网格。

我将手动从数据源获取数据，使用datasource.read()

var datafromService = productDataSource.read();

文档…http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource methods-read

然后将每个网格绑定到该datafromService，每个网格指定要绑定到的JSON对象中的集合。

$("#prodSet1").kendoGrid({
  dataSource: {
    data: datafromService,
    schema: {
      data: 'ProdSet1' 
    }
  },
  columns: [
    { field: "Name", title: "Name" },
    { field: "Price", title: "Price" },
    { field: "Quantity", title: "Quantity" },
    { field: "Change", title: "Change" }
  ]
});

和

$("#prodSet2").kendoGrid({
  dataSource: {
    data: datafromService,
    schema: {
      data: 'ProdSet2' 
    }
  },
  columns: [
    { field: "Name", title: "Name" },
    { field: "Price", title: "Price" },
    { field: "Quantity", title: "Quantity" },
    { field: "Change", title: "Change" }
  ]
});

现在它们将被绑定到同一组数据，只是显示来自JSON数据的不同集合。

看到样本…http://jsbin.com/dokub/1/edit

如果您需要完整的CRUD操作，那就放到另一个袋子里。

相关文章：