En utilisant cellUpdateEvent avec YUI DataTable et JSON DataSource

Question

Je travaille avec une interface utilisateur qui a un (YUI2) JSON DataSource qui est utilisé pour alimenter un DataTable . Ce que je voudrais faire est, quand une valeur de la table est mise à jour, effectuez une animation simple sur la cellule dont la valeur modifiée.

Voici quelques extraits pertinents de code:

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

Et voici ce que je voudrais faire avec:

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

Cependant, il ne semble pas comme l'utilisation des œuvres de cellUpdateEvent. Est-ce une cellule qui est mis à jour à la suite de la fonction de rappel de setInterval même un feu cellUpdateEvent?

Il se peut que je ne comprends pas bien ce qui se passe sous le capot avec DataTable. Peut-être que toute la table est redessinée à chaque fois que les données sont demandées, il ne sait pas ou se préoccuper des changements aux cellules individuelles ?. La solution est d'écrire ma propre fonction spécifique pour remplacer onDataReturnReplaceRows? Quelqu'un pourrait-il me éclairer sur la façon dont je pourrais aller accomplir cela?

Modifier

Après avoir creusé dans DataTable-debug.js, il semble que onDataReturnReplaceRows ne se déclenche pas l'cellUpdateEvent. Il appelle reset() sur le RecordSet qui est la sauvegarde DataTable, qui supprime toutes les lignes; il re-remplit alors la table avec de nouvelles données. J'ai essayé de le changer à utiliser onDataReturnUpdateRows, mais cela ne semble pas fonctionner non plus.

Edit2:

Pour obtenir le contrôle que je voulais, je fini par écrire ma propre liste de données sur <ul> qui a fait un peu plus de sens pour le problème que je tente de résoudre. La réponse de Jenny ci-dessous devrait aider à résoudre ce pour la plupart des autres, donc je l'ai accepté comme solution.

Answer 1

cellUpdateEvent sans donner uniquement en réponse à un appel à updateCell (). Ce que vous voulez est de souscrire à l'cellFormatEvent. Il y avait quelques autres problèmes dans votre code, donc cela devrait fonctionner:

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

     

function (o) {           YAHOO.util.Dom.setStyle (o.el, 'backgroundColor', '# ffff00');           var animation = new YAHOO.util.ColorAnim (o.el, {               Couleur de l'arrière plan: {                   à: '#ffffff'               }           });           animation.animate ();       });

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

Cet exemple beceause vous ne fonctionnera pas ajouté un intervalle et ce n'est pas la bonne solution. Parce que la fonction est appelée à chaque fois.