jqx 网格和剔除计算列

Question

我想要一个带有计算列的简单 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 字段在第一次加载后永远不会更新。

Answer 1

您的 .sum 属性是一个计算值，但 jqxgrid 不知道计算值或其他可观察值。因此，它不知道需要更新。

您可以通过订阅计算并在网格上调用 .updatebounddata 来自己触发更新：

vm.sum.subscribe(function() {
    $('#idOfYourGridHere').trigger( 'updatebounddata' );
}

我看到您正在使用一个名为 jqxgrid 的自定义敲除绑定。如果您愿意，您可以修改该绑定以使其正确更新。