Mit cellUpdateEvent mit YUI Datatable und JSON Datasource

Question

Ich arbeite mit einer Benutzeroberfläche, die eine (YUI2) JSON Datasource dass der hat wird verwendet, um bevöl ein Datatable . Was ich möchte, ist zu tun, wenn ein Wert in der Tabelle aktualisiert wird, eine einfache Animation auf der Zelle, deren Wert geändert durchführen.

Hier sind einige relevante Code-Schnipsel:

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

Und hier ist es, was ich mit ihm tun möchte:

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

Doch es scheint nicht wie cellUpdateEvent Werke verwenden. Ist eine Zelle, die als Folge des setInterval Rückruf aktualisiert wird sogar ein cellUpdateEvent Feuer?

Es kann sein, dass ich nicht ganz verstehen, was mit DataTable unter der Haube vor sich geht. Vielleicht ist die ganze Tabelle neu gezeichnet jedes Mal wird die Daten abgefragt wird, so dass es nicht wissen oder kümmern uns um Änderungen an einzelnen Zellen ?. Ist die Lösung meine eigene spezifische Funktion schreiben onDataReturnReplaceRows zu ersetzen? Könnte jemand mich aufklären, wie ich dies zu erreichen, gehen könnte?

Edit:

Nach dem Graben durch Datatable-debug.js, sieht es aus wie onDataReturnReplaceRows die cellUpdateEvent nicht ausgelöst. Er fordert reset() auf dem RecordSet, die die DataTable Rückendeckung, die alle Zeilen löscht; es dann wieder füllt die Tabelle mit neuen Daten. Ich habe versucht, zu ändern es onDataReturnUpdateRows zu verwenden, aber das scheint nicht zu arbeiten entweder.

Edit2:

, um die Steuerung zu erreichen, dass ich wollte, landete ich meine eigene <ul> basierte Datenliste zu schreiben, die ein bisschen mehr Sinn für das Problem habe ich zu lösen versuchte. Jennys Antwort unten sollte dies für die meisten anderen helfen zu lösen, so dass ich es als Lösung akzeptiert haben.

Answer 1

cellUpdateEvent feuert nur als Reaktion auf einen Aufruf von update (). Was Sie wollen, ist auf die cellFormatEvent abonnieren. Es gab ein paar andere Probleme in Ihrem Code, so sollte dies funktionieren:

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',

     

Funktion (o) {           YAHOO.util.Dom.setStyle (o.el, 'background', '# ffff00');           var Animation = new YAHOO.util.ColorAnim (o.el, {               Hintergrundfarbe: {                   zu: ‚# FFFFFF‘               }           });           animation.animate ();       });

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

In diesem Beispiel wird nicht beceause Sie arbeiten hinzugefügt ein Intervall und das ist nicht die richtige Lösung. Da die Funktion wird jedes Mal aufgerufen werden.