2

我正在使用具有 (YUI2) JSON DataSource用于填充DataTable的 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()，它删除所有行；然后它用新数据重新填充表。我尝试将其更改为 use ，但这似乎也不起作用。RecordSetDataTableonDataReturnUpdateRows

编辑2：

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

4

2 回答 2

3

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);
于 2010-04-22T16:48:26.380 回答
-1 
dataTable.subscribe('cellFormatEvent',

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

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

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

于 2011-03-29T12:16:53.297 回答