Как обновить таблицу данных YUI с помощью кнопки? - PullRequest
Новая
       26

Как обновить таблицу данных YUI с помощью кнопки?

7 голосов
/ 05 марта 2009

Я тестирую скрипт:

http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Я хотел бы добавить кнопку для обновления (сброса) данных. Я бы сбросил все измененные данные и перезагрузил первые данные. Я добавляю этот код, поэтому после выбора (обновления) у меня нет данных: 

YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {

var onMenuItemSelect = function () {

        myDataTable.initializeTable();

        myDataTable.render();

        };

        var aSplitButton5Menu = [

            { text: "Refresh", value: 1, onclick: { fn: onMenuItemSelect } }

        ];

        var oSplitButton5 = new YAHOO.widget.Button({ type: "split",  label: "Refresh table", name: "splitbutton", menu: aSplitButton5Menu, container: this });

    });

Что мне нужно использовать в моем onMenuItemSelect для обновления mydataTable?

Я внес некоторые изменения, чтобы изменить «город» и «рейтинг» в примере: http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Теперь я хочу сбросить MyTable с помощью кнопки (и перезагрузить набор данных по умолчанию). Когда я использую свой код, после нажатия кнопки я удаляю все данные и данные по умолчанию не перезагружаются (после нажатия кнопки появляется сообщение «Записи не найдены.»

Как я могу перезагрузить данные по умолчанию?

Ответы [ 5 ]

10 голосов
/ 08 января 2010

Я думаю, что ответ Гурно самый лучший, но в нем не хватает одного приятного прикосновения. Для отображения сообщения «Загрузка ...» необходимо вызвать функцию showTableMessage. 

myDataTable.showTableMessage("Loading...");
myDataTable.getDataSource().sendRequest('', { success: myDataTable.onDataReturnInitializeTable, scope: myDataTable });

Когда запрос завершается, функция onDataReturnInitializeTable автоматически очищает сообщение таблицы.

Я также разместил это в своем блоге .

5 голосов
/ 12 июня 2009

Я не мог заставить метод, который опубликовал Гурно (он упоминается повсеместно), работать, поэтому я придумал этот небольшой взлом: 

   function updateTable(){
      sortState = theDataTable.getState().sortedBy
      var sort = sortState ? sortState.key : "id";
      var dir = sortState ? sortState.dir : "yui-dt-desc";
      theDataTable.sortColumn(theDataTable.getColumn(sort),dir);
   };

вы находите текущий метод сортировки, а затем вызываете метод sortColumn, который указывает ему выполнить сортировку снова, и он обновляет данные. это также поддерживает нумерацию страниц. Я использую это с окном поиска и некоторыми фильтрами, чтобы изменить их значения и соответственно обновить таблицу.

4 голосов
/ 05 марта 2009

Если у вас есть экземпляр DataTable myTable:

myTable.render () перерисовает таблицу; myTable.initializeTable () уничтожит все состояния, включая сортировки и выборки, и перерисовает

-Эрик

2 голосов
/ 25 февраля 2011

Я не думаю, что смогу адекватно опубликовать весь код здесь для вашего необходимого решения, но у Satyam из Yahoo (по крайней мере, основного участника YUI) есть метод запроса, для которого он добавил расширение для Datatable, и опубликовал пример для этого. Я использовал это, и это прекрасно работает - особенно когда вам нужна функция поиска для ваших таблиц.

Вот ссылка для начала, но я бы также поискал в разделе «Запрос Satyam» дополнительные примеры или примеры, которые больше соответствуют вашей версии таблицы данных.

http://www.satyam.com.ar/yui/2.6.0/requery.html

1008 * Джейсон *

p.s. Если вы используете данные на стороне сервера, то решение, которое использует метод onDataReturnInitializeTable, поможет, но я думаю, что решение Satyam также учитывает это, а также отслеживание вашей нумерации страниц.

2 голосов
/ 24 апреля 2009

Я думаю, что это сработает, если ваша кнопка вызовет эту функцию: 

myDataTable.getDataSource().sendRequest('',
{ success: myDataTable.onDataReturnInitializeTable,scope: myDataTable});
...