2009-11-02 58 views
53

jqGridテーブルの列を非表示にする方法はありますか?ただし、フォームエディタのモーダルダイアログでその行を編集すると読み取り専用として表示されますか?jqGridの非表示の列

答えて

38

私はちょうど次を適用するトリックん、queen3さんの提案に展開したい:

editoptions: { 
       dataInit: function(element) { 
          $(element).attr("readonly", "readonly"); 
         } 
      } 

シナリオ#1:フィールドがグリッドに表示

  • にする必要があります
  • フィールドはフォームで表示する必要があります
  • フィールドは読み取り専用でなければなりません

解決:フォームを編集するとき

colModel:[ 
     { name:'providerUserId', 
       index:'providerUserId', 
       width:100,editable:true, 
       editrules:{required:true}, 
       editoptions:{ 
          dataInit: function(element) { 
            jq(element).attr("readonly", "readonly"); 
          } 
          } 
      }, 
], 

providerUserIdは、グリッドに表示し、表示されています。しかし、あなたは内容を編集することはできません。


シナリオ#2

  • フィールド
  • フィールドは
  • フィールドが読み取り専用でなければならない
形式で表示されなければならないグリッドに表示されてはなりません

解決策

colModel:[ 
      {name:'providerUserId', 
      index:'providerUserId', 
      width:100,editable:true, 
      editrules:{ 
         required:true, 
         edithidden:true 
         }, 
      hidden:true, 
      editoptions:{ 
        dataInit: function(element) {      
          jq(element).attr("readonly", "readonly"); 
          } 
        } 
     }, 
     ] 

どちらの場合でも、私は通常の$ではなくjqueryを参照するためにjqを使用しています。私のHTMLでは、私はjQueryので使用する変数を変更するには、以下のスクリプトを持っている:

<script type="text/javascript"> 
    var jq = jQuery.noConflict(); 
</script> 
+0

シナリオ付きの素敵な説明です!! +1 –

21

あなたは、テーブルの列を非表示にするには、次のコードを使用することができます。..

JQuery("tableName").hideCol("colName"); 

そして、あなたは再びそれを表示するには、次のコードを使用することができます。あなたの質問のために

JQuery("tableName").showCol("colName"); 

、あなたがdocument.ready()のhideCol()のコードを呼び出すことができ、あなたは、ダイアログの編集上のshowCol()のコードをバインドすることができます/イベントをクリックします。

+0

また、おそらく編集が完了している、または使用者/編集者が編集を行っているときに対応するイベントでhideCol()のコードをバインドすることをお勧めします。 –

78

この機能はjqGridに組み込まれています。

次のようにグリッド機能を設定します。

$('#myGrid').jqGrid({ 
    ... 
    colNames: ['Manager', 'Name', 'HiddenSalary'], 
    colModel: [    
       { name: 'Manager', editable: true }, 
       { name: 'Price', editable: true }, 
       { name: 'HiddenSalary', hidden: true , editable: true, 
        editrules: {edithidden:true} 
       } 
      ], 
    ... 
}; 

を適用することができるが、この基本的なセットアップは、グリッドビューのマネージャーの給料を隠すだろうが、編集フォームが表示されたとき、編集を可能にする他のeditrulesがあります。

+0

私はそれを編集フォームで編集可能にしたくないということを除いて、ほとんど私が探しているものです。私はそれをする方法がないと思っています。 – maxpower47

+0

ですので、編集フォームに表示したいのですが、読み取り専用にしておきますか? –

+0

うわー--------------- – maxpower47

1

がedithidden使用してみてください:真とも

editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } } 

またはカスタム編集のためのjqGridのwikiを参照してくださいを行い、セットアップ任意の入力タイプ、私が思うにもラベルを付けることができます。

7

このスレッドはかなり古いですが、他の誰かがこの質問を突き詰めた場合に... テーブルの選択された行から値を取得する必要がありましたが、行はからだった。 hideColを使用しましたが、Andyと同じ問題がありました。これを修正するには(グリッドと呼ぶ)、グリッドの幅を再設定するだけです。

jQuery(document).ready(function() { 

     jQuery("#ItemGrid").jqGrid({ 
       ..., 
       width: 700, 
       ... 
     }).hideCol('StoreId').setGridWidth(700) 

私はそれが列の幅をリセットするテーブルの幅をリセットするが、隠されたものを除外し、それらが隙間に充填されたときに私の行幅は、自動であるので。

+1

は、4.0バージョンのjqgridで完全に動作します。 –

+0

事後に列のサイズを変更するには、[この方法](http://www.trirand.com/blog/?page_id=393/help/recall-and-set-column-widths/)を試してください。 – WEFX

0

グリッド列

jQuery("#validGrid").jqGrid('hideCol',str); 
0

を非表示にするにはそれは、この記事少し古いです。しかし、これは私のコードを表示/非表示の列です。私は列を表示し、それらをマークするだけの組み込み関数を使用します。

表示列/非表示列を表示する機能。 #jqGridはグリッドの名前、columnChooserはjqGrid列のチューザーです。

function showHideColumns() { 
     $('#jqGrid').jqGrid('columnChooser', { 
      width: 250, 
      dialog_opts: { 
       modal: true, 
       minWidth: 250, 
       height: 300, 
       show: 'blind', 
       hide: 'explode', 
       dividerLocation: 0.5 
      } }); 
関連する問題