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

Я работаю с пользовательским интерфейсом, который имеет (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? Может ли кто-нибудь просветить меня о том, как я могу это сделать?

Изменить:

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

Изменить2:

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


javascript yui yui-datatable yui-datasource
person Rob Hruska    schedule 22.04.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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);
person Jenny Donnelly    schedule 22.04.2010
comment
Спасибо, что зарегистрировались только для того, чтобы дать этот ответ :) - Теперь я ближе к этому. Однако кажется, что «cellFormatEvent» запускается через каждый интервал опроса DataSource. Есть ли другое событие, которое будет срабатывать только при изменении данных в самой ячейке? Или, возможно, мне следует использовать другой метод обратного вызова, отличный от onDataReturnReplaceRows? У меня такое ощущение, что то, о чем я прошу, выходит за рамки возможностей функциональности YUI DataTable/DataSource по умолчанию, и что мне придется написать свой собственный обратный вызов setInterval для успеха или что-то в этом роде. - person Rob Hruska; 22.04.2010
comment
Не существует события, которое срабатывает, когда данные изменяются по сравнению с предыдущим значением, так что это зависит от вас. Чтобы настроить более детализированное обновление, вы можете определить свою собственную функцию обработчика успешного обратного вызова, которая вызывает updateRow или updateCell для определенных фрагментов данных, которые были изменены, вместо повторного рендеринга всех строк таблицы (что и делает onDataReturnReplaceRows). ). - person Jenny Donnelly; 01.05.2010
comment
В итоге я написал собственный список данных на основе <ul>, который немного лучше соответствовал моим потребностям. Это позволило мне более точно контролировать представляемые данные и имело немного больше смысла семантически (а также было легче). Тем не менее, спасибо за ваш ответ; Я приму это, потому что считаю, что это поможет решить проблему другим, которые ищут аналогичные решения. - person Rob Hruska; 21.05.2010

arrow_upward
-1
arrow_downward 

dataTable.subscribe('cellFormatEvent',

function(o) {YAHOO.util.Dom.setStyle(o.el, 'backgroundColor', '#ffff00'); var animation = new YAHOO.util.ColorAnim(o.el, { backgroundColor: {to: '#ffffff' } }); анимация.анимация(); });

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

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

person brahimhackman    schedule 29.03.2011