使用YUI DATATABLE和JSON DATASOURCE使用CellUpdateEvent

Question

我正在使用具有（YUI2）JSON的UI 数据源 这被用来填充 数据词. 。我想做的是，当表格中的一个值更新时，请在其值更改的单元格上执行一个简单的动画。

这是一些相关代码段：

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. 。它打电话 reset() 在 RecordSet 那是支持 DataTable, ，删除所有行；然后，它可以用新的数据重新填充表。我尝试更改它以使用 onDataReturnUpdateRows, ，但这似乎也不起作用。

edit2：

为了实现我想要的控制，我最终写了自己的写作 <ul>- 基于我试图解决的问题更有意义的数据列表。珍妮的回答下面应该有助于解决大多数其他问题，因此我接受了解决方案。

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

如果您添加一个间隔，则此示例将无法使用，这不是正确的解决方案。因为该功能每次都会被调用。