javascript - kogrid 中的主/详细功能

Question

我想在 kogrid 中实现 Master / Detail 功能。这样当我选择第一个网格表的任何字段时，所有其他详细信息都将显示在下一个详细信息网格中。任何人都可以有任何提示如何实现这一点。

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 个 koGrids

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

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

koGrid 将用零或一个项目填充 selectedItems observableArray。计算将在第二个网格绑定到的子节点上执行过滤器。

我已经从 breivity 中省略了 columnDef 数据绑定部分。

如果您要为 details 数组运行 AJAX 查询，则对“父”可观察对象使用订阅，将 selectDetails 更改为直接 observableArray 并在 AJAX 回调中设置其内容

有关基本示例，请参阅此jsFiddle