Slickgrid 从我的数据中更改了 ID,并且不清理空行

Slickgrid changes the ID from my data and dont clean up the empty row

我正在尝试更新我的网格而不需要刷新!现在,它只更新网格,但不知道为什么,它将 id 更改为最后插入的一个,而不是 "clean up" 空行!当我尝试插入数据时,它会清除它。 我对 ajax 和 slickgrid 有点陌生!我试图查看来自 slickgrid 的 ajax 示例,但我遇到了一些错误! 我需要重新上传 onCellChange 等等吗?我只是想用新数据更新网格。 有帮助吗?

提前致谢

所以,我尝试使用我的实际绘图代码重新绘制 table,但我无法使用正确的数据重新绘制。

重新绘制网格的函数

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();
                }
            });

        });
    });
}

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

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

  • jsonResultdata 的整个复制操作只是以相同的数据结束。为什么不直接使用jsonResult

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

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

Slickgrid 是一个 client-side 网格。这意味着不需要在每次更改后都保留数据。这是使用 'save' 按钮或检测活动行是否已更改的常见方法。