동일한 페이지의 여러 Slickgrid

Question

서버 쪽에서 반환 된 데이터를 기반으로 페이지에 동적으로 여러 개의 격자를 만듭니다. 생성 된 모든 그리드를 arrayOfGrids로 푸시합니다. 그러나 새 행의 새 셀에 데이터를 추가해야 할 때 문제가 발생합니다. 마지막 그리드에 추가됩니다. 어떻게해야합니까? 내 코드는 아래와 같습니다. -

var index = 0; 
for (var k = 0; k < steps.length; k++) { 
var gridId = "#dataGrid_" + index++; 
var grid; 
var columns = new Array(); 
for (var jj = 0; jj < rows[0].cells.length; jj++) { 
    var key = { 
     id : rows[0].cells[jj], 
     name : rows[0].cells[jj], 
     field : rows[0].cells[jj], 
     //toolTip : 'Click to sort', 
     //width : 200, 
     sortable : true, 
     editor : Slick.Editors.LongText 
    }; 
    columns[jj] = key; 
} 
var data = []; 
for (var i = 1; i < rows.length; i++) { 
    var tempData = (data[i - 1] = {}); 
    var title = null; 
    var val = null; 
    for (var q = 0; q < rows[i].cells.length; q++) { 
     title = rows[0].cells[q]; 
     val = rows[i].cells[q]; 
     tempData[title] = val; 
    } 
} 

var options = { 
    enableCellNavigation : true, 
    editable: true, 
    asyncEditorLoading: false, 
    enableColumnReorder: true, 
    enableAddRow: true, 
    autoHeight: true, 
    leaveSpaceForNewRows:false, 
    explicitInitialization: true 
}; 
var myGrid = $("<div id='"+gridId+"' style='width:400px;'></div>"); 
grid = new Slick.Grid(myGrid, data, columns, options); 
myGrid.appendTo($("#tableData")); 
grid.init(); 
grid.onAddNewRow.subscribe(function(e,args){ 
    // Always adds to last grid ? 

}); 
arrayOfGrids.push(grid); 
} 

Answer 1

확인. javascript 클로저를 기반으로 작동하도록했습니다. 최상은 별도의 함수에 그리드 생성 코드를 추출하고 for 루프에서 함수를 호출하는 것입니다. 그 이후로 모든 것이 매력적입니다.

function createGrid(gridId, rows) { 
var grid; 
var colIndex = 0; 
var columns = new Array(); 
for (var jj = 0; jj < rows[0].cells.length; jj++) { 
    var key = { 
     id : rows[0].cells[jj], 
     name : rows[0].cells[jj], 
     field : rows[0].cells[jj], 
     //toolTip : 'Click to sort', 
     //width : 200, 
     sortable : true, 
     editor : Slick.Editors.LongText 
    }; 
    columns[jj] = key; 
} 
var data = []; 
for (var i = 1; i < rows.length; i++) { 
    var tempData = (data[i - 1] = {}); 
    var title = null; 
    var val = null; 
    for (var q = 0; q < rows[i].cells.length; q++) { 
     title = rows[0].cells[q]; 
     val = rows[i].cells[q]; 
     tempData[title] = val; 
    } 
} 

var options = { 
    enableCellNavigation : true, 
    editable: true, 
    asyncEditorLoading: false, 
    enableColumnReorder: true, 
    enableAddRow: true, 
    autoHeight: true, 
    leaveSpaceForNewRows:false, 
    explicitInitialization: true 
}; 
var myGrid = $("<div id='"+gridId+"' style='width:400px;'></div>"); 
grid = new Slick.Grid(myGrid, data, columns, options); 
myGrid.appendTo($("#tableData")); 
grid.init(); 
arrayOfGrids.push(grid); 

grid.onAddNewRow.subscribe(function (e, args) { 

var item = args.item; 
    grid.invalidateRow(data.length); 
    data.push(item); 
    grid.updateRowCount(); 
    grid.render(); 
}); 

}

및 루프로부터 그 함수를 호출한다.