Jqgrid使用表单模式添加/更新/删除

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jqgrid使用表单模式添加/更新/删除相关的知识,希望对你有一定的参考价值。

我正在使用免费版本(最新)的jqgrid和MVC c#。我已经用我的数据进行了设置,一切正常。我也在页脚上有工具栏,添加,编辑,删除,点击时确实显示了配置了所有表单元素的模态表单。我遇到的问题是:

  1. 如何获取我的模态的所有表单元素弹出例如我在我的col模型中有这个: { name: 'name', index: 'name', width: 90, sorttype: "text", editrules: { required: true }} 当用户点击添加/编辑行时,我将该名称作为弹出窗口中的一个字段。那么如何获取用户更新的字段值并将其传递给我的mvc控制器。
  2. 第二个问题是我可以在哪个方法中获取这些值以进行添加/编辑/删除?我想获取这些值并使用ajax来调用我的服务器端方法。
  3. 最后,如何在添加/编辑/删除后刷新网格。

更新:我使用下面的代码:

 <script type="text/javascript">
    $(function () {
        "use strict";
        var $grid = $("#list");             
        $grid.jqGrid({
            url: '@Url.Action("GetData", "Home")',
            datatype: "json",
            mtype: 'Get',
            colNames: ['Id', 'Name', 'Sex', 'Address'],
            loadonce: true,
            height: '100%',
            autowidth: true,
   colModel: [
                { name: 'uid', index: 'uid', editable: true,  editrules: { required: true}},
                { name: 'name', index: 'name', editable: true,  editrules: { required: true}},
                { name: 'sex', index: 'sex', editable: true,  editrules: { required: true}},
                { name: 'address', index: 'address', editable: true,  editrules: { required: true}}
     ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true, resetWidthOrg: true },                
            iconSet: "fontAwesome",
            rowNum: 10,
            rowList: [5, 10, 20, "10000:All"],
            viewrecords: true,
            autoencode: true,
            sortable: true,              
            pager: true,
            rownumbers: true,
            sortname: "uid",
            sortorder: "desc",
            pagerRightWidth: 150,
            afterAddRow: function () {

            },
            afterSetRow: function () {

            },
            afterDelRow: function () {

            },
            inlineEditing: {
                keys: true
            },
            formEditing: {
                width: 310,
                closeOnEscape: true,
                closeAfterEdit: true,
                savekey: [true, 13]
            },
            searching: {                    
                loadFilterDefaults: false,
                closeOnEscape: true,
                searchOperators: true,
                searchOnEnter: true
            },

            caption: "MyData"
        }).jqGrid("navGrid")
        .editGridRow("new", properties);              
    });
   </script>

上面我可以使用ajax来调用我的mvc控制器:

    $.ajax({
       url: '/Home/AddNew',
       type: 'POST',
       async: false,
       dataType: 'json',
       processData: false,
       data: {
                //I try to use below code to get value but it returned null
                uid: $('input#uid').val()
             },
        success: function (data) { }
       });  
答案

我认为有一些误解,如何在jqGrid中进行编辑工作。 jqGrid中存在editurl参数,默认值为free jqGrid中的"clientArray"。这意味着数据的更改将在本地完成,而不会将任何数据发布到服务器。如果您指定例如editurl: '/Home/Change',则jqGrid将POST数据修改发送到服务器,Change操作应该添加,编辑或删除数据。

如果您希望将其他数据与编辑数据一起发送,那么您应该使用其他选项/回调。选项/回调取决于您使用的编辑模式。您使用当前的表单编辑。确切地说,你使用navGrid方法,它添加导航栏和添加/编辑/删除按钮。用户点击按钮后,填写相应的表格并按提交按钮jqGrid(navGrid)执行editGridRowdelGridRow方法。通过指定navGrid或qqxswpoi jqGrid选项中的选项,可以使用editGridRow oder选项调用delGridRownavGrid方法调用formEditing时使用的选项。例如,您可以将代码修改为

formDeleting

上面的代码将默认的编辑参数发送到服务器和附加参数cmTemplate: { autoResizable: true, editable: true }, editurl: "/Home/Change", formEditing: { width: 310, closeOnEscape: true, closeAfterEdit: true, savekey: [true, 13], onclickSubmit: function (options, postData, editOrAdd) { return { myparam: $("#someInput").val() }; } }, formDeleting: { onclickSubmit: function (options, postData, formRowIds) { return { myDelParam: $("#someInput").val() }; } } myparam。从myDelParam返回的对象将与该对象与jqGrid的其他编辑数据组合。因此,您需要将更多作为一个附加参数发送,只需返回具有更多属性的对象。

如果您不想在所有编辑操作中使用常用URL onclickSubmit,可以使用editurl或/和url中定义的formEditing选项。如果需要,可以使用formDeleting定义为函数。对于exymple,

url

更新:如果使用cmTemplate: { autoResizable: true, editable: true }, formEditing: { url: function (rowid, editOrAdd, postData, options) { // editOrAdd is "add" or "edit" return editOrAdd === "add" ? "/Home/Add" : "/Home/Edit"; }, width: 310, closeOnEscape: true, closeAfterEdit: true, savekey: [true, 13], onclickSubmit: function (options, postData, editOrAdd) { if (editOrAdd === "add") { return { myAddParam: $("#someInput").val() }; } else { return { myEditParam: $("#someInput").val() }; } } }, formDeleting: { url: "/Home/Delete", onclickSubmit: function (options, postData, formRowIds) { return { myDelParam: $("#someInput").val() }; } } 从服务器重新加载修改后的数据,可以在loadonce: truereloadGridOptions: { fromServer: true }formEditing中添加formDeleting选项。喜欢

navOptions

选项cmTemplate: { autoResizable: true, editable: true }, formEditing: { url: function (rowid, editOrAdd, postData, options) { // editOrAdd is "add" or "edit" return editOrAdd === "add" ? "/Home/Add" : "/Home/Edit"; }, width: 310, closeOnEscape: true, closeAfterEdit: true, savekey: [true, 13], reloadGridOptions: { fromServer: true }, onclickSubmit: function (options, postData, editOrAdd) { if (editOrAdd === "add") { return { myAddParam: $("#someInput").val() }; } else { return { myEditParam: $("#someInput").val() }; } } }, formDeleting: { url: "/Home/Delete", reloadGridOptions: { fromServer: true }, onclickSubmit: function (options, postData, formRowIds) { return { myDelParam: $("#someInput").val() }; } }, navOptions: { reloadGridOptions: { fromServer: true } } 将被转发到fromServer: true事件,数据将从服务器加载而不是本地重新加载。

以上是关于Jqgrid使用表单模式添加/更新/删除的主要内容,如果未能解决你的问题,请参考以下文章

如何在 jqgrid 编辑/添加/删除选项上打开部分视图作为弹出窗口

关闭使用afterSubmit函数添加/编辑jqgrid的表单

怎样获取编辑后的jqgrid的值

ASP.net MVC 代码片段问题中的 Jqgrid 实现

将表单(添加)对话框设置为无模式

jqgrid在点击任意位置后保持表单打开