Pregunta

Estoy trabajando con una interfaz de usuario que tiene un (YUI2) JSON origen de datos que de que se utiliza para rellenar un DataTable . Lo que me gustaría hacer es, cuando un valor de la tabla se actualiza, realice una animación simple en la celda cuyo valor cambiado.

Éstos son algunos fragmentos relevantes de código:

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

Y esto es lo que me gustaría hacer con él:

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

Sin embargo, no parece que el uso de las obras cellUpdateEvent. ¿Tiene una célula que se actualiza como resultado de la devolución de llamada setInterval incluso disparar un cellUpdateEvent?

Puede ser que no entiendo completamente lo que está pasando bajo el capó con DataTable. Tal vez toda la tabla se están dibujando de nuevo cada vez que se consultan los datos, por lo que no sabe o no se preocupan por los cambios en las células individuales ?. Es la solución a escribir mi propia función específica para reemplazar onDataReturnReplaceRows? ¿Podría alguien me ilumine sobre cómo podría ir sobre el cumplimiento esto?

Editar

Después de excavar a través de DataTable-debug.js, parece que onDataReturnReplaceRows no se disparará el cellUpdateEvent. Se llama reset() en el RecordSet que está apoyando el DataTable, que borra todas las filas; A continuación, re-llena la tabla con los datos frescos. He intentado cambiar a utilizar onDataReturnUpdateRows, pero eso no parece funcionar bien.

Edit2:

Para lograr el control que quería, terminé de escribir mi propia lista de datos basada en <ul> que hizo un poco más de sentido para el problema que estaba tratando de resolver. a continuación la respuesta de Jenny debe ayudar a resolver esto para la mayoría de los otros, por lo que lo he aceptado como la solución.

¿Fue útil?

Solución

cellUpdateEvent sólo se desencadena en respuesta a una llamada a updateCell (). Lo que se quiere es suscribirse a la cellFormatEvent. Había un par de otros temas en su código, así que esto debería funcionar:

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

Otros consejos

dataTable.subscribe('cellFormatEvent',
     

Función (o) {           YAHOO.util.Dom.setStyle (o.el, 'backgroundColor', '# ffff00');           animación var = new YAHOO.util.ColorAnim (o.el, {               color de fondo: {                   a: '#ffffff'               }           });           animation.animate ();       });

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

Este ejemplo no funcionará beceause se añadió un intervalo y esta no es la solución correcta. Debido a que la función será llamada cada vez.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top