Функциональность Master / Detail в kogrid

Question

Я хочу реализовать функцию Master / Detail в Kogrid. Так что, когда я выберу любое поле первой таблицы сетки, все остальные детали будут показаны в следующей таблице подробностей. Может кто-нибудь есть какой-нибудь намек, как это реализовать.

Answer 1

Для создания набора основных / подробных сеток вам необходимо использовать ko.computed для выбора / фильтрации деталей.

Вам нужно 3 наблюдаемых массива и 1 вычисляемый.

var model = {
  parent: ko.observableArray(),
  details: ko.observableArray(),
  selectedParents: ko.observableArray()
};

model.selectedDetails = ko.computed( function() {
  var selectedParent = this.selectedParents()[0];

  if ( !selectedParent ) {
    return [];
  }

  return this.details().filter( function(item) {
    // define filter comparison here
  } );
}, model );

В вашей разметке определите 2 коГрида

<div data-bind="koGrid: { 
  data: parent, 
  multiSelect: false, 
  selectedItems: selectParents }"></div>

<div data-bind="koGrid: { data: selectedDetails } "></div>

koGrid заполнит выбранный элемент observableArray нулевым или одним элементом. Вычисленный выполнит фильтр по дочерним элементам, с которыми связана вторая сетка.

Я опустил часть связывания данных columnDef от краткости.

Если у вас есть запрос AJAX для выполнения для массива сведений, используйте подписку для "родительской" наблюдаемой, измените selectDetails на прямой observableArray и установите его содержимое в обратном вызове AJAX.

Смотрите этот jsFiddle для базового примера