JQGrid 保存并继续表单编辑

Question

我是使用 JQGrid 的新手，我一直在寻找解决问题的方法，但没有成功。在添加记录期间的表单编辑中，我创建了一个名为“保存并继续”的额外按钮。我的意图是，此按钮会将新记录保存到网格中，清除表单上的字段并在不关闭表单的情况下开始插入新记录。我正在尝试使用 addrowdata 并重新加载网格，但没有任何成功。任何帮助都可以，或者如果有更好的方法可以做到这一点，我愿意接受。

$(document).ready(function () {
    'use strict';
    var mydata = [{
        id: "1",
        startdate: "2007-10-01",
        name: "S008572",
        total: "210.00"
    }, {
        id: "2",
        startdate: "2007-10-02",
        name: "O008975",
        total: "320.00"
    }, {
        id: "3",
        startdate: "2007-09-01",
        name: "S990653",
        total: "430.00"

    }],
        $grid = $("#list"),
        initDateEdit = function (elem) {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        numberTemplate = {
            formatter: 'number',
            align: 'right',
            sorttype: 'number',
            editrules: {
                number: true,
                required: true
            },
            searchoptions: {
                sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
            }
        };

    $grid.jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Client', 'Date', 'Total'],
        colModel: [{
            name: 'name',
            index: 'name',
            align: 'center',
            editable: true,
            width: 65,
            editrules: {
                required: true
            }
        }, {
            name: 'startdate',
            index: 'startdate',
            width: 80,
            align: 'center',
            sorttype: 'date',
            formatter: 'date',
            formatoptions: {newformat: 'd-M-Y'},
            editable: true,
            datefmt: 'd-M-Y',
            editoptions: {
                dataInit: initDateEdit
            }
        }, {
            name: 'total',
            index: 'total',
            width: 60,
            template: numberTemplate
        }],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        gridview: true,
        rownumbers: true,
        autoencode: true,
        ignoreCase: true,
        sortname: 'startdate',
        viewrecords: true,
        sortorder: 'desc',
        shrinkToFit: false,
        height: '100%',
        caption: 'Demonstrate how to implement searching on Enter'
    });
    $.extend($.jgrid.edit, {
        bSubmit: "Save and Close",
        bCancel: "Cancel",
        width: 370,
        recreateForm: true,
        beforeShowForm: function () {
            $('<a href="#">Save and Continue<span class="ui-icon ui-icon-disk"></span></a>')
                .click(function () {
                alert("click!");
                    var id = $.Guid.New();
                    var newRowData= [{"id":id,"startdate": @startdate,"total":@total}];
                    $("#list").addRowData(id,newRowData);
                    $("#list").trigger("reloadGrid");
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
                .prependTo("#Act_Buttons>td.EditButton");
        }
    });
    $grid.jqGrid('navGrid', '#pager');
});

Answer 1

您尝试将 form editing 与本地数据 (datatype: "local") 一起使用。 jqGrid 目前支持使用inline editing 或cell editing 模式编辑本地数据。我建议您使用内联编辑。例如，您可以使用inlineNav 在导航栏中添加替代按钮，从而允许使用内联编辑方法添加和编辑行。

如果表单编辑真的能更好地满足您的要求，那么我可以将您转发到the answer，这是对another answer 的修改。答案提供了演示，展示了如何实现表单编辑来编辑本地数据。我警告你，演示的代码不短也不简单。尽管如此，它仍然有效。