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的自定义挖空绑定。如果您愿意，可以修改该绑定，以便正确更新。

jqx网格和淘汰计算列

1 个答案: