Question

我需要在slickgrid的每个单元格中添加一个jquery ui滑块。记录数量超过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回调中调用滑块。

任何帮助将不胜感激。提前谢谢！

Answer 1

SlickGrid仅渲染视口中可见的内容以及一个小缓冲区。滚动时，动态添加和删除行/单元格。

这对您的情况意味着，当您在document.ready回调中初始化滑块小部件时，您只是初始化它们中的一小部分，而那些初始化的滑块小部件，不会得到当他们所在的单元格被SlickGrid删除并重新创建时重新初始化。

SlickGrid不允许您使用像单元格中的滑块这样的jQuery小部件，并且要求格式化程序输出纯HTML，以便以降低速度的方式实现网格变得困难。（我不会在这个公认的有争议的决定背后进行推理。）

我的建议是避免在这里使用jQuery UI滑块。它根本不具有可扩展性或高性能。没有虚拟化，你要做的就是不可能 - 初始化100个滑块将会非常缓慢;初始化10'000 x 150是不可能的。使用虚拟化时，您需要在滚动时动态初始化和销毁它们，而且滚动速度太慢，无法顺利滚动。

考虑使用HTML5范围输入 - <INPUT type="range">。除了IE＆lt; 10之外，所有主流浏览器都支持它。请参阅http://caniuse.com/#feat=input-range。

Answer 2

我使用an example选项创建了SlickGrid's async post-render。 @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);
})

如何在slickgrid的每个单元格中添加一个jquery ui滑块？

2 个答案: