2

DataTableにデータを入力するために使用されている（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>解決しようとしている問題に対してもう少し意味のある独自のデータリストを作成することになりました。以下のジェニーの答えは、他のほとんどの人にとってこれを解決するのに役立つはずなので、私はそれを解決策として受け入れました。

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'}}）; Animation.animate（）; }）;

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

間隔を追加したため、この例は機能しません。これは適切な解決策ではありません。関数は毎回呼び出されるためです。

于 2011-03-29T12:16:53.297 に答える