php - 从 slickgrid 保存数据

Question

谁能告诉我如何识别我在 slickgrid 中添加或编辑/更新的行。我正在尝试使用 Jquery AJAX 将数据保存到数据库。我正在使用 dataview 选项。我只需要保存/更新那些新添加/更新的行。

提前致谢。

Answer 1

您可以轻松地将 onCellChange 事件挂接到网格。

grid.onCellChange = function (row, col, dataRow) {
   //  enter your code here
}

(row,col) 是当前单元格，dataRow 包含该行中的数据。

Answer 2

您需要确保的第一件事是每行都使用来自服务器端的唯一 id 进行初始化（例如，数据库中行的主键值）。

然后你可以使用 grid.onAddNewRow 事件如下

var editedRows = {}
grid.onAddNewRow.subscribe(function(e, args) {
            var item = args.item;
            editedRows[item.id] = item;
        });

当用户单击保存按钮时，您只需将editedRows对象发布到服务器。然后，您的 php 脚本可以遍历提交的行 id 并更新 dvs 中所有更改的行。

注意：我的代码未经测试，但您应该检查http://mleibman.github.com/SlickGrid/examples/example3-editing.html以了解在 slickgrid 中的编辑。

Answer 3

我可以看到它是一个旧帖子，但我有同样的问题，所以想分享我最后是怎么做的

您需要遵循 fbuchinger 的建议，

创建一个数组来保存所有更改，然后将该数组发布回服务器，如下所示

    //#region standard set of options and vars always there

    var grid;
    var data = [];
    var columns = [];
    var editedRows = []; //array to hold all changes 

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

    var checkboxSelector = new Slick.CheckboxSelectColumn({
        cssClass: "slick-cell-checkboxsel"
    });

    columns.push(checkboxSelector.getColumnDefinition()); // check box first
    // define columns
    columns.push(
        { id: "ID", name: "ID", field: "id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, focusable: false },
        { id: "Name", name: "Name", field: "name", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, minWidth: 70, sortable: true, toolTip: "Full Name" },
        { id: "IsActive", name: "Is-Active", field: "IsActive", width: 120, cssClass: "cell-title", editor: Slick.Editors.Checkbox, formatter: Slick.Formatters.Checkmark, validator: requiredFieldValidator });

   //#endregion
    //#region using data part
    $(function () {
        // get data
        $.getJSON('/acActivity/getAcActivityList', function (Resultdata) {
            data = Resultdata;               
            grid = new Slick.Grid("#SlickGrid", data, columns, options);

            grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));

            // add plug ins
            grid.registerPlugin(new Slick.AutoTooltips({ enableForHeaderCells: true }));
            grid.registerPlugin(checkboxSelector);
            var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);


            grid.onAddNewRow.subscribe(function (e, args) {

                var item = args.item;
                //  create an id for new lines and items 
                var id = Math.random * 10000 * -1;
                item.id = id;
                editedRows.push(item);

                grid.invalidateRow(data.length);
                data.push(item);
                grid.updateRowCount();
                grid.render();
            });

            grid.onCellChange.subscribe(function (e, args) {

                // only add after last column in the row
                if (args.cell == args.grid.getColumns() - 1)
                    editedRows.push(args.item);


            });

        }).fail(function () {
            alert('Data retrieval Error');
        });

        //#region send data back t oserver
        $('#Savebtn').click(function () {
            console.log(editedRows);

            var UpdatedRows = JSON.stringify({ 'acActivityed': editedRows });
            console.log(UpdatedRows);

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/acActivity/Edit",
                traditional: true,   //must be tru for arrray to be send 
                data: { 'arrayOfValues': UpdatedRows },
                dataType: "json",
                success: function (data) {
                    // here comes your response after calling the server
                    alert('Suceeded');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("error : " + jqXHR.responseText);
                }
            });
        });
        //#endregion

        //#region deleted all selected
        $('#DeleteSelectedbtn').on('click', function () {
            if (confirm("Are you sure to delete All Selected ?????")) {
                var selectedData = [];
                 var selectedIndexes;

                    selectedIndexes = grid.getSelectedRows();
                    jQuery.each(selectedIndexes, function (index, value) {
                        selectedData.push(grid.getDataItem(value).id);
                    });
                    console.log(selectedData);
                    var SelectedIds = selectedData.join(',') ;
                    console.log(SelectedIds);
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/acActivity/DeleteSelected",
                    data: JSON.stringify({ "ids": SelectedIds }),
                    dataType: "json",
                    success: function (data) {
                        grid.render();
                    },
                    error: function (err) {
                        alert("error : " + err);
                    }
                });
            }
        });
        //#endregion
    });

您需要在页面上有 2 个按钮，

1. 将所有更改保存为批量保存（编辑和添加新的）
2. 删除选定的按钮以删除选定的行