Мне нужно добавить ползунок jquery ui для каждой ячейки slickgrid. Количество записей превышает 10 000 с более чем 150 столбцами. Проблема в том, что начальный набор слайдеров отображается отлично, но при прокрутке (влево или вправо) они исчезают. Так или иначе, сетка не становится недействительной для этих ячеек. Я использую следующий форматтер в столбце:
SliderFormatter = function (row, cell, value, colDef, dataContext) {
var html = "<div class='mySlider' id='slider_" + dataContext['id'] + "'></div>" + value;
return html;
}
и вызывать ползунок из моего document.ready
Обратный вызов.
Любая помощь будет оценена. Заранее спасибо !
SlickGrid отображает только то, что видно в окне просмотра, плюс небольшой буфер. При прокрутке строки/ячейки динамически добавляются и удаляются.
Это означает, что при инициализации виджета слайдера в обратном вызове document.ready
вы инициализируете лишь небольшую часть из них, а те, которые инициализировались, не получают повторной инициализации, когда ячейки, в которых они находятся, удаляются и воссоздаются SlickGrid.
SlickGrid не позволяет вам использовать виджеты jQuery, такие как слайдер в ячейках, и требует, чтобы formatters выводили чистый HTML-код, чтобы затруднить реализацию сетки таким образом, чтобы замедлить ее. (Я не буду вдаваться в моих рассуждений за этим надо признать спорное решение.)
Мой совет здесь заключается в том, чтобы избежать использования слайдера jQuery UI здесь. Это просто не масштабируемо или недостаточно. Без виртуализации то, что вы пытаетесь сделать, невозможно - инициализация 100 слайдеров будет очень медленной; инициализация 10 000 х 150 из них не может быть и речи. С виртуализацией вам нужно будет инициализировать и уничтожать их на ходу, пока вы прокручиваетесь, и это слишком медленно, чтобы прокручивать плавно.
Рассмотрите возможность использования входного диапазона HTML5 - <INPUT type="range">
. Он поддерживается всеми основными браузерами, за исключением IE <10. См. Http://caniuse.com/#feat=input-range.
Я создал пример, используя опцию post-render для Async для SlickGrid. @Tin, вероятно, прав, что было бы лучше использовать собственный <input type="range">
но на всякий случай вам нужно поддерживать старые браузеры здесь, как вы можете это сделать.
function waitingFormatter(value) {
return '<div class="slider"></div>';
}
function renderSlider(cellNode, row, dataContext, colDef) {
var cell = $(cellNode);
cell.find('.slider').slider({
value: dataContext.value,
slide: function(e, ui) {
data[row].value = ui.value;
cell.prev().html(ui.value);
}
});
}
var grid;
var data = [];
var columns = [
{ id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title" },
{ id: "value", name: "Value", field: "value", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator },
{ id: "chart", name: "Slider", sortable: false, width: 425, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSlider }
];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableAsyncPostRender: true
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d["title"] = "Record " + i;
d["value"] = Math.round(Math.random() * 100);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})