Question

我已经整理了一个jsFiddle，它演示了修改数据项时未触发的更改事件。

转到小提琴，您将看到网格和网格下的一些链接。按顺序单击每个链接，您将看到修改操作确实发生，但不会引发更改事件。当您单击刷新网格链接时，您可以看到修改确实发生了。但是，对于添加/删除操作，不需要刷新网格，也会引发更改事件。

如何在修改DataItem时引发更改事件？

此致

斯科特

出于某种原因StackOverflow说：“指向jsfiddle.net的链接必须附带代码”

标记：

<div id="KendoGrid"></div>

<p>&nbsp;</p>
<ul>
    <li><a id="lnkWireUpDataSource" class="link">Wire Up DataSource</a><br /></li>
    <li><a id="lnkAddRecord" class="link">Add Record</a></li>
    <li><a id="lnkModifyRecord" class="link">Modify Record</a></li>
    <li><a id="lnkRefreshGrid" class="link">Refresh Grid</a></li>
    <li><a id="lnkRemoveRecord" class="link">Remove Record</a></li>
</ul>

JavaScript的：

var _data = [
        { Users_ID: 1, Users_FullName: 'Bob Smith', Users_Role: 'Administrator'  },
        { Users_ID: 2, Users_FullName: 'Barry Baker', Users_Role: 'Viewer'  },
        { Users_ID: 3, Users_FullName: 'Bill Cow', Users_Role: 'Editor'  },
        { Users_ID: 4, Users_FullName: 'Boris Brick', Users_Role: 'Administrator'  }
    ],
    _dataSource = new kendo.data.DataSource({ data: _data });

$('#KendoGrid').kendoGrid({
    dataSource: _dataSource,
    columns: [
        { field: "Users_FullName", title: "Full Name" },
        { field: "Users_Role", title: "Role", width: "130px" }
    ]
});

$('#lnkRefreshGrid').click(function () {
    $("#KendoGrid").data("kendoGrid").refresh();
});

function dataSourceChange(e,a,b) {
    var _data = this.data();
    console.log('Change Event Raised | Action: '+e.action+' | Data Length: '+_data.length);
}

function dataSource_error(e) {
    console.log('Error Event Raised: '+e.status);
}

$('#lnkWireUpDataSource').click(function () {
    _dataSource.bind('change', dataSourceChange);
    _dataSource.bind('error', dataSource_error);
    _dataSource.fetch();
});

$('#lnkAddRecord').click(function () {
    _dataSource.add({ Users_ID: 5, Users_FullName: 'Bert Bird', Users_Role: 'Viewer' });
});
$('#lnkModifyRecord').click(function () {
    var _dataItem = _dataSource.at(_dataSource.data().length - 1);
    _dataItem['Users_Role'] = 'Administrator';
});
$('#lnkRemoveRecord').click(function () {
    var _dataItem = _dataSource.at(_dataSource.data().length - 1);
    _dataSource.remove(_dataItem);
});

Answer 1

由于您要更新array而不是ObservableObject，因此不会引发此问题。当你使用：

_dataItem['Users_Role'] = 'Administrator';

您要做的是更新JavaScript对象的属性。在JavaScript中没有办法拦截/知道对象已被修改。

尝试：

_dataItem.set('Users_Role', 'Administrator');

而不是Kendo UI set检查您是否正在更新对象并触发events以及所有其他所需的操作。

见here

中修改过的示例

为什么修改数据项的数据后KendoUI DataSource更改事件没有引发？

1 个答案: