Jqgrid Add/update/delete 与形式模态

Question

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

如何获取模式弹出窗口的所有表单元素例如，我的 col 模型中有这个：
```
{ name: 'name', index: 'name', width: 90, sorttype: "text", editrules: { required: true }}
```
当用户单击 add/edit 行时，我在弹出窗口中将名称作为字段之一。那么我如何获取用户更新的这个字段值并将其传递给我的 mvc 控制器。
第二个问题是我可以通过哪种方法获取这些值以用于 add/edit/delete？我想获取这些值并使用 ajax 调用我的服务器端方法。
最后add/edit/delete后如何刷新网格

更新：我正在使用以下代码：

 <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参数，免费jqGrid默认值为"clientArray"。这意味着数据更改将在本地完成，而不会将任何数据发布到服务器。例如，如果您指定 editurl: '/Home/Change'，那么 jqGrid 将 POST 将数据修改到服务器，并且 Change 操作应该添加、编辑或删除数据。

如果您想要发送 附加数据 以及编辑数据，那么您应该为此使用附加 options/callbacks。 options/callbacks 取决于您使用的编辑模式。您当前使用表单编辑。确切地说，您使用 navGrid 方法，该方法添加带有 Add/Edit/Delete 按钮的导航栏。用户点击按钮后，填写相应的表格并按下提交按钮 jqGrid (navGrid) 执行 editGridRow 或 delGridRow 方法。通过在 formEditing 或 formDeleting jqGrid 的选项。例如你可以修改你的代码为

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

如果您不想对所有编辑操作使用通用 URL editurl，您可以使用 url 在中定义的 选项formEditing or/and 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() }; } }

UPDATED：从服务器重新加载修改后的数据 如果使用loadonce: true，可以添加reloadGridOptions: { 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 将被转发到 reloadGrid 事件，数据将从服务器加载而不是本地重新加载。

Jqgrid Add/update/delete 与形式模态

Jqgrid Add/update/delete with form modal

jquery

jqgrid

free-jqgrid