Question

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

如何获取弹出模态的所有表单元素例如，我在我的col模型中有这个：

 <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>

当用户点击添加/编辑行时，我将该名称作为弹出窗口中的一个字段。那么如何获取用户更新的字段值并将其传递给我的mvc控制器。

第二个问题是我可以在哪个方法中获取这些值以进行添加/编辑/删除？我想获取这些值并使用ajax来调用我的服务器端方法。
最后，如何在添加/编辑/删除后刷新网格。

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

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

上面我可以使用ajax将我的mvc控制器称为：

var app = angular.module('groceryListApp', ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "../views/groceryList.html",
      controller: "GroceryListItemsController"
    })
});

app.controller("HomeController", ["$scope", function($scope) {
  $scope.appTitle = "Grocery List";
}]);

app.controller("GroceryListItemsController", ["$scope", function($scope) {
  $scope.groceryItems = [{
      completed: true,
      itemName: 'milk',
      date: '2017-10-01'
    },
    {
      completed: true,
      itemName: 'cookies',
      date: '2017-10-02'
    },
    {
      completed: true,
      itemName: 'ice cream',
      date: '2017-10-03'
    },
    {
      completed: true,
      itemName: 'potatoes',
      date: '2017-10-04'
    },
    {
      completed: true,
      itemName: 'cereal',
      date: '2017-10-05'
    },
    {
      completed: true,
      itemName: 'bread',
      date: '2017-10-06'
    },
    {
      completed: true,
      itemName: 'eggs',
      date: '2017-10-07'
    },
    {
      completed: true,
      itemName: 'tortillas',
      date: '2017-10-08'
    }
  ]
}]);

Answer 1

我认为有一些误解是如何在jqGrid中进行编辑工作。 jqGrid中存在# adding missing entities to mysql database connection = create_engine('mysql+pymysql://user:pwd@server:3306/db').connect() for j in range(1, counter + 1): if missing_matrix[j] != 0: query1 = ("ALTER TABLE price_usd ADD IF NOT EXISTS %s DOUBLE ") %(missing_matrix[j]) connection.execute(query1) Connection.close参数，其在自由jqGrid中的默认值为editurl。这意味着数据的更改将在本地完成，而不会将任何数据发布到服务器。如果您指定例如"clientArray"，那么jqGrid会将数据修改POST到服务器，editurl: '/Home/Change'操作应该添加，编辑或删除数据。

如果您希望将附加数据与编辑数据一起发送，那么您应该使用其他选项/回调。选项/回调取决于您使用的编辑模式。您使用当前的表单编辑。确切地说，您使用Change方法，该方法添加了带有添加/编辑/删除按钮的导航栏。用户单击按钮后，填写相应的表单并按提交按钮jqGrid（navGrid）执行navGrid或editGridRow方法。通过指定delGridRow或{中的选项，可以使用navGrid或editGridRow方法调用delGridRow或navGrid方法来控制formEditing使用的选项{1}} 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返回的对象将与该对象与jqGrid的其他编辑数据组合。因此，您需要将更多作为一个附加参数发送，只需返回具有更多属性的对象。

如果您不想对所有编辑操作使用通用网址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() }; } }，则要从服务器重新加载修改后的数据，可以在{{1}中添加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 } }事件，数据将从服务器加载而不是本地重新加载。

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

1 个答案: