jqgridフォーム編集：私は数ヶ月以来、jqGridを使用してきたと私はASP.NETのWebで正常にjqGridを使用してい</p> <p>:)ことを行うことは本当に嬉しいフォーム

Question

にフィールドを追加アプリケーション、すべて正常に動作します。私はjqGridフォームの編集を使用することに決めました。なぜなら、エンティティには私が対処しなければならない多くのプロパティがあるからです。 colModelに5つのcolsが含まれている場合、プロパティにeditable：trueがある場合、モーダルダイアログフォーム（編集アクション）に表示されることを理解しています。さらに、私は4つのプロパティがvisibileであり、最後のものは隠されていることを設定できます（edithidden：trueを設定することで、フォームに表示することができます）。

colModelに4つのプロパティを設定する方法はありますか？ポップアップモーダルフォームには1つ、2つまたはそれ以上のフィールドがありますか？

EDIT：

このコードを見てください：

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から見ることができるように10個ありますが、それらのうち7個だけがjqGridによって表示されます。グリッド上のレコードを編集するときにモーダルポップアップ形式で表示したいので、他のものが必要です。

今、私はクリーンなコードを書き留めたいと思い：ポップアップが構築されたとき、私はあなたの質問を理解していれば、私が代わりにcolModel

Answer 1

でそれらをリストで、編集ボタンをクリックしたときに、これらの3つの以上のフィールドを追加することを好むだろう編集フォームのbeforeShowFormコールバックにreadonly='readonly'またはdisabled='disabled'の属性を動的に設定することで、要件を実装できるようになります。

一般的な理解のため、jqGridが編集フォームを作成するときには、フォーム内のすべての非表示フィールドも配置することが重要です。これは、フォームの送信時にサーバーに隠しフィールドを送信することを簡単にします。したがって、編集フォームで表示する予定の情報をグリッドの非表示列に入れることができます。 beforeShowFormコールバックの実装では、隠しフィールドを動的に表示できますが、必要に応じて 'readonly'属性を設定することができます。たとえば、グリッドの'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 demoをthe answerまたはthe demoからthe another answerまで参照してください。