Question

我需要在运行时更改kogrid上的columnDef，但没有太多运气。

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

这是jsfiddle to 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());

我如何对其进行编码，以便在我的viewmodel中更改数据源和columndef时，视图也会相应更改？

Answer 1

您的ChangeDataSource函数应更新可观察对象，而不是再次设置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

ko grid - 动态ColumnDefs

1 个答案: