代码之家 › 专栏 › 技术社区 › Rob Hruska MegalomanINA

将cellUpdateEvent与yui数据表和json数据源一起使用

yui-datasource yui-datatable yui javascript

2

Rob Hruska MegalomanINA · 技术社区 · 14 年前

我正在使用一个具有(yui2)json的UI 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 回拨甚至开火 CysUpDebug事件 ?

可能是我不完全理解引擎盖下面发生了什么 DataTable . 也许每次查询数据时都会重新绘制整个表,所以它不知道也不关心单个单元格的更改?。是编写自己的特定函数来替换的解决方案 onDataReturnReplaceRows ?有人能告诉我如何完成这个任务吗?

编辑:

在挖掘dataTable-debug.js之后,它看起来像 OnDataReturn替换 不会开火 CysUpDebug事件 . 它叫 reset() 上 RecordSet 这是支持 可计算的 ,删除所有行;然后用新数据重新填充表。我试着把它改成 onDataReturnUpdateRows 但这似乎也不管用。

编辑2:

为了达到我想要的控制,我最终写了自己的 <ul> -基于数据列表,这对我试图解决的问题有点意义。下面珍妮的回答应该有助于大多数人解决这个问题,所以我接受它作为解决方案。

2 回复 | 直到 11 年前

1

3

Jenny Donnelly 14 年前

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

2

-1

Shoe 11 年前

dataTable.subscribe('cellFormatEvent',
函数(o){ yahoo.util.dom.setStyle(o.el,'backgroundcolor','ffffff00'); var animation=new yahoo.util.coloranim(o.el,){ 背景颜色:{ 对:“ } (}); animation.animate(); (});
var callback = {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};
dataSource.setInterval(1000, null, callback);

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