如何最好地将 YUI DataTable 的 RecordSet 与 JavaScript 数组同步？

Question

我有一个 javascript 数组，用作可编辑 YUI 数据表中的数据源：

var data = [
    { Col1: "one", Col2: 1 },  
    { Col1: "two", Col2: 2 },      
    { Col1: "three", Col2: 3 },
    { Col1: "four", Col2: 4 }
];
var customFormatter = function (elLiner, oRecord, oColumn, oData) {
    elLiner.innerHTML = "Click me";
    $(elLiner).click(function () {
        var rsvalue = oRecord.getData("Col1");
        var datavalue = data[oRecord.getCount()].Col1;;
        alert("rs:" + rsvalue + ", data:" + datavalue);
    });
};
var coldefs = [
    { key: "Col1", editor: new YAHOO.widget.TextboxCellEditor() },
    { key: "Col2" },
    { key: "Col3", formatter: customFormatter }
];
var datasource = new YAHOO.util.DataSource(data);
datasource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
datasource.responseSchema = { fields: [ "Col1", "Col2" ] };
var datatable = new YAHOO.widget.DataTable("mytable", coldefs, datasource);
datatable.subscribe("cellClickEvent", datatable.onEventShowCellEditor);

当我更改可编辑单元格中的值时，我看到数据表的记录已使用新值进行更新，但底层 data< /code> 数组没有。当用户完成数据编辑时，我想使用这个 javascript 数组（或另一个这种形状），我需要进行一些后处理并将其发送到服务器。在一般良好的 YUI 示例中，我没有看到它们尝试将数据表中所做的更改与底层数据源相协调。这样的例子存在吗？将更改推送回 data 数组的最佳方法是什么？

这是我的小测试的 jsfiddle： http://jsfiddle.net/cfarmerga/uArKs/1/

我是否应该捕获 DataTable 的 editorSaveEvent 并遍历记录集并更新我的 javascript 数组？

Answer 1

如果可能的话，我建议在用户完成编辑后重建数据数组，进行任何后处理，然后将其发送到服务器。这比在每次单独编辑后尝试保持数据源和数组同步更有效。要重建数组，您可以循环访问数据表的 RecordSet。

var rs = datatable.getRecordSet(),
    len = rs.getLength(),
    data = [];

for (var index=0; index < len; index++) {
    data.push(rs.getRecord(index).getData());
}

请注意，getData() 返回一个表示整个记录的对象。您还可以将各个键传递给 getData()（例如 getData("Col1")）来获取记录的各个字段。