javascript - 多列标题iggrid与 knockout 问题

我正在使用IgniteUI在网站上放置网格。使用KnockoutJS绑定网格。我已经在应用程序中的许多网格上使用了此设置，但是遇到了一个奇怪的问题。

我需要一个具有多列标题的网格，然后是另一列。我使用了多列标题，它们工作正常。但是，在这种情况下，网格会将应在该组之后的列中的信息放入该组的第一列，如该小提琴中所示：http://jsfiddle.net/rc5a4vbs/3/。如Javascript所示，ColumnY列的两行中应有一堆Y。

function ViewModel() {
    var self = this;
    self.value = ko.observable(false);
    self.data = ko.observableArray([
        { "ColumnA": ko.observable(1), "ColumnD": ko.observable(21), "ColumnE": ko.observable("dkifhugb"),
          "ColumnF": ko.observable(true), "ColumnG": ko.observable("false"),
          "Procedure": ko.observable("Final Column"),
          "TestConditionGroup": {
              "ColumnY": ko.observable("YYYYYYYYYYYY"), "ColumnZ": ko.observable("ZZZZZZZZZ")
          }
        },
        { "ColumnA": ko.observable(2), "ColumnD": ko.observable(14), "ColumnE": ko.observable("5347347"),
          "ColumnF": ko.observable(false), "ColumnG": ko.observable("string"),
          "Procedure": ko.observable("Final Column"),
          "TestConditionGroup": {
             "ColumnY": ko.observable("yyyyyyyyyyyy"), "ColumnZ": ko.observable("zzzzzzzzzzz")
          }
        }
    ]);
    self.getColumns = function() {
        //debugger;
        var columns = [
                { key: 'ColumnA', headerText: '', width: '0px', hidden: true },
                { key: 'ColumnD', headerText: 'Sequence', width: '100px' },
                { key: 'ColumnE', headerText: 'Iteration', width: '100px' },
                { key: 'ColumnF', headerText: 'Risk', width: '100px' },
                { key: 'ColumnG', headerText: 'Sub-Chapter Title', width: '200px' }
            ];
        var columns2 = [
            { key: 'TestConditionGroup', headerText: 'ColumnY', width: '100px',
              formatter: function(val){
                  return val[this.headerText];
              }
            },
            { key: 'TestConditionGroup', headerText: 'ColumnZ', width: '100px',
              formatter: function(val){
                  return val[this.headerText];
              }
            }
        ];
        columns.push({ key: 'TestConditionGroup', headerText: 'Test Conditions', group: columns2 });
        columns.push({ key: 'Procedure', headerText: 'Procedure', width: '200px'});
        return columns;
    }
}

在将分组列中的数据制作为行对象内的对象之前，网格一直在正常工作。服务器将通过这种方式向我发送信息。当所有列都位于顶层时，它可以正常工作。

如何通过此设置为提供的数据正确显示数据？任何帮助将不胜感激。

最佳答案

该问题不是由多列标题引起的，而是由数据中包含的复杂对象属性引起的。
如果要绑定ColumnY和ColumnZ，则必须将它们声明为未绑定的列，并在格式化程序函数中从数据的TestConditionGroup属性中提取其值。您可以通过在formatter函数中使用第二个参数来实现，该参数将为您提供对当前行数据的引用。

var columns2 = [
{ key: 'ColumnY', headerText: 'ColumnY', width: '100px', unbound: true,
  formatter: function(val, row){
      return row["TestConditionGroup"][this.headerText];
  }
},
{ key: 'ColumnZ', headerText: 'ColumnZ', width: '100px', unbound: true,
  formatter: function(val, row){
      return row["TestConditionGroup"][this.headerText];
  }
}];

另外，要使格式化程序功能中的TestConditionGroup列中的数据可用，您必须将localSchemaTransform配置为false。
您需要做的最后一件事是将autoGenerateColumns设置为false，因为默认情况下它是true。
这是更新的小提琴的链接：
http://jsfiddle.net/rc5a4vbs/4/

关于javascript - 多列标题iggrid与 knockout 问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28635879/