KendoUI: один многоуровневый источник данных JSON для нескольких сеток

У меня есть источник данных 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" ...} не работает.

Как я могу ссылаться на правильные данные о продукте?


javascript json kendo-grid kendo-ui kendo-datasource
person dmathisen    schedule 10.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку коллекции названы в возвращаемом объекте, вы можете установить свойство schema.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, это еще один мешок кошек.

person Robin Giltner    schedule 10.03.2014
comment
Ага. Имеет смысл. Спасибо. - person dmathisen; 11.03.2014
comment
Привет. Я не могу заставить это работать. Как только я создаю настоящий источник данных Kendo, он ломается с сообщением «невозможно применить метод среза к неопределенному». Это может быть как-то связано со структурой данных json (объекты и массивы)? Обновлен jsbin: jsbin.com/munoz/4/edit - person dmathisen; 11.03.2014
comment
Да, вы не можете установить свойство данных источника данных на источник данных кендо. Попробуйте просто создать источник данных, например jsbin.com/dokub/2/edit, а затем вызвать dataSource.read () должен вернуть вам ваш объект JSON. - person Robin Giltner; 11.03.2014
comment
Я заработал. Спасибо. Мне пришлось сделать схему: { data: function (data) { return [data]; } }. Хаково, но работает. Спасибо за помощь. - person dmathisen; 12.03.2014