kogrid - 动态 ColumDefs

Question

我需要在运行时更改 kogrid 上的 columnDefs，但运气不佳。

当视图加载时，我默认使用数据源。当用户从下拉列表中进行选择时，会触发一个名为 ChangeDataSource 的方法。在该方法中，我更改了columdefs 和数据源，但kogrid 仍然显示默认数据源和columndefs。

这是 jsfiddle 到 illistrate-http://jsfiddle.net/wood0615/cw56z/6/

这是代码-

查看-

 <div class="gridStyle" data-bind="koGrid: gridOptions"></div>
      <select id="Select6" tabindex="3" style="width: 190px" data-bind=" options: InstrumentTypes, value: modalInstrumentTypeValue,  optionsValue: 'OptionValue', optionsText: 'OptionText', validationOptions: { insertMessages: false }, event: { change: ChangeDataSource }">
      </select>

视图模型-

 var modalInstrumentTypeValue = ko.observable();


 function mainVm(){
    var self = this;
    this.modalInstrumentTypeValue = ko.observable();
    this.InstrumentTypes = ko.observableArray([{OptionText: "Moroni", OptionValue: 50},
                                  {OptionText: "Tiancum", OptionValue: 43},
                                  {OptionText: "Jacob", OptionValue: 27},
                                  {OptionText: "Nephi", OptionValue: 29},
                                  {OptionText: "Enos", OptionValue: 34}]);

     this.myData = ko.observableArray([{name: "Moroni", age: 50},
                                  {name: "Tiancum", age: 43},
                                  {name: "Jacob", age: 27},
                                  {name: "Nephi", age: 29},
                                  {name: "Enos", age: 34}]);


    this.myData2 = ko.observableArray([{Client: "Acme", Address: '123 Somewhere street'},
                                  {Client: "Johnsons", Address: '123 Here street'},
                                  {Client: "AdLib", Address: '123 Now street'},
                                  {Client: "Tough", Address: '123 Main street'},
                                  {Client: "Mars", Address: '123 Sommer street'}]);
     this.gridOptions = { 
    data: self.myData, 
    columnDefs: [{ field: 'name', displayName: 'Client Name', width: 140 }, 
                 { field: 'age', displayName: 'Age', width: 100 }
                ]};

      this.saveState = function() {

}

      this.ChangeDataSource = function (tab) {


        gridOptions = { 
    data: self.myData2, 
        columnDefs: [{ field: 'Client', displayName: 'Client', width: 140 }, 
                 { field: 'Address', displayName: 'Address', width: 100 }
                ]};
    }
 };


  ko.applyBindings(new mainVm());

我该如何编码，以便当我的视图模型中的数据源和 columndefs 发生变化时，视图也会相应地发生变化？

Answer 1

您的 ChangeDataSource 函数应该更新 observables 而不是再次设置 gridOptions。

this.cols = ko.observableArray([{
    field: 'name',
    displayName: 'Client Name',
    width: 140
}, {
    field: 'age',
    displayName: 'Age',
    width: 100
}]);

this.gridOptions = {
    data: self.myData,
    columnDefs: self.cols
};

this.ChangeDataSource = function (tab) {
    self.myData(self.myData2());
    self.cols([{
        field: 'Client',
        displayName: 'Client',
        width: 140
    }, {
        field: 'Address',
        displayName: 'Address',
        width: 100
    }]);
}

Updated fiddle