Использование cellUpdateEvent с YUI DataTable и JSON DataSource - PullRequest
Новая
       23

Использование cellUpdateEvent с YUI DataTable и JSON DataSource

2 голосов
/ 22 апреля 2010

Я работаю с пользовательским интерфейсом, который имеет (YUI2) JSON DataSource , который используется для заполнения DataTable . Я хотел бы, чтобы при обновлении значения в таблице выполнялась простая анимация ячейки, значение которой изменилось.

Вот некоторые соответствующие фрагменты кода: 

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? Может ли кто-нибудь объяснить мне, как я могу это сделать?

Edit:

После копания в datatable-debug.js, похоже, что onDataReturnReplaceRows не будет запускать cellUpdateEvent. Он вызывает reset() на RecordSet, который поддерживает DataTable, который удаляет все строки; затем он заново заполняет таблицу свежими данными. Я попытался изменить его на onDataReturnUpdateRows, но, похоже, это тоже не сработало.

Edit2:

Чтобы добиться желаемого контроля, я в итоге написал свой собственный список данных на основе <ul>, который немного больше понимал проблему, которую я пытался решить. Ответ Дженни, приведенный ниже, должен помочь решить эту проблему для большинства других, поэтому я принял это как решение.

Ответы [ 2 ]

3 голосов
/ 22 апреля 2010

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);
0 голосов
/ 29 марта 2011 
dataTable.subscribe('cellFormatEvent',

функция (о) { YAHOO.util.Dom.setStyle (o.el, 'backgroundColor', '# ffff00'); var animation = new YAHOO.util.ColorAnim (o.el, { фоновый цвет: { to: '#ffffff' } }); animation.animate (); }); 

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

Этот пример не будет работать, потому что вы добавили интервал, и это не правильное решение. Потому что функция будет вызываться каждый раз.

...