我有一个似乎无法解决的问题。我需要创建一个循环数据集数组的函数,并为每个数据集创建一个独立的slickgrids。问题是函数需要独立地绑定到每个网格。例如:
// this part works fine
for(var i=0; i<domain.length; i++){
dataView = new Slick.Data.DataView();
grid = new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options);
var data = domain[i].data;
// this works well and I am able to create several slickgrid tables
... etc ...
问题在于每个网格现在都称为“网格”。因此,当我绑定这样的函数时:
// controls the higlighting of the active row
grid.highlightActiveRow = function () {
var currentCell;
currentCell = this.getActiveCell();
我得到一个影响所有网格的结果(或者在某些情况下只有一个网格)。
如何使用相关功能创建多个独立网格?问题似乎是我创建了一个对象“grid”然后使用语法grid.xxx分配所有函数 - 但我不知道如何在每次迭代时创建一个唯一的对象。
任何帮助都将非常感激。
PS:slickgrid太棒了!谢谢
// * ** * ** 更新 * ** * ** * ** @Jokob,@ user700284
谢谢你的帮助。这是我要去的地方:
var dataView;
function buildTable() {
for(i = 0; i<domains.length; i++){
dataView = new Slick.Data.DataView();
var d = domains[i];
grid = new Slick.Grid('#' + d.name, dataView, d.columns, grids.options);
var data = d.data;
grid.init();
dataView.beginUpdate();
dataView.setItems(data);
// dataView.setFilter(filter); -- will be reinstated once i have this working
dataView.endUpdate();
arrOfGrids.push(grid);
};
};
雅各布 - 现在我坚持“为(i)”直到我能围绕你的评论 - 这似乎是非常明智的。
但是,使用上面的内容,网格数据不会填充。我没有得到任何js错误,列标题正在填充,但不是数据。对d.data的引用肯定是正确的,因为我可以使用Chrome js调试器查看数据。
有什么想法吗?非常感谢你的帮助到目前为止
答案 0 :(得分:1)
而不是将所有新网格分配给grid
(在这种情况下,每次创建新网格时都会覆盖旧网格),将它们推送到数组:
var arrayOfGrids = [];
for(var i=0; i<domain.length; i++) {
dataView = new Slick.Data.DataView();
arrayOfGrids.push(new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options));
// ....
然后,当您想要使用网格时,例如添加高亮显示功能,您可以遍历数组并为每个元素执行此操作:
for ( var i=0; i<arrayOfGrids.length; i++ ) {
arrayOfGrids[i].highlightActiveRow = function () {
var currentCell;
currentCell = this.getActiveCell();
// ... etc...
<强>奖金强>
虽然我们正在使用它,但我建议您在迭代数组时使用数组对象上可用的forEach
方法,而不是for循环。与循环不同,forEach
为变量创建了适当的范围,它摆脱了无用的i
- 迭代变量:
var arrayOfGrids = [];
domain.forEach(function(d) {
dataView = new Slick.Data.DataView();
arrayOfGrids.push(new Slick.Grid('#' + d.name, dataView, d.columns, d.options));
// ....
然后对于另一个循环当然相同:)
答案 1 :(得分:1)
您可以尝试将每个网格实例添加到数组中。如果需要,您可以通过<arrray>[<array-index>]
var gridArr = [];
// this part works fine
for(var i=0; i<domain.length; i++){
dataView = new Slick.Data.DataView();
var grid = new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options);
var data = domain[i].data;
// this works well and I am able to create several slickgrid tables
... etc ...
gridArr.push(grid)
然后,如果您说gridArr[0]
,您可以访问第一个网格,gridArr[1]
第二个网格,依此类推。
答案 2 :(得分:1)
以防万一其他人正在关注这个问题 - 这是工作解决方案:
非常感谢@Jokob和@ user700284
// default filter function
function filter(item) {
return true; // this is just a placeholder for now
}
var dataView;
function buildTables() {
for(i = 0; i<domains.length; i++){
dataView = new Slick.Data.DataView();
var d = domains[i];
grid = new Slick.Grid('#' + d.name, dataView, d.columns, options);
var data = d.data;
grid.init();
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(filter);
dataView.endUpdate();
grid.invalidate();
grid.render();
arrOfGrids.push(grid);
};
};