0

我整理了一个 jsFiddle，它演示了在修改数据项时不会触发更改事件。

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

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

问候，

斯科特

http://jsfiddle.net/codeowl/GfPDC/108/

出于某种原因，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);
});
4

1 回答 1

2

因为您更新的是 anarray而不是ObservableObject. 当您使用：

_dataItem['Users_Role'] = 'Administrator';

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

尝试：

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

相反，然后 Kendo UIset检查您是否正在更新对象和触发器events以及所有其他需要的操作。

看到你在这里修改的例子

于 2013-05-13T22:19:05.323 回答