我需要为 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 回调中调用滑块。
任何帮助将不胜感激。提前致谢！
【问题讨论】：
标签： javascript jquery jquery-ui slickgrid jquery-ui-slider
SlickGrid 仅渲染视口中可见的内容，外加一个小缓冲区。滚动时，行/单元格会动态添加和删除。
这对您的情况意味着什么，当您在 document.ready 回调中初始化滑块小部件时，您只初始化了其中的一小部分，而那些确实被初始化的小部件，不要重新当它们所在的单元格被 SlickGrid 删除并重新创建时初始化。
SlickGrid 不允许您在单元格中使用 jQuery 小部件（如滑块），并且要求格式化程序输出纯 HTML，以便难以以会减慢速度的方式实现网格。 （我不会讨论这个公认有争议的决定背后的原因。）
我的建议是避免在此处使用 jQuery UI 滑块。它根本没有足够的可扩展性或性能。如果没有虚拟化，你想要做的事情是不可能的——初始化 100 个滑块会非常慢；初始化 10'000 x 150 是不可能的。使用虚拟化，您需要在滚动时动态初始化和销毁它们，这太慢了，无法平滑滚动。
考虑使用 HTML5 范围输入 - <INPUT type="range">。除 IE http://caniuse.com/#feat=input-range。
【讨论】：
我使用SlickGrid's async post-render 选项创建了an example。 @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);
})
【讨论】：