Как обновить таблицу и применить существующие фильтры - PullRequest
Новая
       19

Как обновить таблицу и применить существующие фильтры

0 голосов
/ 31 января 2020

Мы используем отличную библиотеку Tabulator JS. Мы опрашиваем наш сервер через определенные промежутки времени, чтобы обновить sh данные в нашей таблице. В этом случае мы пытаемся добиться следующего поведения:

  1. Обновить существующие данные в таблице
  2. Добавить все новые строки, которые "соответствуют" текущим фильтрам
  3. Удалите все строки, которые изменились и не соответствуют фильтрам
  4. Сохраните существующую позицию прокрутки
  5. Сохраните все выбранные строки.
  6. Если фильтры удалены, отобразите последние data.

Существует 3 способа обновления Tabulator

http://tabulator.info/docs/4.5/update

  1. SetData (мы используем это при первом выборка)
  2. updateData
  3. updateOrAddData (мы используем это при повторных выборках, но редактирование строк не отфильтровывается)
  4. replaceData

In в документах упоминается, что «replaceData» обновит существующие данные таблицы без сброса позиции прокрутки или выбранных строк, это, похоже, не так. updateData обновляет данные и оставляет позиции прокрутки и выбранные строки как есть, НО не применяет фильтры, например, если строка обновляется вне области текущего фильтра, который она все еще показывает?

Наш код прямо сейчас: 

if (replace) {
   table.updateOrAddData(data); //replaceData
} else {
   table.setData(data);
}

Нам нужна таблица для обновления и удовлетворения наших требований в моих пунктах 1-6 выше. Я ожидал бы, что один из перечисленных методов (замена, обновление) сделает это, и в документах, кажется, они должны, но в наших тестах это терпит неудачу. Как мы можем достичь желаемых результатов?

Мы используем версию 4.5, пониженную с 4.4.

Редактировать:

Так, например, если мы обновим таблицу с данными и одним из строки в таблице не существуют в новых данных, это обновление не сохраняется. Если мы не используем setData, который сбрасывает позицию прокрутки, отменяет все выбранные строки и т. Д.

Ответы [ 3 ]

0 голосов
/ 01 февраля 2020

После долгих поисков и просмотра документов Tabulator 4.5 кажется, что таблица не может обновить существующие данные, повторно применить фильтры, удалить мертвые строки (те, которые отсутствуют в новых данных с сервера) из одного из обновлений, заменить методы , Из того, что я могу понять, это может быть достигнуто с помощью кода, который я написал ниже, который использует метод updateOrAddData, метод setFilter и мою собственную функцию asyn c для l oop таблицы и удаления мертвых строк. 

    // var data= new data from server - any array.
    // get the existing filters, update the data or add any new rows.
    var f = table.getFilters();
        table.updateOrAddData(data); //replaceData with server copy

        var keys = [],
            r = table.getRows();
        // make a list of all the  keys in our server data, this will make it faster to remove dead rows.
        data.forEach(function(item) { keys.push(item.id); });
        // remove any dead rows in the data that do not belong start at row 0
        removeDeadRows(0, function() {
            table.setFilter(f); //re-apply filters when finished.
        });

    // iterate the table test if each row is in our key list, if not remove it.
        function removeDeadRows(pos, cb) {
            if (!r[pos]) return cb();
            var c = pos + 1;
            try {
                if (keys.indexOf(r[pos].getData().id) > 0) return removeDeadRows(c, cb);
                r[pos].delete();
                removeDeadRows(c, cb);
            } catch (e) {
                console.log(e);
                cb();
            }
        }
0 голосов
/ 01 февраля 2020

если я понимаю ваш ОП, это то, что вы искали? 

var selected,visible;
var t = new Tabulator("#tabulator", {
    data:[
        {id:1,title:'One'},{id:2,title:'Two'},{id:3,title:'Three'},{id:4,title:'Four'},{id:5,title:'Five'},
        {id:11,title:'Eleven'},{id:12,title:'Twelve'},{id:13,title:'Thirteen'},{id:14,title:'Fourteen'},{id:15,title:'Fifteen'},
    ],
    height:"10em",
    selectable:true,
    columns:[ {title:'Title',field:'title',headerFilter:'input'}, ],
    initialHeaderFilter:[{field:'title',value:'e'}],
    dataLoading:function(d) { if (t) { selected = t.getSelectedData().map(o => o['id']); visible = t.getData('visible').map(o => o['id']); } },
    dataLoaded:function(d) { if (t) { t.selectRow(selected); t.scrollToRow(visible); } }
});
t.selectRow([3,11,15]);
t.scrollToRow(15);
setTimeout(() => {
    t.replaceData([
        {id:3,title:'Three'},{id:5,title:'Five'},{id:6,title:'Six'},{id:7,title:'Seven'},{id:8,title:'Eight'},{id:9,title:'Nine'},{id:10,title:'Ten'},
        {id:13,title:'Thirteen'},{id:15,title:'Fifteen'},{id:16,title:'Sixteen'},{id:17,title:'Seventeen'},{id:18,title:'Eighteen'},{id:19,title:'Nineteen'},{id:20,title:'Twenty'},
    ]);
},5000);
0 голосов
/ 31 января 2020

Вы можете либо позвонить вручную Перерисовать 

table.redraw(true); //trigger full rerender including all data and rows

или просто использовать реактивные данные 

reactiveData:true, //enable reactive data
data:tableData, //assign data array
...