如何通过外部按钮一次将jqgrid数据全部添加到数据库中

Question

我该如何在jqgrid中添加值并将其稍后通过在jqgrid之外的页面中创建的外部按钮保存在数据库中？

我有以下jqgrid：

<script type="text/javascript">
    ...

    jQuery(#grid-table).jqGrid({
        url: '@Url.Action("GetStore", "Store")',
        datatype: 'json',
        mtype: 'Get',
        height: '430',
        colNames: [ 'Code', 'Name' ],
        colModel: [
            { key: true, name: 'Id', index: 'Id', sorttype: "int" },
            { key: false, name: 'Name', index: 'Name', editable: true }
        ],
        viewrecords: true,
        loadonce: true,
        rowNum: 10,
        rowList: [5, 10, 15],
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
            Id: "0"
        },
        pager: jQuery(#grid-pager),
        altRows: true,
        multiselect: true,
        multiboxonly: true,
        caption: "Stores",
    });

    jQuery(grid_selector).jqGrid('navGrid', #grid-pager,
        {   //navbar options
            edit: false,
            add: true,
            del: false,
            search: false,
            refresh: false,
            view: false,
        },
        {
            recreateForm: true,
            url: '@Url.Action("Edit","Store")',
        },
        {
            recreateForm: true,
            url: '@Url.Action("Create","Store")',
        },
        {
            recreateForm: true,
            url: '@Url.Action("Delete", "Store")',
        },
        {
            recreateForm: true,
            multipleSearch: true
        },
        {
            recreateForm: true,
        }
    )
</script>

....

<button type="submit" class="btn btn-info" id="subitbutton"> 
    Create 
</button>

以及我模型中的以下代码：

[Key]
public int Id { get; set; }

public string Name { get; set; }

以及以下代码在我的控制器中：

public JsonResult GetStores(string sidx, string sord, int page, int rows, int idStore) 
{
    int pageIndex = page - 1;
    int pageSize = rows;
    var storesResults = db.Stores.Select(
            a => new { a.Id, a.Name });

    int totalRecords = storesResults.Count();
    var totalPages = (int) Math.Ceiling((float) totalRecords / (float) rows);
    if (sord.ToUpper() == "ASC")
    {
        storesResults = storesResults.OrderBy(s => s.Name);
        storesResults = storesResults.Skip(pageIndex * pageSize).Take(pageSize);
    }
    else
    {
        storesResults = storesResults.OrderByDescending(s => s.Name);
        storesResults = storesResults.Skip(pageIndex * pageSize).Take(pageSize);
    }
    var jsonData = new
    {
        total = totalPages, page, records = totalRecords, rows = storesResults
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public ActionResult Create(Stores store)
{
    db.Store.Add(store);
    return view(store);
}

public ActionResult Edit(Store store)
{
    if (ModelState.isValid)
    {
        db.Entry(store).State = EntityState.Modified;
        db.SaveChanges();
    }
    return View(store);
}

public void Delete(string id)
{
    var ids = id.Split(',');
    foreach (var idStore in ids)
    {
        int storeId = Convert.ToInt32(idStore);
        Store storeToDelete = db.Stores.Find(storeId);
        db.Stores.Remove(storeToDelete);
    }
    db.SaveChanges();
}

现在，我的jqgrid将每个新行发送到服务器，并且我的方法将其保存在数据库中。 我需要的是将所有行存储在视图中，然后一次将所有行一次发送到服务器-也许使用外部按钮？

提前致谢。

UPDATE

根据Oleg的要求，这是我的jqGrid演示：

<script type="text/javascript">
    jQuery(function ($) {
        var grid_selector = "#grid-table-dados-adicionais";
        var pager_selector = "#grid-pager-dados-adicionais";

        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        //resize on sidebar collapse/expand
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        })

        jQuery(grid_selector).jqGrid({
            //direction: "rtl",

            url: '@Url.Action("GetDadosAdicionais", "LojaDadosAdicionais", new { idLoja = @Model.Id })',
            datatype: 'json',
            mtype: 'Get',
            height: '430',
            colNames: [' ',
                       'Id',
                       'Name'
            ],
            colModel: [
                {
                    name: 'myac', index: '', width: 65, fixed: true, sortable: false, resize: false,
                    formatter: 'actions',
                    formatoptions: {
                        keys: true,
                        delOptions: {
                            recreateForm: true,
                            reloadAfterSubmit: false,
                            beforeShowForm: beforeDeleteCallback
                        },
                        editformbutton: true,
                        editOptions:
                        {
                            recreateForm: true,
                            reloadAfterSubmit: false,
                            closeAfterEdit: true,
                            beforeShowForm: beforeEditCallback,
                            closeOnEscape: true
                        }
                    }
                },
                { key: true, hidden: true, name: 'Id', index: 'Id', sorttype: "int", editable: false },
                { key: false, hidden: true, name: 'Name', index: 'Name', sorttype: "int", editable: true },
            ],

            viewrecords: true,
            loadonce: true,
            editurl: "clientArray",
            rowNum: 10,
            rowList: [5, 10, 15],
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
            pager: jQuery(pager_selector),
            altRows: true,
            //toppager: true,
            autowidth: true,
            multiselect: true,
            sortorder: "desc",
            scrollOffset: 0,
            height: "auto",
            //multikey: "ctrlKey",
            multiboxonly: true,
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },
            caption: "Registration",
        });
        $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

        //switch element when editing inline
        function aceSwitch(cellvalue, options, cell) {
            setTimeout(function () {
                $(cell).find('input[type=checkbox]')
                    .addClass('ace ace-switch ace-switch-5')
                    .after('<span class="lbl"></span>');
            }, 0);
        }

        //navButtons
        jQuery(grid_selector).jqGrid('navGrid', pager_selector,
            {   //navbar options
                edit: true,
                editicon: 'ace-icon fa fa-pencil blue',
                add: true,
                addicon: 'ace-icon fa fa-plus-circle purple',
                del: true,
                delicon: 'ace-icon fa fa-trash-o red',
                search: true,
                searchicon: 'ace-icon fa fa-search orange',
                refresh: true,
                refreshicon: 'ace-icon fa fa-refresh green',
                view: true,
                viewicon: 'ace-icon fa fa-search-plus grey',
            },
            {
                closeOnEscape: true,
                closeAfterEdit: true,
                recreateForm: true,
                reloadAfterSubmit: false,
                width: 500,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }
            },
            {
                closeOnEscape: true,
                closeAfterAdd: true,
                recreateForm: true,
                reloadAfterSubmit: false,
                width: 500,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                    .wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }
            },
            {
                closeOnEscape: true,
                closeAfterDelete: true,
                recreateForm: true,
                reloadAfterSubmit: false,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    if (form.data('styled')) return false;
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);
                    form.data('styled', true);
                }
            },
            {
                //search form
                recreateForm: true,
                reloadAfterSubmit: false,
                afterShowSearch: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function () {
                    style_search_filters($(this));
                },
                closeOnEscape: true,
                closeAfterSearch: true,
                multipleSearch: true
            },
            {
                //view record form
                recreateForm: true,
                reloadAfterSubmit: false,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            }
        )

        $.extend($.jgrid.edit, {
            beforeSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: "json" });
                return [true, "", ""];
            }
        });


        $.extend($.jgrid.add, {
            beforeSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: "json" });
                return [true, "", ""];
            }
        });

        $('#filterButton').click(function (event) {
            event.preventDefault();

            filterGrid();
        });

        $('#TargetDate').datepicker({
            dateFormat: 'mm/dd/yy'
        });

        function filterGrid() {
            var postDataValues = $("#grid").jqGrid('getGridParam', 'postData');

            // grab all the filter ids and values and add to the post object
            $('.filterItem').each(function (index, item) {
                postDataValues[$(item).attr('id')] = $(item).val();
            });

            $('#grid').jqGrid().setGridParam({ postData: postDataValues, page: 1 }).trigger('reloadGrid');
        }

        function style_edit_form(form) {
            //enable datepicker on "sdate" field and switches for "stock" field
            form.find('input[name=sdate]').datepicker({ format: 'yyyy-mm-dd', autoclose: true })

            form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');

            //update buttons classes
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
            buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
            buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

            buttons = form.next().find('.navButton a');
            buttons.find('.ui-icon').hide();
            buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
            buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
        }

        function style_delete_form(form) {
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
            buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
            buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
        }

        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }
        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }

        function beforeDeleteCallback(e) {
            var form = $(e[0]);
            if (form.data('styled')) return false;

            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_delete_form(form);

            form.data('styled', true);
        }

        function beforeEditCallback(e) {
            var form = $(e[0]);
            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_edit_form(form);
        }

        //replace icons with FontAwesome icons like above
        function updatePagerIcons(table) {
            var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
        }

        function updateActionIcons(table) {
            var replacement =
            {
                'ui-ace-icon fa fa-pencil': 'ace-icon fa fa-pencil blue',
                'ui-ace-icon fa fa-trash-o': 'ace-icon fa fa-trash-o red',
                'ui-icon-disk': 'ace-icon fa fa-check green',
                'ui-icon-cancel': 'ace-icon fa fa-times red'
            };
            $(table).find('.ui-pg-div span.ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({ container: 'body' });
            $(table).find('.ui-pg-div').tooltip({ container: 'body' });
        }

        //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

        $(document).one('ajaxloadstart.page', function (e) {
            $(grid_selector).jqGrid('GridUnload');
            $('.ui-jqdialog').remove();
        });

    });
</script>

....

<button type="submit" class="btn btn-info" id="submitbutton"> 
    Create 
</button>

Answer 1

如果我对您的理解正确，那么可以使用editurl: "clientArray"进行本地编辑。 您使用表单编辑。 因此，您应该使用jqGrid 4.7或更好的免费jqGrid 4.8 （或github的最新版本）。

$("#subitbutton").click(function () {
    var localGridData = $("#grid-table").jqGrid("getGridParam", "data");
    $.ajax({
        url: "someServerMethod",
        type: "POST",
        data: JSON.stringify(localGridData),
        dataType: "json"
    })
});

取决于服务器端的实现， data参数值的格式可以不同。 您可能可以使用data: { gridData: localGridData }或jQuery.ajax的其他选项。