将 cellUpdateEvent 与 YUI DataTable 和 JSON DataSource 一起使用

Question

我正在使用一个具有 (YUI2) JSON DataSource 的 UI，该 UI 用于填充 DataTable。我想做的是，当表中的值更新时，对值发生更改的单元格执行简单的动画。

以下是一些相关的代码片段：

var columns = [
    {key: 'foo'},
    {key: 'bar'},
    {key: 'baz'}
];

var dataSource = new YAHOO.util.DataSource('/someUrl');
dataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
dataSource.connXhrMode = 'queueRequests';
dataSource.responseSchema = {
    resultsList: 'results',
    fields: [
        {key: 'foo'},
        {key: 'bar'},
        {key: 'baz'}
    ]
};

var dataTable = new YAHOO.widget.DataTable('container', columns, dataSource);

var callback = function() {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};

dataSource.setInterval(1000, null, callback);

这就是我想用它做的事情：

dataTable.subscribe('cellUpdateEvent', function(record, column, oldData) {
    var td = dataTable.getTdEl({record: record, column: column});
    YAHOO.util.Dom.setStyle(td, 'backgroundColor', '#ffff00');
    var animation = new YAHOO.util.ColorAnim(td, {
        backgroundColor: {
            to: '#ffffff';
        }
    });
    animation.animate();
};

但是，使用 cellUpdateEvent 似乎不起作用。 由于 setInterval 回调而更新的单元格是否会触发 cellUpdateEvent？

可能是我不完全理解发生了什么在DataTable的幕后。也许每次查询数据时都会重新绘制整个表格，因此它不知道或不关心单个单元格的更改？解决方案是编写我自己的特定函数来替换 onDataReturnReplaceRows 吗？有人可以启发我如何实现这一目标吗？

编辑：

深入研究 datatable-debug.js 后，看起来 onDataReturnReplaceRows 不会触发 cellUpdateEvent。它对支持 DataTable 的 RecordSet 调用 reset()，从而删除所有行；然后它用新数据重新填充表。我尝试将其更改为使用 onDataReturnUpdateRows，但这似乎也不起作用。

Edit2：

为了实现我想要的控制，我最终编写了自己的基于

的数据列表，这对我正在尝试的问题更有意义来解决。珍妮的下面的回答应该有助于解决大多数其他人的问题，所以我接受它作为解决方案。

Answer 1

cellUpdateEvent 仅在响应 updateCell() 调用时触发。您想要的是订阅 cellFormatEvent。您的代码中还有一些其他问题，因此这应该可行：

dataTable.subscribe('cellFormatEvent', function(o) {
    YAHOO.util.Dom.setStyle(o.el, 'backgroundColor', '#ffff00');
    var animation = new YAHOO.util.ColorAnim(o.el, {
        backgroundColor: {
            to: '#ffffff'
        }
    });
    animation.animate();
});

var callback = {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};
dataSource.setInterval(1000, null, callback);

Answer 2

dataTable.subscribe('cellFormatEvent',

函数(o) {
YAHOO.util.Dom.setStyle(o.el, 'backgroundColor', '#ffff00');
var 动画 = new YAHOO.util.ColorAnim(o.el, {
背景颜色：{
至：'#ffffff'
}
});
动画.animate();
});

var 回调 = {
    成功：dataTable.onDataReturnReplaceRows，
    失败：函数（）{
        // 错误处理代码
    },
    范围：数据表
};
dataSource.setInterval(1000, null, 回调);

该示例将不起作用，因为您添加了一个间隔，而这不是正确的解决方案。因为该函数每次都会被调用。