如何在一个页面上管理多个光滑网格的事件？

Question

我遇到了在一个页面上使用多个Slickgrids的问题。由于网格的数量是动态变化的，我在JavaScript函数中创建它们，并使用网格数组将它们保持如下。

var columns = [];
var options = [];
for(var i=0; i<value; i++){
options[i] = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: true,
autoEdit: false,
forceFitColumns: false,
//fullWidthRows: true,
syncColumnCellResize: true,
rerenderOnResize: true,
topPanelHeight: 30,
rowHeight: 22,
cellHighlightCssClass: "changed",
cellFlashingCssClass: "current-server"};
}
for(var i=0; i<value; i++) {
columns[i].push({id: value, name: value, field: value});
columns[i].push({id: value2, name: value2, field: value2});
columns[i].push({id: value3, name: value3, field: value3});
}
var arrayOfGrids = [];
for(var i=0; i<value; i++) {
dataView = new Slick.Data.DataView();
arrayOfGrids.push(new Slick.Grid('#' + i, dataView, columns[i], options[i]));
// ....

但我的问题是如何管理这些网格的事件，因为就我而言，这些事件应该单独实现。即使我的所有网格都必须具有相同的事件，我也不知道如何确定触发了哪个网格的事件。

请帮帮我！

Answer 1

您熟悉Javascript中闭包的概念吗？如果没有，你应该用谷歌搜索。

以下是我认为他们可以解决您的问题的方法：

1) 创建一个自己的函数来创建/初始化你的网格

2) 在for循环中调用此函数

3) 订阅initGrid函数中的事件。通过这种方式，您将始终拥有对正确网格的引用。(看看下面代码中initGrid函数中的注释)

function initGrid(index)
{
var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid('#' + index, dataView, columns[index], options[index]);
arrayOfGrids.push(grid);
grid.onClick.subscribe(function (e) {
//grid variable will always be the clicked gird
//index variable will always be the correct one for this grid
//columns[index] will always be the columns for the clicked grid
//...
});
}
for(var i=0; i<value; i++) {
initGrid(i);
// ....
}