Javascript 将cellUpdateEvent与YUI数据表和JSON数据源一起使用

我使用的UI有一个YUI2JSON，用于填充。我想做的是，当表中的值更新时，在值更改的单元格上执行一个简单的动画

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

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的记录集调用reset，这将删除所有行；然后用新数据重新填充表。我尝试将其更改为使用onDataReturnUpdateRows，但这似乎也不起作用

编辑2：

---

为了实现我想要的控制，我最终编写了我自己的基于数据的列表，这对我试图解决的问题更有意义。Jenny在下面的回答应该可以帮助其他大多数人解决这个问题，所以我接受它作为解决方案。

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);

函数{ YAHOO.util.Dom.setStyleo.el，'backgroundColor'，'ffffff00'； var animation=new YAHOO.util.ColorAnimo.el{ 背景颜色：{ 致：“ffffff” } }; 动画； };

---

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

感谢您注册以提供此答案：-我现在更了解此问题。然而，“cellFormatEvent”似乎是在数据源轮询的每个时间间隔触发的。是否存在另一个仅在单元格中的数据更改时才会触发的事件？或者我应该使用与onDataReturnReplaceRows不同的回调方法？我觉得我所要求的超出了默认YUI DataTable/DataSource功能的能力，我必须编写自己的setInterval成功回调，或者类似的东西。当数据从以前的值更改时，不会触发任何事件，因此这取决于您的决定。要设置更精细的更新，您可能需要定义自己的回调成功处理程序函数，该函数为已更改的特定数据段调用updateRow或updateCell，我没有像onDataReturnReplaceRows那样重新呈现表中的所有行，而是编写了一个更好地满足我需要的自定义数据列表。它允许我对所呈现的数据进行更细粒度的控制，并且在语义上更有意义，而且重量更轻。不过，谢谢你的回答；我会接受它，因为我相信它会帮助其他寻求类似解决方案的人解决问题。

dataTable.subscribe('cellFormatEvent',

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