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, но я боюсь, что это может быть сложнее.

Ответы

Ответ 1

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

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();
  });
});

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

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

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, но вы можете реализовать что-то самодельное, не используя, например, глобальную переменную)

Ответ 3

multiColumnSort: true == > sortCol type: Массивы.
multiColumnSort: false == > sortCol type: Object.