JQGrid添加/Update/Delete带有表单模式

我使用MVC C＃的JQGrid的免费版本（最新）。我已经用数据设置了，所有这些都可以正常工作。我也确实在页脚上有工具栏，并带有add，edit，delete，当单击时，它确实显示了所有表单元素的模态表单。我遇到的问题是：

我将如何获得模态弹出的所有形式元素例如，我在我的Col模型中有一个：
```
{ name: 'name', index: 'name', width: 90, sorttype: "text", editrules: { required: true }}
```
当用户单击"添加/编辑行"时，我将名称作为弹出窗口中的字段之一。因此，我如何获得用户更新并将其传递给我的MVC控制器的此字段值。
第二个问题是我可以在哪种方法上获取这些值以添加/编辑/删除？我想抓住这些值并使用ajax调用我的服务器端方法。
最后，在添加/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) { }
       });

我认为有些误解JQGrid中的编辑是如何工作的。JQGrid的editurl参数存在，默认值是Free JQGrid中的"clientArray"。这意味着数据更改将在本地进行，而无需向服务器发布任何数据。如果指定例如editurl: '/Home/Change'，则JQGrid将将数据修改发布到服务器，并且Change操作应添加，编辑或删除数据。

如果您想要，请发送附加数据以及编辑数据，则应为此使用其他选项/回调。选项/回调取决于您使用的编辑模式。您当前使用形式编辑。确切地说，您使用navGrid方法，该方法将Navigator Bar添加到ADD/EDIT/DELETE按钮中。用户单击按钮后，填充相应的表单，然后按提交按钮JQGRID（navGrid）执行editGridRow或delGridRow方法。可以通过指定navGrid ODER的选项来控制navGrid在editGridRow或delGridRow方法中使用的选项，通过指定formEditing或JQGrid的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。从onclickSubmit返回的对象将与对象与JQGrid的其他编辑数据相结合。因此，将更多作为一个附加参数发送您需要的更多参数，只需将对象带有更多作为一个属性。

如果您不想使用常见的URL editurl对所有编辑操作，则可以在 formEditing或/和formDeleting的内部使用url选项定义。如果需要，可以使用定义为功能的url。对于exymple，

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和navOptions中添加reloadGridOptions: { fromServer: true }选项。喜欢

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事件，并且数据将从服务器加载而不是本地重新加载。

相关内容

最新更新

热门标签：