如何在SlickGrid中使用jQuery AJAX创建的数据？
有点坚持这个，只是无法理解如何做到这一点。
如果我对数据使用硬编码数组，它会按预期工作，但如果我发出对端点的调用，数据永远不会绑定到网格，尽管我可以通过fiddler看到json调用。
谢谢你，斯蒂芬
var grid; var data = []; var columns = [ { id: "#", name: "", width: 40, behavior: "selectAndMove", selectable: false, resizable: false, cssClass: "cell-reorder dnd" }, { id: "id", name: "id", field: "id", sortable: true }, { id: "FoodGroupId", name: "FoodGroupId", field: "FoodGroupId", editor: TextCellEditor, sortable: true }, { id: "Description", name: "Description", field: "Description", editor: TextCellEditor, sortable: true }, { id: "FdGrp_Cd", name: "FdGrp_Cd", field: "FdGrp_Cd", editor: TextCellEditor, sortable: true }, { id: "Long_Desc", name: "Long_Desc", field: "Long_Desc", editor: TextCellEditor, sortable: true }, { id: "Shrt_Desc", name: "Shrt_Desc", field: "Shrt_Desc", editor: TextCellEditor, sortable: true }, { id: "ComName", name: "ComName", field: "ComName", editor: TextCellEditor, sortable: true }, { id: "ManufacName", name: "ManufacName", field: "ManufacName", editor: TextCellEditor, sortable: true }, { id: "Survey", name: "Survey", field: "Survey", editor: TextCellEditor, sortable: true }, { id: "Ref_Desc", name: "Ref_Desc", field: "Ref_Desc", editor: TextCellEditor, sortable: true }, { id: "Refuse", name: "Refuse", field: "Refuse", editor: TextCellEditor, sortable: true }, { id: "SciName", name: "SciName", field: "SciName", editor: TextCellEditor, sortable: true }, { id: "N_Factor", name: "N_Factor", field: "N_Factor", editor: TextCellEditor, sortable: true }, { id: "Pro_Factor", name: "Pro_Factor", field: "Pro_Factor", editor: TextCellEditor, sortable: true }, { id: "Fat_Factor", name: "Fat_Factor", field: "Fat_Factor", editor: TextCellEditor, sortable: true } ]; var options = { editable: true, enableAddRow: true, enableRowReordering: true, enableCellNavigation: true, forceFitColumns: true, autoEdit: false }; function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) return { valid: false, msg: "This is a required field" }; else return { valid: true, msg: null }; } $(function () { data = $.getJSON("http://localhost/com.patten.root/RDA/GetDataAJAX"); grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel()); var moveRowsPlugin = new Slick.RowMoveManager(); moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) { for (var i = 0; i < data.rows.length; i++) { // no point in moving before or after itself if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) { e.stopPropagation(); return false; } } return true; }); moveRowsPlugin.onMoveRows.subscribe(function (e, args) { var extractedRows = [], left, right; var rows = args.rows; var insertBefore = args.insertBefore; left = data.slice(0, insertBefore); right = data.slice(insertBefore, data.length); for (var i = 0; i < rows.length; i++) { extractedRows.push(data[rows[i]]); } rows.sort().reverse(); for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row < insertBefore) left.splice(row, 1); else right.splice(row - insertBefore, 1); } data = left.concat(extractedRows.concat(right)); var selectedRows = []; for (var i = 0; i < rows.length; i++) selectedRows.push(left.length + i); grid.resetActiveCell(); grid.setData(data); grid.setSelectedRows(selectedRows); grid.render(); }); grid.registerPlugin(moveRowsPlugin); grid.onDragInit.subscribe(function (e, dd) { // prevent the grid from cancelling drag'n'drop by default e.stopImmediatePropagation(); }); grid.onDragStart.subscribe(function (e, dd) { var cell = grid.getCellFromEvent(e); if (!cell) return; dd.row = cell.row; if (!data[dd.row]) return; if (Slick.GlobalEditorLock.isActive()) return; e.stopImmediatePropagation(); dd.mode = "recycle"; var selectedRows = grid.getSelectedRows(); if (!selectedRows.length || $.inArray(dd.row, selectedRows) == -1) { selectedRows = [dd.row]; grid.setSelectedRows(selectedRows); } dd.rows = selectedRows; dd.count = selectedRows.length; var proxy = $("") .css({ position: "absolute", display: "inline-block", padding: "4px 10px", background: "#e0e0e0", border: "1px solid gray", "z-index": 99999, "-moz-border-radius": "8px", "-moz-box-shadow": "2px 2px 6px silver" }) .text("Drag to Recycle Bin to delete " + dd.count + " selected row(s)") .appendTo("body"); dd.helper = proxy; $(dd.available).css("background", "pink"); return proxy; }); grid.onDrag.subscribe(function (e, dd) { if (dd.mode != "recycle") { return; } e.stopImmediatePropagation(); dd.helper.css({ top: e.pageY + 5, left: e.pageX + 5 }); }); grid.onDragEnd.subscribe(function (e, dd) { if (dd.mode != "recycle") { return; } e.stopImmediatePropagation(); dd.helper.remove(); $(dd.available).css("background", "beige"); }); $("#dropzone") .bind("dropstart", function (e, dd) { $(this).css("background", "yellow"); }) .bind("dropend", function (e, dd) { $(dd.available).css("background", "pink"); }) .bind("drop", function (e, dd) { var rowsToDelete = dd.rows.sort().reverse(); for (var i = 0; i < rowsToDelete.length; i++) { data.splice(rowsToDelete[i], 1); } grid.invalidate(); grid.setSelectedRows([]); }); grid.onAddNewRow.subscribe(function (e, args) { var item = { name: "New task", complete: false }; $.extend(item, args.item); data.push(item); grid.invalidateRows([data.length - 1]); grid.updateRowCount(); grid.render(); }); }) 这不是$.getJSON()工作方式。 该调用是异步的。 这意味着请求被触发，代码执行立即继续到下一行。 所以，当你到达这一行：
grid = new Slick.Grid("#myGrid", data, columns, options);
未设置data变量的值。
要解决$.getJSON()在响应返回后提供回调函数。 所以你应该在那里初始化网格。 像这样的东西：
$.getJSON("http://localhost/com.patten.root/RDA/GetDataAJAX", function(data) { // data contains the response from the ajax call at this point grid = new Slick.Grid("#myGrid", data, columns, options); });
有关详情，请参阅此处 。