javascript - Slickgrid 更改我的数据中的 ID 并且不清理空行

Question

我正在尝试更新我的网格而不需要刷新!现在，它只更新网格，但不知道为什么，它将 id 更改为最后插入的一个，并且不“清理”空行!当我尝试插入数据时，它会清除它。我对 ajax 和 slickgrid 还很陌生!我尝试查看 slickgrid 中的 ajax 示例，但出现了一些错误!我需要重新上传onCellChange等吗？我只是想用新数据更新网格。有什么帮助吗？

提前致谢

因此，我尝试使用实际的绘图代码重新绘制表格，但未能使用正确的数据重新绘制。

重绘网格函数

function desenhaGrid() {
    $("#myGrid").ready(function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: '/SlickGrid/GetData',
                dataType: 'json',
                success: function (jsonResult) {
                    for (var key in jsonResult) {
                        if (jsonResult.hasOwnProperty(key)) {
                            //print table
                            var d = (data[key] = {});
                            for (var i = 0; i < data.length; i++) {
                                d["#"] = i + 1;
                            }
                            d["id"] = jsonResult[key].id;
                            d["t_nome"] = jsonResult[key].t_nome;
                            d["t_prof"] = jsonResult[key].t_prof;
                            d["t_data"] = jsonResult[key].t_data;
                            d["t_morada"] = jsonResult[key].t_morada;
                            d["t_percCompleto"] = jsonResult[key].t_percCompleto;
                        }
                    }


                    grid = new Slick.Grid("#myGrid", dataView, columns, options);

                   dataView.beginUpdate();
                   grid.invalidateAllRows();
                   dataView.setItems(data);
                   grid.render();
                   dataView.endUpdate();
                                       }
            });

        });
    });
}

这是我的 onAddNewRow

        grid.onAddNewRow.subscribe(function (e, args) {
            var idData = jsonResult[key].id + 1;
            var item = { "id": idData, "t_nome": '', "t_prof": '', "t_data": '', "t_morada": '', "t_percCompleto": '' };
            $.extend(item, args.item);
            dataView.addItem(item);
            //if user press enter
            grid.onKeyDown.subscribe(function (e) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed == 13) {
                    alert("add");
                    var myJSON = JSON.stringify(item);
                    $.post("/SlickGrid/addGridEnter", $("input[name=mydata]").val(myJSON));
                    console.log(myJSON);
                    desenhaGrid();
                }
            });

        });

我希望它能用所有数据重新绘制我的网格。相反，它会将所有 id 更改为最后插入的 id，并且当我尝试在最后一行插入数据时，不会让我这么做(它会在我离开单元格后清除它)。

更新:

我更新了绘制网格的函数

function desenhaGrid() {
    $("#myGrid").load(function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: '/SlickGrid/GetData',
                dataType: 'json',
                success: function (jsonResult) {
                    dataView.beginUpdate();
                    grid.invalidateAllRows();
                    dataView.setItems(jsonResult);
                    dataView.endUpdate();
                    grid.render();
                }
            });

        });
    });
}

Answer 1

我不认为这是 SlickGrid 的问题。 javascript 存在各种各样的问题。例如:

• 你为什么使用 $("#myGrid").ready( ？ ready事件仅在 DOM 完成加载时触发

• 来自 jsonResult 的整个复制操作至data只是最终得到相同的数据。为什么不使用 jsonResult直接？

• 部分for (var i = 0; i < data.length; i++) { d["#"] = i + 1; }为添加到 data 的每一行运行一次，它应该只在循环外部最后运行一次

• 对于添加到网格的每一行，您都会订阅一次 keydown 事件。你应该只订阅一次。监听 Enter 键也是确定是否已输入行的一种非常糟糕的方法。如果有人在按 Enter 键之前单击了另一行怎么办？

Slickgrid 是一个客户端网格。这意味着每次更改后不需要保留数据。使用“保存”按钮或检测事件行是否已更改是一种常见的方法。