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

Question

我正在使用带有 MVC c# 的 jqgrid 免费版本（最新）。 我已经用我的数据设置了它，一切正常。我在页脚也确实有带有添加、编辑、删除功能的工具栏，单击该工具栏时会显示配置了所有表单元素的模式表单。我遇到的问题是：

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) { }
       });  

Answer 1

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

如果您希望发送附加数据和编辑数据，那么您应该为此使用附加选项/回调。选项/回调取决于您使用的编辑模式。您使用当前的表单编辑。确切地说，您使用navGrid 方法，它添加了带有添加/编辑/删除按钮的导航栏。用户点击按钮后，填写相应的表格并按下提交按钮 jqGrid (navGrid) 执行editGridRow 或delGridRow 方法。通过指定jqGrid的formEditing或formDeleting选项内部的选项，可以使用navGrid或navGrid的选项来控制navGrid在调用editGridRow或delGridRow方法期间使用的选项。例如，您可以将代码修改为

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。从onclickSubmit返回的对象将与jqGrid的其他编辑数据的对象合并。因此，发送更多作为一个附加参数，您只需返回具有更多作为一个属性的对象。

如果您不想将通用 URL editurl 用于所有编辑操作，您可以使用 url 选项定义inside of formEditing 或/和formDeleting。如果需要，您可以使用定义为函数的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: true的情况下重新加载修改后的数据从服务器可以在formEditing、formDeleting中添加reloadGridOptions: { fromServer: true }选项和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将转发到reloadGrid事件，数据将从服务器加载，而不是本地重新加载。