Question

我是使用JQGrid的新手，并且没有成功地搜索我的问题的解决方案。在添加记录期间的表单编辑中，我创建了一个名为Save and Continue的额外按钮。我的意图是这个按钮会将新记录保存到网格中，清除表单上的字段，然后在不关闭表单的情况下开始插入新表单。我正在尝试使用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的修改。答案提供演示，演示如何实现表单编辑以编辑本地数据。我警告你，演示的代码并不简短，并不简单。不过它有效。

JQGrid保存并继续表单编辑

1 个答案: