Как добавить слайдер jquery ui в каждую ячейку slickgrid?

0

Мне нужно добавить ползунок 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
jquery-ui-slider

2 ответа

1
Лучший ответ

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.

Поделиться
  • 0
    спасибо за предложение по типу диапазона, я не знал, что он существует. Я попробую и дам вам знать. И спасибо большое за SlickGrid, похоже, он сделан специально для моего конкретного сценария: D
  • 0
    @Tin он не мог использовать асинхронную опцию пост-рендеринга ? Или это все еще будет слишком медленно?
Показать ещё 2 комментария
1

Я создал пример, используя опцию 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);
})
Поделиться
  • 0
    В итоге я выбрал собственный тип диапазона, так как мне не требовалась поддержка старых браузеров. Всегда полезно знать альтернативы!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню