Utilizzando cellUpdateEvent con YUI DataTable e JSON DataSource

Question

Sto lavorando con un'interfaccia utente che ha un (YUI2) JSON DataSource Ecco viene utilizzato per popolare un DataTable . Quello che vorrei fare è, quando un valore nella tabella viene aggiornata, eseguire una semplice animazione sulla cella il cui valore modificato.

Ecco alcuni frammenti importanti di codice:

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

Ed ecco cosa mi piacerebbe fare con esso:

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

Tuttavia, non sembra come l'utilizzo di opere cellUpdateEvent. Fa una cella che viene aggiornato a seguito della richiamata setInterval anche sparare un cellUpdateEvent?

E 'possibile che non capisco pienamente che cosa sta succedendo sotto il cofano con DataTable. Forse l'intera tabella è essere ridisegnato ogni volta che i dati sono interrogato, in modo che non conosce o cura di modifiche alle singole celle ?. È la soluzione di scrivere la mia funzione specifica per sostituire onDataReturnReplaceRows? Qualcuno potrebbe illuminarmi su come potrei fare per realizzare questo?

Modifica

Dopo aver scavato attraverso DataTable-debug.js, sembra che onDataReturnReplaceRows non scatta il cellUpdateEvent. Si chiede reset() sul RecordSet che sta sostenendo la DataTable, che elimina tutte le righe; poi ri-popola la tabella con i dati freschi. Ho provato a cambiare in modo da utilizzare onDataReturnUpdateRows, ma che non sembra funzionare.

Edit2:

Per ottenere il controllo che volevo, ho finito per scrivere la mia lista di dati <ul>-based che ha reso un po 'più senso per il problema che stavo cercando di risolvere. La risposta di Jenny seguito dovrebbe aiutare a risolvere questo per la maggior parte gli altri, così ho accettato come soluzione.

Answer 1

cellUpdateEvent spara solo in risposta ad una chiamata a updateCell (). Ciò che si vuole è quello di iscriversi alla cellFormatEvent. C'erano un paio di altri problemi nel codice, quindi questo dovrebbe funzionare:

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

     

funzione (o) {           YAHOO.util.Dom.setStyle (o.el, 'backgroundColor', '# ffff00');           var = new animazione YAHOO.util.ColorAnim (o.el, {               colore di sfondo: {                   a: '#ffffff'               }           });           animation.animate ();       });

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

In questo esempio non funziona beceause si aggiunge un intervallo e questo non è la soluzione giusta. Poiché la funzione verrà chiamato ogni volta.