Javascript JQGrid保存并继续表单编辑

我刚开始使用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');
});

$（文档）.ready（函数（）{
"严格使用",；
var mydata=[{
id:“1”，
起始日期：“2007-10-01”，
名称：“S008572”，
总计：“210.00”
}, {
id:“2”，
起始日期：“2007-10-02”，
名称：“O008975”，
总计：“320.00”
}, {
id:“3”，
开始日期：“2007-09-01”，
名称：“S990653”，
总计：“430.00”
}],
$grid=$（“#列表”），
initDateEdit=函数（elem）{
$（元素）.日期选择器({
日期格式：“dd-M-yy”，
自动调整大小：正确，
变化年：是的，
变化月：对，
showButtonPanel：是的，
《秀周刊》：没错
});
},
numberTemplate={
格式化程序：“数字”，
对齐：“右”，
sorttype:'编号'，
编辑规则：{
数字：对，
必填项：true
},
搜索选项：{
sopt:['eq'，'ne'，'lt'，'le'，'gt'，'ge'，'nu'，'nn'，'in'，'ni']
}
};
$grid.jqGrid({
数据类型：“本地”，
数据：mydata，
colname:['Client'，'Date'，'Total']，
colModel：[{
姓名：'姓名'，
索引：“名称”，
对齐：'居中'，
是的，
宽度：65，
编辑规则：{
必填项：true
}
}, {
名称：“开始日期”，
索引：“开始日期”，
宽度：80，
对齐：'居中'，
sorttype:“日期”，
格式化程序：“日期”，
formatoptions:{newformat:'d-M-Y'}，
是的，
datefmt:'d-M-Y'，
编辑选项：{
dataInit:initDateEdit
}
}, {
名称：'总计'，
索引：“总计”，
宽度：60，
模板：numberTemplate
}],
rowNum:10，
行列表：[5,10,20]，
寻呼机：“#寻呼机”，
gridview：没错，
行数：对，
自动编码：正确，
ignoreCase：是的，
sortname:“开始日期”，
viewrecords：是的，
排序器：“desc”，
shrinkToFit：错，
高度：“100%”，
标题：“演示如何在Enter上执行搜索”
});
$.extend（$.jgrid.edit{
b提交：“保存并关闭”，
取消：“取消”，
宽度：370，
再现形式：正确，
beforeShowForm:函数（）{
$('')
。单击（函数（）{
警报（“点击！”）；
var id=$.Guid.New（）；
var newRowData=[{“id”：id，“startdate”：@startdate，“total”：@total}]；
$（“#列表”）.addRowData（id，newRowData）；
$（“#列表”）.trigger（“重载网格”）；
}).addClass（“fm按钮ui状态默认ui角所有fm按钮图标左侧”）
.prependTo（“#Act_Buttons>td.EditButton”）；
}
});
$grid.jqGrid（'navGrid'，'#pager'）；
});

您尝试使用本地数据（

数据类型：“本地”

）。jqGrid当前支持使用或模式编辑本地数据。我建议您使用内联编辑。例如，您可以使用在导航栏中添加替代按钮，该按钮允许使用内联编辑方法添加和编辑行

---

如果表单编辑真的更符合您的要求，那么我可以将其转发给您。答案提供了演示，演示了如何实现表单编辑来编辑本地数据。我警告你，演示的代码并不短，也不简单。尽管如此，它仍然有效。

谢谢Oleg，很抱歉我已经停止工作几周了，表单编辑更适合我的要求。我将尝试并希望实现我的目标。我修改了你的答案，但是我有两个问题需要注意：一个是我设置addsettings closeafterAdd:false和AddClearAfterAdd:true和beforeSubmit:CheckValues进行验证两个选项都没有启动。你知道我做错了什么吗。感谢您对这位新手的耐心。：-）@比诺：你从我的回答中改编了哪一个？你是说？你应该更准确地描述你的工作。您最好打开新的问题，发布当前的“调整”代码，并将其与一些测试数据一起使用，详细描述您遇到的问题。