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

【问题标题】：Using cellUpdateEvent with YUI DataTable and JSON DataSource将 cellUpdateEvent 与 YUI DataTable 和 JSON DataSource 一起使用
【发布时间】：2010-04-22 14:27:12
【问题描述】：

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

以下是一些相关的sn-ps代码：

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，但这似乎也不起作用。

编辑2：

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

【问题讨论】：

标签： javascript yui yui-datatable yui-datasource

【解决方案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);

【讨论】：

感谢您注册只是为了提供这个答案:) - 我现在离这个更近了。但是，似乎在轮询 DataSource 的每个时间间隔都会触发“cellFormatEvent”。是否有另一个事件只会在单元格本身的数据发生变化时触发？或者也许我应该使用与 onDataReturnReplaceRows 不同的回调方法？我觉得我所要求的超出了默认 YUI DataTable/DataSource 功能的能力，我必须编写自己的 setInterval 成功回调，或者类似的东西。
当数据从以前的值发生变化时，不会触发任何事件，因此这由您决定。要设置更精细的更新，您可能需要定义自己的回调成功处理函数，该函数调用 updateRow 或 updateCell 来处理已更改的特定数据，而不是重新渲染表的所有行（这就是 onDataReturnReplaceRows 所做的)。
我最终做的是编写一个自定义的基于<ul> 的数据列表，以更好地满足我的需求。它使我能够对呈现的数据进行更细粒度的控制，并且在语义上更有意义（以及更轻量级）。但是，感谢您的回答；我会接受它，因为我相信它会帮助其他寻求类似解决方案的人解决问题。

【解决方案2】：

dataTable.subscribe('cellFormatEvent',
函数（o）{ YAHOO.util.Dom.setStyle(o.el, 'backgroundColor', '#ffff00'); var 动画 = 新 YAHOO.util.ColorAnim(o.el, { 背景颜色： { 至：'#ffffff' } }); 动画.animate(); });
var callback = {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};
dataSource.setInterval(1000, null, callback);

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

【讨论】：