Question

我有一个我需要维护的现有项目，但这是我第一次见到jqGrid ......

主要是，我有一个Product，可以有多个Formule。每个Formule可以包含多个Period。 Period和DepartureDate描述Price。

这是管理Period的网格的代码。特别是它添加网格的导航器，添加Period s。

的可能性

在网格中添加新行时，用户填写包含2个fiels的表单：DepartureDate和与新创建的Period相对应的Price。

    jQuery("#periode-grid").jqGrid(
        'setGridParam',
        {
            postData: {
                formuleId: rowid // <<< !!!
            },
            datatype: "json"
        })
        .navGrid("#periode-pager",
            {
                "edit": false, "add": true, "del": false,
                "search": true, "addtext": "@Resources.Main.Grid_Add"
            },
            {},
            {
                "url": '@Url.Action("AddAjaxPeriod",
                    new { elementId = @ViewData["ProductId"] })', // <<< !!!
                "closeOnEscape": true, "closeAfterAdd": true,
                "reloadAfterSubmit": true, "width": 500,
                "beforeSubmit": BeforeFormuleSubmit
            });

这是我的AddAjaxPeriod签名，包含4个参数，包括日期和价格：

[HttpPost]
[AjaxRequestOnly]
[Transaction]
public JsonResult AddAjaxPeriod(Guid elementId, Guid formuleId, 
                                DateTime departureDate, double price)
{ ... }

现在一切正常，直到我打开表格添加价格和日期，填写请求的日期和价格，然后点击验证。

我收到错误消息，指出AddAjaxPeriod请求departureDate非可选参数且未填写...我同意，我通过匿名填写elementId方法formuleId在postData中设置，但departureData和price采用用户尝试添加的形式。有没有办法获取“添加表单”（日期和价格）的值并将它们传递给AddAjaxPeriod方法？

编辑：

在Oleg评论之后，我发现网格初始化（在父部分视图中出现）。这是代码：

jQuery("#periode-grid").jqGrid({
    "url": '@Url.Action("PeriodePagedList", new { elementId = ViewData["ProductId"] })',
    "datatype": 'local',
    "mtype": 'POST',
    "width": 400,
    "height": 100,
    "colNames": [
        "@Resources.Catalog_Products.FormulePeriode_DepartureDate",
        "@Resources.Catalog_Products.FormulePeriode_Price",
        "" // Actions
    ],
    "colModel": [
        { "name": 'DepartureDate', "index": 'DepartureDate', "editable": true, "align": 'center', "width": 100, "sorttype": 'date', "datefmt": 'dd/mm/yyyy', "editoptions": { "dataInit": function (element) { jQuery(element).datepicker({ "dateFormat": 'dd/mm/yy', "minDate": 0, "showAnim": '' }) } }, "editrules": { "required": true, "date": true } },
        { "name": 'Price', "index": 'Price', "editable": true, "align": 'center', "editrules": { "required": true }, "width": 100, "formatter": currencyFormatter, "unformat": unformatCurrency },
        { "name": 'Actions', "index": 'Actions', "width": 50, "align": 'center', "search": false, "sortable": false }
    ],
    "sortname": 'DepartureDate',
    "rowNum": 100,
    "loadComplete": OnLoadPeriodeComplete,
    "pager": jQuery('#periode-pager'),
    "pginput": false,
    "pgbuttons": false,
    "viewrecords": false,
    "imgpath": '@Url.Content("~/Content/jqueryui/images")',
    "caption": "@Resources.Catalog_Products.FormulePeriode_GridTitle",
    "shrinkToFit": true,
    "hidegrid": false
});

Answer 1

我不确定我是否理解你所有的问题。你没有在问题的文本中发布足够的细节，所以我必须猜一点。

首先使用setGridParam方法，如果需要在创建网格后更改多次 jqGrid，的某些参数。另一方面，了解可以创建网格（使用jQuery("#periode-grid").jqGrid({...});）或添加导航器（仅使用jQuery("#periode-grid").jqGrid("navGrid", ...);）一次非常重要。在创建网格期间，初始空<table id="periode-grid">将在相对复杂的div和表结构中转换（例如，在the answer中简要描述）。因此，创建已创建网格的第二次尝试将不执行任何操作。以同样的方式，navGrid的第一次调用将创建导航栏到网格。如果导航栏已经存在，则第二次尝试调用navGrid将无效。

所以我发现非常怀疑组合setGridParam和navGrid的调用，因为一次只能调用一次而另一次只能被调用多次。

如果您需要向服务器发送一些额外的参数（如formuleId），我建议您使用postData属性的函数形式。因此，您可以使用以下选项直接创建jqGrid

jQuery("#periode-grid").jqGrid({ url: "someUrl", postData: { formuleId: function () { var someValue; // evaluate the CURRENT value of parameter which you need to sent // you can use someValue=$("#someControl").val(); for example ... return someValue; } }

在网格填充期间formuleId使用的值将始终是当前值。

在编辑期间，jqGrid将id参数发送到服务器。这是编辑网格行的rowid。因此，您应该将AddAjaxPeriod方法的签名更改为

public JsonResult AddAjaxPeriod(string id, Guid elementId, Guid formuleId, DateTime departureDate, double price)

如果您想重命名id参数，可以使用网格的prmNames选项。例如，如果选项prmNames: { id: "myId" }则可以使用

public JsonResult AddAjaxPeriod(string myId, Guid elementId, Guid formuleId, DateTime departureDate, double price)

了解jqGrid添加方法和Ajax请求

1 个答案: