jquery - 如何在 SlickGrid 中使用 jQuery AJAX 创建的数据？

Question

有点卡在这上面，只是不知道如何去做。

如果我对数据使用硬编码数组，它会按预期工作，但如果我向端点发出调用，数据永远不会绑定(bind)到网格，尽管我可以看到通过 fiddler 进行的 json 调用。

谢谢你，斯蒂芬

<script type="text/javascript">
    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 = $("<span></span>")
                    .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();
        });
    })
</script>

Answer 1

这不是 $.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);
});

有关更多信息，请参阅 here .