Slickgrid - 如何修改 id 值

Question

我刚刚开始使用 Slickgrid（带有 asp.net MVC 后端）作为一个简单的开始，我希望将它用作系统设置的键/值对的编辑网格。我的 Add 工作正常，但更新工作正常，除非我们编辑密钥。

因为我们更改了键值，所以它总是看起来像一个新的键/值对，而不是修改现有项目。所以我的问题是，我如何让后端知道我正在修改什么项目？

我想我可以在数据视图中添加一个额外的字段（保存原始 ID），但我有点想知道我是否缺少一些使这更容易的功能。

$(function() {
    var grid;
    var columns = [{
        id: "id",
        name: "Name",
        field: "id",
        editor: Slick.Editors.Text
    }, {
        id: "Value",
        name: "Value",
        field: "Value",
        editor: Slick.Editors.Text
    }, ];

    var options = {
        enableColumnReorder: false,
        editable: true,
        enableAddRow: true,
        enableCellNavigation: true,
        autoEdit: false
    };

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

    grid.setSelectionModel(new Slick.CellSelectionModel());

    grid.onCellChange.subscribe(function(e, args) {
        var row = dataView.getItem(args.row);
        var value = row[grid.getColumns()[args.cell].field];
        var id = row[grid.getColumns()[0].field];

        var data = {
            value: value,
            id: id
        };
        var url = "@Url.Action("Update", "SystemSettings")";

        $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            success: function(a) {
                if (a.status != "ok") {
                    alert(a.msg);
                    undo();
                } else {
                    alert(a.msg);
                }
                return false;
            }
        });
    });

    grid.onAddNewRow.subscribe(function(e, args) {
        var item = {
            "id": dataView.length,
            "value": "New value"
        };
        $.extend(item, args.item);
        dataView.addItem(item);
    });

    dataView.onRowCountChanged.subscribe(function(e, args) {
        grid.updateRowCount();
        grid.render();
    });

    dataView.onRowsChanged.subscribe(function(e, args) {
        grid.invalidateRows(args.rows);
        grid.render();
    });

    $.getJSON('@Url.Action("GetAll", "SystemSettings")', function(data) {
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.endUpdate();
    });
});

我的要求是允许用户能够对数据库表执行所有基本 CRUD 功能的网格。那么我是朝着正确的方向前进还是应该做一些不同的事情。

Answer 1

所以，我想我还没有完全理解数据视图是如何与网格断开连接的。所以我决定将关键字段存储两次，一次作为（不可编辑的）Id 字段，一次作为可编辑的名称字段。

一旦我意识到我可以检测到新旧版本的关键字段：

    $(function () {
        var grid;
        var columns = [
            { id: "name", name: "Name", field: "name", editor: Slick.Editors.Text },
            { id: "value", name: "Value", field: "value", editor: Slick.Editors.Text },
        ];

        var options = {
            enableColumnReorder: false,
            editable: true,
            enableAddRow: true,
            enableCellNavigation: true,
            autoEdit: false
        };

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

        grid.setSelectionModel(new Slick.CellSelectionModel());

        grid.onCellChange.subscribe(function (e, args) {
            var row = dataView.getItem(args.row);
            var id = row["id"];
            var value = row["value"];
            var name = row["name"];

            var data = { value: value, id: id, name: name };
            var url = "@Url.Action("Update", "SystemSettings")";

            $.ajax({
                type: "POST",
                url: url,
                data: data,
                dataType: "json",
                success: function (a) {
                    if (a.status != "ok") {
                        alert(a.msg);
                        undo();
                    } else {
                        alert(a.msg);
                    }
                    return false;
                }
            });
        });

        grid.onAddNewRow.subscribe(function (e, args) {
            var item = { "id": args["name"], "value": "New value" };
            $.extend(item, args.item);
            dataView.addItem(item);
        });

        dataView.onRowCountChanged.subscribe(function (e, args) {
            grid.updateRowCount();
            grid.render();
        });

        dataView.onRowsChanged.subscribe(function (e, args) {
            grid.invalidateRows(args.rows);
            grid.render();
        });

        $.getJSON('@Url.Action("GetAll", "SystemSettings")', function (data) {
            dataView.beginUpdate();
            dataView.setItems(data);
            dataView.endUpdate();
        });
    });