时间戳

首页 > 解决方案 > Slickgrid 从我的数据中更改 ID 并且不清理空行

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

问题描述

我试图更新我的网格而不需要刷新！现在，它只更新网格，但不知道为什么，它将 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 更改为插入的最后一个，当我尝试在最后一行中插入数据时，不会让我（离开单元格后它会清除它）。

更新：

我已经更新了绘制网格的函数

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

        });
    });
}

标签： javascriptasp.netajaxasp.net-mvcslickgrid

解决方案

我认为这不是 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 是一个客户端网格。这意味着不需要在每次更改后都保留数据。这是使用“保存”按钮或检测活动行是否已更改的常用方法。

推荐阅读