jqGrid的形式編輯：添加字段來我一直在使用的jqGrid因爲幾個月的形式

Question

，我很樂意這樣做:)

我使用的jqGrid成功在ASP.NET網頁應用程序，一切工作正常。我決定使用jqGrid表單編輯，因爲實體有很多我需要處理的屬性。 我知道如果colModel包含5列，它們會出現在模式對話框窗體上（編輯操作），如果屬性可編輯：true。此外，我可以設置4個屬性是可見的，最後一個隱藏（即使它可以出現在窗體上，通過設置edithidden：true）。

有沒有一種方法可以在colModel中設置4個屬性，但彈出模態窗體中有一個，兩個或多個字段？

編輯：

請看看這段代碼：

ajaxSelectOptions: { type: "POST", contentType: "application/json; charset=utf-8", }, 
colNames: [ 
     'ID', 'Code', 'Number', 'Floor (nr.)', 'Descr', 'Type', 
     'Create by', 'Creation date', 
     'Status', 'Features'], 
colModel: [ 
     { name: 'ID', index: 'id', width: 10, align: "center", search: false, sorttype: 'int', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} }, 
     { name: 'Code', index: 'Code', width: 20, align: "center", sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} }, 
     { 
     name: 'Number', 
     index: 'Number', 
     width: 20, 
     align: "center", 
     sorttype: 'int', 
     searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
     editable: true, 
     editoptions: { size : 20 }, 
     editrules: { required: true } 
     }, 
     { 
     name: 'Floor', 
     index: 'Floor', 
     width: 30, 
     align: "center", 
     sorttype: 'int', 
     search: false, 
     edittype: 'select', 
     editable: true, 
     editoptions: { 
      dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>', 
      buildSelect: function (data) { 
      var retValue = $.parseJSON(data); 
      var response = $.parseJSON(retValue.d); 

      var s = '<select id="myid" name="myid">'; 

      if (response && response.length) { 
       for (var i = 0, l = response.length; i < l; i++) { 
       s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>'; 
       } 
      } 

      return s + "</select>"; 
      } 
     }, 
     editrules: { required: true } 
     }, 
     { name: 'Descr', index: 'Descr', width: 40, align: "center", sorttype: 'text', editable: true, editoptions: { size: 10} }, 
     { 
     name: 'Type', 
     index: 'Type', 
     width: 50, 
     align: "center", 
     sorttype: 'text', 
     edittype: 'select', 
     editable: true, 
     editoptions: { 
      dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>', 
      buildSelect: function (data) { 
      var retValue = $.parseJSON(data); 
      var response = $.parseJSON(retValue.d); 

      var s = '<select id="myid2" name="myid2">'; 

      if (response && response.length) { 
       for (var i = 0, l = response.length; i < l; i++) { 
       s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>'; 
       } 
      } 

      return s + "</select>"; 
      } 
     }, 
     editrules: { required: true } 
     }, 
     { name: 'CreatedBy', index: 'CreatedBy', align: "center", search: false, sorttype: 'text', width: 40, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} }, 
     { name: 'CreationDate', index: 'CreationDate', align: "center", search: false, sorttype: 'text', width: 30, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} }, 
     { 
     name: 'Status', 
     index: 'Status', 
     width: 50, 
     hidden: true, 
     edittype: 'select', 
     editable: true, 
     editrules: { edithidden: true, required: true }, 
     editoptions: { 
      dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>', 
      buildSelect: function (data) { 
      var retValue = $.parseJSON(data); 
      var response = $.parseJSON(retValue.d); 

      var s = '<select id="myid3" name="myid3">'; 

      if (response && response.length) { 
       for (var i = 0, l = response.length; i < l; i++) { 
       s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>'; 
       } 
      } 

      return s + "</select>"; 
      } 
     } 
     }, 
     { 
     name: 'Features', 
     index: 'Features', 
     width: 50, 
     hidden: true, 
     edittype: 'select', 
     editable: true, 
     editrules: { edithidden: true, required: true }, 
     editoptions: { 
      dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>', 
      buildSelect: function (data) { 
      var retValue = $.parseJSON(data); 
      var response = $.parseJSON(retValue.d); 

      var s = '<select id="myid4" name="myid4">'; 

      if (response && response.length) { 
       for (var i = 0, l = response.length; i < l; i++) { 
       s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>'; 
       } 
      } 

      return s + "</select>"; 
      } 
     } 
     } 
     ], 

這是我用來創建我的aspx頁面上的網格功能的提取物。從colModel可以看到10cols，但其中只有7個由jqGrid顯示;我需要別人的原因，當我在網格上編輯記錄時，我想以模式彈出窗體的形式顯示它們。現在

，我想寫下更乾淨的代碼：我寧願上添加編輯按鈕，點擊這些3個領域的彈出建成時，而不是在colModel

Answer 1

列出他們，如果我明白你的問題通過在編輯表單的回調beforeShowForm中動態設置readonly='readonly'或disabled='disabled'屬性，您將能夠實現您的要求。

對於一般理解，重要的是要知道，當jqGrid創建編輯窗體，然後它將所有隱藏的字段也放在窗體中。它簡化了向提交表單上的服務器發送隱藏字段的過程。因此，您可以在網格的隱藏列中顯示您計劃在編輯表單中顯示的任何信息。在您執行beforeShowForm回調的內部，您可以動態顯示隱藏字段，但如果需要則設置「只讀」屬性。例如，您的網格中的'ID','Code','CreatedBy'和'CreationDate'可以以示例的方式顯示。

您可以另外使用column chooser來最初隱藏列，但允許用戶在真正需要時顯示附加信息。您可以找到here列選擇器的使用示例。

對您的代碼的一些更一般的建議。我建議你在你的網格中使用如此命名的column templates，並分享你使用的buildSelect的代碼。

例如，如果你在網格的最列使用align: "center"可以使用的jqGrid的cmTemplate: {align: "center"}選項，並從每列刪除align: "center"。您還可以將所有網格中隨處使用的一些模板定義爲colModel的參數template。在the answer中，您將找到一個簡單的myDateTemplate格式化程序的示例。如果在列中使用datepicker，則模板將變得更加複雜，但代碼的共享將變得更加重要。請參閱從the answer或the demo從the another answer。