我需要向 slickgrid 的每个单元格添加一个 jquery ui slider 。记录数量超过 10,000 条，超过 150 列。问题是初始的一组 slider 渲染得很好，但当我滚动(向左或向右)时，它们消失了。不知何故，这些单元格的网格并没有变得无效。我在列上使用以下格式化程序:
SliderFormatter = function (row, cell, value, colDef, dataContext) {
var html = "<div class='mySlider' id='slider_" + dataContext['id'] + "'></div>" + value;
return html;
}
并从我的 document.ready 回调中调用 slider 。
任何帮助将不胜感激。提前致谢!
最佳答案
SlickGrid 仅渲染视口(viewport)中可见的内容以及一个小缓冲区。当您滚动时，行/单元格会动态添加和删除。
这对您的情况意味着什么，当您初始化 document.ready 中的 slider 小部件时回调中，您只初始化了其中的一小部分，而那些已初始化的单元格，当 SlickGrid 删除并重新创建它们所在的单元格时，不会重新初始化。
SlickGrid 不允许您使用 jQuery 小部件(例如单元格中的 slider )，并且要求格式化程序输出纯 HTML，以便难以以会减慢速度的方式实现网格。 (我不会深入探讨这个公认的有争议的决定背后的推理。)
我的建议是避免在此处使用 jQuery UI slider 。它的可扩展性或性能根本不够。如果没有虚拟化，您想要做的事情是不可能的 - 初始化 100 个 slider 将会非常慢；初始化其中 10'000 x 150 是不可能的。通过虚拟化，您需要在滚动时动态初始化和销毁它们，而这太慢而无法平滑滚动。
考虑使用 HTML5 范围输入 - <INPUT type="range"> 。除 IE <10 之外的所有主要浏览器都支持它。请参阅http://caniuse.com/#feat=input-range .
关于javascript - 如何向 slickgrid 的每个单元格添加 jquery ui slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20343983/