我需要在运行时更改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时,视图也会相应更改?
答案 0 :(得分:2)
您的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
}]);
}