SlickGrid: простой пример использования DataView, а не сырых данных?

Я работаю с SlickGrid, привязывая данные непосредственно к сетке из вызова Ajax. На данный момент он работает хорошо, сетка обновляется динамически и ее можно сортировать, и я использую настраиваемое средство форматирования для одного столбца:

var grid;
var columns = [{
  id: "time",
  name: "Date",
  field: "time"
},
{
  id: "rating",
  name: "Rating",
  formatter: starFormatter // custom formatter 
}
];
var options = {
  enableColumnReorder: false,
  multiColumnSort: true
};
// When user clicks button, fetch data via Ajax, and bind it to the grid. 
$('#mybutton').click(function() {
  $.getJSON(my_url, function(data) {
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });
});

Однако я хочу применить класс к строкам в сетке на основе значения данных, поэтому кажется, что я необходимо использовать DataView. Пример DataView в вики-странице SlickGrid довольно сложен и содержит все виды дополнительных методов.

Может кто-нибудь объяснить, как я просто конвертирую data в DataView - как изначально, так и при перезагрузке Ajax - оставляя сетку доступной для сортировки и продолжая использовать свой собственный форматировщик? (Мне не нужно знать, как применять класс, буквально только как использовать DataView.)

Я надеюсь, что внутри вызова .getJSON есть одна или две лишние строки, но боюсь, что это может быть сложнее.


javascript jquery datagrid slickgrid
person flossfan    schedule 23.07.2012    source источник

Ответы (3)


arrow_upward
18
arrow_downward

Ключевыми частями являются инициализация сетки с просмотром данных в качестве источника данных, подключение событий, чтобы сетка реагировала на изменения в обзоре данных, и, наконец, подача данных в представление данных. Это должно выглядеть примерно так:

dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
});

// When user clicks button, fetch data via Ajax, and bind it to the dataview. 
$('#mybutton').click(function() {
  $.getJSON(my_url, function(data) {
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();
  });
});

Обратите внимание, что вам не нужно каждый раз создавать новую сетку, просто привяжите данные к просмотру данных.

Если вы хотите реализовать сортировку, вам также необходимо указать представлению данных для сортировки, когда сетка получает событие сортировки:

grid.onSort.subscribe(function (e, args) {
  sortcol = args.sortCol.field;  // Maybe args.sortcol.field ???
  dataView.sort(comparer, args.sortAsc);
});

function comparer(a, b) {
  var x = a[sortcol], y = b[sortcol];
  return (x == y ? 0 : (x > y ? 1 : -1));
}

(Эта базовая сортировка взята из примеров SlickGrid, но вы можете реализовать что-то самодельное; например, без использования глобальной переменной)

person njr101    schedule 23.07.2012
comment
Спасибо! На самом деле это работает хорошо, за одним исключением: при сортировке сетки я получаю ошибку javascript: Uncaught TypeError: Cannot read property 'field' of undefined. Есть идеи, где нужно определить args.sortCol.field? - person flossfan; 23.07.2012
comment
NB: я бы хотел, чтобы все столбцы можно было сортировать. - person flossfan; 23.07.2012
comment
Похоже на опечатку в ссылке на свойство args.sortCol.field. Параметр args передается в обратный вызов onSort. Просто поместите console.log(args); в верхней части обратного вызова и проверьте правильное имя свойства для поля сортировки (см. Последнее изменение). Убедитесь, что вы внимательно проверили капитилсацию. Эти параметры были изменены в некоторых последних версиях SlickGrid, поэтому они могут быть неточными. Но основы верны, и это действительно будет сортировка по любому столбцу. - person njr101; 23.07.2012
comment
Вы были правы, это была опечатка. Этот ответ не мог быть лучше - СПАСИБО. - person flossfan; 23.07.2012

arrow_upward
2
arrow_downward

Следующее хорошо объясняет dataView: https://github.com/mleibman/SlickGrid/wiki/DataView

person akif1    schedule 24.07.2013

arrow_upward
0
arrow_downward

multiColumnSort: true ==> Тип sortCol: Массивы.
multiColumnSort: false ==> Тип sortCol: Объект.

person Hak-young Leem    schedule 11.09.2014