Cách chuyển dữ liệu biểu mẫu và dữ liệu jqGrid (editUrl) vào Bộ điều khiển tại cùng một thời điểm

Question

Tôi có ứng dụng asp.net MVC3 với các bit dữ liệu biểu mẫu khác nhau và một jqGrid.

Khi tôi chỉnh sửa hàng trong jqGrid tôi cần đăng dữ liệu lưới cũng như một số phần biểu mẫu vào bộ điều khiển editUrl.

Tôi có thể đăng jqGrid dữ liệu đã chỉnh sửa vào bộ điều khiển của mình thông qua editUrl.

Có cách nào để thực hiện việc này không?

Tôi không biết cách gửi các phần tử biểu mẫu khác và cách nhận chúng trong bộ điều khiển của mình.

Mọi trợ giúp sẽ được đánh giá cao.

Dưới đây là jqGrid tôi:

$("#jqTable").jqGrid({ 
     // Ajax related configurations 
     url: '@Url.Action("_CustomBinding")', 
     datatype: "json", 
     mtype: "POST", 
     postData: { 
      programID: function() { return $("#ProgramID option:selected").val(); }, 
      buildID: function() { return $('#Builds option:selected').val(); } 
     }, 

     // Specify the column names 
     colNames: ["Actions", "Assembly ID", "Assembly Name", "Assembly Type", "Cost", "Order", "Budget Report", "Partner Request", "Display"], 

     // Configure the columns 
     colModel: [ 
     { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} }, 
     { name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false }, 
     { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select', 
      editoptions: { 
       dataUrl: '@Url.Action("_Assemblies")', 
       buildSelect: function (data) { 
        var response = jQuery.parseJSON(data); 
        var s = '<select>'; 
        if (response && response.length) { 
         for (var i = 0, l = response.length; i < l; i++) { 
          var ri = response[i]; 
          s += '<option value="' + ri + '">' + ri + '</option>'; 
         } 
        } 
        return s + "</select>"; 
       } 
      } 
     }, 
     { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: false, edittype: 'select' }, 
     { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true }, 
     { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true }, 
     { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' }, 
     { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' }, 
     { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}], 

     // Grid total width and height and formatting 
     //width: 650, 
     //height: 220, 
     altrows: true, 

     // Paging 
     //toppager: true, 
     pager: $("#jqTablePager"), 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     viewrecords: true, // Specify if "total number of records" is displayed 
     emptyrecords: 'No records to display', 

     // Default sorting 
     sortname: "AssemblyID", 
     sortorder: "asc", 

     // Grid caption 
     caption: "Build Template", 

     // grid command functionality 
     editurl: '@Url.Action("_AjaxUpdate")', 
     onSelectRow: function (AssemblyID) { 
      if (AssemblyID && AssemblyID !== lastsel) { 
       $('#jqTable').jqGrid('restoreRow', lastsel); 
       $("#jqTable").jqGrid('editRow', AssemblyID, true); 
       lastsel = AssemblyID; 
      } 
     } 
    }).navGrid("#jqTablePager", 
     { refresh: false, add: false, edit: false, del: false }, 
      {}, // settings for edit 
      {}, // settings for add 
      {}, // settings for delete 
      {sopt: ["cn"]} // Search options. Some options can be set on column level 
    ); 

Answer 1

Tôi thấy bạn sử dụng các thuộc tính đã là programID và buildID được định nghĩa là hàm. Các chức năng sẽ được gọi trong mọi yêu cầu để lấy dữ liệu cho lưới. Trong cùng một cách, bạn có thể sử dụng thông số inlineData hoặc extraparam của số editRow mà bạn gọi một cách rõ ràng bên trong cuộc gọi lại onSelectRow của mình.

Cố gắng gọi the demo trong đó có các tùy chọn jqGrid sau:

inlineData: { 
    myParam: function() { 
     alert("inlineData is calling!!!"); 
     return "OK"; 
    } 
}, 
onSelectRow: function (id) { 
    if (id && id !== lastSel) { 
     $(this).jqGrid('restoreRow', lastSel); 
     $(this).jqGrid('editRow', id, true, null, null, null, { 
      myNextParam: function() { 
       alert("extraparam of 'editRow' is calling!!!"); 
       return "Fine"; 
      } 
     }); 
     lastSel = id; 
    } 
} 

Bạn sẽ thấy hai cảnh báo nếu bạn muốn lưu dữ liệu của hàng chỉnh sửa. Trong bản demo của tôi, tôi đã sử dụng editurl: 'myDummyUrl' không có mã ở phía máy chủ và bạn sẽ thấy lỗi ở cuối, nhưng nếu bạn kiểm tra lưu lượng HTTP (đối với Fiddler hoặc Firebug), bạn sẽ thấy các thông số bổ sung sau sẽ được gửi đến số editurl:

myParam=OK&myNextParam=Fine 

Tôi nghĩ đó là những gì bạn cần.

inlineData:{} 

đang hoạt động tốt để làm việc trước khi chuyển sang bộ điều khiển trong khi chỉnh sửa. Nhưng trong trường hợp xóa làm thế nào để có được sự kiện như trước để vượt qua kiểm soát để điều khiển để làm cho json, sau khi nhấp vào xóa.

Answer 2

Bạn có thể tùy chỉnh những gì đang được gửi đến máy chủ sử dụng onclickSubmit tùy chọn:

.navGrid("#jqTablePager", 
    { refresh: false, add: false, edit: false, del: false }, 
     { // settings for edit 
      onclickSubmit: function(params, postdata) 
      { 
       postdata.extraParam = 'value' 
      } 
     }, 
     {}, // settings for add 
     {}, // settings for delete 
     {sopt: ["cn"]} // Search options. Some options can be set on column level 
); 

Bộ điều khiển sẽ nhận được một đối tượng JSON chứa tất cả các thuộc tính thay đổi nội dung + extraParam . Đó là vào bạn như thế nào bạn xử lý này ở phía máy chủ.