理解jqGrid的添加方法和Ajax請求

Question

我有一個現有的項目，我需要維護，但是這是我第一次滿足的jqGrid ...

主要是，我有一個Product，即可以有多個Formule小號。每個Formule可以包含多個Period。 A Period由DepartureDate和Price來描述。

這是管理期間網格的代碼。特別是它增加了網格的導航器的可能性添加Period s。

當在網格中添加新行時，用戶填充包含2個字段的表單：DepartureDate和與新創建的期間相對應的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方法？

編輯：

的奧列格發言後，我發現網格初始化（在occurence在母體部分視圖）。這是代碼：

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的屬性的函數形式。所以，你可以直接與下面的選項

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。

期間編輯 jqGrid發送id參數給服務器。這是編輯網格行的rowid。所以，你應該如果你喜歡重命名id參數，您可以使用網格的prmNames選項AddAjaxPeriod方法的signatire改變

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

。例如，如果選項prmNames: { id: "myId" }那麼你可以使用

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