Question

我正在使用具有（YUI2）JSON DataSource的用户界面，用于填充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。它会在支持reset()的{{1}}上调用RecordSet，这会删除所有行;然后用新数据重新填充表格。我尝试将其更改为使用DataTable，但这似乎也无效。

EDIT2：

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

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',
function（o）{ YAHOO.util.Dom.setStyle（o.el，'backgroundColor'，'＃ffff00'）; var animation = new YAHOO.util.ColorAnim（o.el，{ 背景颜色： { 去：'＃fffffff' } }）; animation.animate（）; }）;
var callback = {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};
dataSource.setInterval(1000, null, callback);

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

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

2 个答案: