計算された列を持つ単純な jqxGrid が必要です。すべて問題ないように見えますが、機能しません。簡単な例:
<script type="text/javascript">
$(document).ready(function () {
var vm = {
date: ko.observable(new Date()),
items: ko.observableArray(),
load: function () {
for (var i = 0; i < 10; i++) {
var item = {
x: ko.observable(i),
y: ko.observable(i + 1)
};
item.sum = ko.computed(function() { return this.x() + this.y(); }, item);
this.items.push(item);
}
}
};
ko.applyBindings(vm);
});
</script>
<input data-bind="click: load, jqxButton: {theme: 'metro'}" type="button" value="Load" />
<div data-bind="jqxGrid: {source: items, disabled: false, autoheight: true,
editable: true,
selectionmode: 'singlecell',
theme: 'metro',
columns: [
{ text: 'X', dataField: 'x' },
{ text: 'Y', dataField: 'y' },
{ text: 'Sum', dataField: 'sum'}
]}" id="jqxgrid">
</div>
<table style="margin-top: 20px;">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: x"></td>
<td data-bind="text: y"></td>
<td data-bind="text: sum"></td>
</tr>
</tbody>
</table>
それは起こっています: x または y を更新でき、下の表に新しい値が表示されますが、Sum フィールドは最初の読み込み後に更新されません。