web-dev-qa-db-ja.com

jqGridの非表示列

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

javascriptjqueryjqgrid
54
maxpower47

queenの提案を拡張したいだけです。以下を適用するとうまくいきます。

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"); 
                          } 
                     }
         },
        ]

どちらの場合も、通常の$ではなくjqを使用してjqueryを参照していることに注意してください。私のHTMLには、jQueryが使用する変数を変更する次のスクリプトがあります。

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

この機能は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} 
               }
             ],
   ...
};

適用できる編集ルールは他にもありますが、この基本設定ではグリッドビューでマネージャーの給与が非表示になりますが、編集フォームが表示されたときに編集が可能になります。

79
Bobby Borszich

次のコードを使用して、テーブル列を非表示にできます。

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

また、次のコードを使用して再度表示できます。

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

質問については、document.ready（）でhideCol（）コードを呼び出し、ダイアログの編集/クリックイベントでshowCol（）コードをバインドできます。

22
Anthony M. Powers

このスレッドはかなり古いと思いますが、他の誰かがこの質問に出くわした場合...テーブルの選択された行から値を取得する必要がありましたが、その行の列を表示したくありませんでした。 hideColを使用しましたが、乱雑に見えるアンディと同じ問題がありました。修正するには（ハックと呼びます）、グリッドの幅を再設定します。

jQuery(document).ready(function() {

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

行幅は自動であるため、テーブルの幅をリセットすると、列の幅はリセットされますが、非表示の幅は除外され、ギャップが埋められます。

7
Aaron

グリッド列を非表示にするには

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

Edithidden：trueを使用してみてください

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

または、カスタム編集についてはjqGrid wikiを参照してください。任意の入力タイプ、さらにはラベルを設定できます。

1
queen3

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

表示/非表示の列を表示する機能。 #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
            } });
0
Troels