2

jqGrid 4.8.2 を使用しており、固定幅のグリッドを設定しています。しかし、columnChooser を使用して表示されている列を変更すると、グリッドの幅がすべての列の幅を合わせた幅に再調整され、水平スクロールがなくなります。'done' columnChooser パラメータ内で幅をリセットしようとしましたが、うまくいきません。いくつかのデバッグの後、「完了」が完了し、ダイアログ ウィンドウが閉じられた後にサイズ変更が行われるようです。幅を手動でリセットするボタンを作成しましたが、それはうまく機能するので、幅のリセットが発生する可能性があります。それをトリガーするためにどのイベントを使用すればよいかわかりません。

var defaultColModel = 
[   
    {name:'REQUESTEDDATE'
        ,index:'r.requestedDate'
        ,label:'Request Date'
        ,sorttype:"date"
        ,template: "date"
        ,search:true
        ,width:100
        ,hidden:false
    },
    {name:'VENDORNAME'
        ,index:'v.companyName'
        ,label:'Vendor'
        ,search:true
        ,stype:'text'
        ,width:150
        ,formatter:'showlink'
        ,formatoptions:{baseLinkUrl:'<cfoutput>#application.rootpath#</cfoutput>', addParam: '&page=dsp_request#vendorT', idName:'REQUESTID'}
        ,hidden:false
    },
    {name:'VENDORID'
        ,index:'r.vendorID'
        ,label:'Vendor ID'
        ,search:true
        ,stype:'text'
        ,width:100
        ,hidden:true
    },
    {name:'VENDORCONTACT'
        ,index:'vendorContact'
        ,label:'Vendor Contact'
        ,stype:'text'
        ,search:true
        ,width:100
        ,hidden:true
    } // there are many more cols.  Just showing a few to illustrate how they are defined.
]
var myGrid = jQuery("#contract_grid").jqGrid({
    url:            'cfc/com_ajxRequestNew.cfc?method=getReqJSON&returnformat=json',
    datatype:       'json',
    postData:       {filters: myFilters},
    mtype:          'POST',
    search:         true,
    colModel:       defaultColModel,
    gridview:       false, //added for IE 
    altRows:        true,
    emptyrecords:   'NO DATA FOUND',
    height:         400,
    width:          1200,
    sortname:       lastSortName,
    sortorder:      lastSortOrder,
    page:           lastPage,
    pager:          jQuery('#report_pager'),
    rowNum:         lastRowNum,
    rowList:        [10,20,50,100],
    viewrecords:    true,
    clearSearch:    false,
    caption:        "Contracts Dashboard",
    sortable:       true,
    shrinkToFit:    false,
    excel:          true,
    ajaxSelectOptions: {type: "GET"},
    gridComplete: function() {//removed code for simplicity}
});
jQuery("#contract_grid").navGrid('#report_pager',{
    edit:false,
    add:false,
    del:false,
    search:false,
    refresh:false
}).navButtonAdd("#report_pager",{
    caption: "Columns",
    buttonicon: "ui-icon-calculator",
    title: "Select and Reorder Columns",
    jqModal: true,
    onClickButton: function(e){

        $('#contract_grid').jqGrid('columnChooser', {
            dialog_opts: {
                modal: true,
                minWidth: 470,
                show: 'blind',
                hide: 'explode'
            },
            done : function (perm) {
              if (perm) {
                  // "OK" button are clicked
                  $('#contract_grid').jqGrid("remapColumns", perm, true);

                  // **UPDATED WORKING CODE**get the width set for the grid
                  var gwdth = $('#contract_grid').jqGrid("getGridParam","width");
                 // set the tblwidth so the grid does not get resized
                  $('#contract_grid').setGridParam({tblwidth:gwdth});

              } else {
                  // we can do some action in case of "Cancel" button clicked
              }
           }
        }); 
    }

});
4

1 に答える 1

1

コードの最も重要な部分を投稿していません: colModel. 少なくとも、「固定」する必要がある列の定義を知っておくことが重要です。

固定幅の列にはfixed: trueプロパティが必要です。幅が変化するのを防ぎます。

更新:何を実装したいかはまだわかりませんが、jqGrid 4.8.2 の特定の動作はわかりません。これは、GitHub のコードに URL を含めるだけで試すことができる代替フォークフリー jqGridを開発しているためです (こちらを参照) 。 .

tblwidth一般に、との 2 つの重要な内部パラメータが存在しますwidth。はtblwidthグリッドの本体の幅 ( ) であり、グリッドの合計幅である外側の div の幅<table>が存在します。あなたのケースでは、jqGrid 4.8.2 が と の間で間違った選択をしていると思います。コールバックのコード内を次のように置き換えてみることをお勧めします。widthtblwidthwidthvar gwdth = $('#contract_grid').jqGrid("getGridParam","width");donevar gwdth = $('#contract_grid').jqGrid("getGridParam","tblwidth");

無料の jqGrid は、 jqGrid のオプションでグリッドを作成するときに使用したオリジナル を保存し、次の行を内部で使用しますwidthwidthOrgcolumnChooser

$self.jqGrid("setGridWidth",
    !p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%") ? p.tblwidth : p.width,
    p.shrinkToFit);

指定せず、グリッドの作成中にオプションautowidth: trueを使用しました（後で説明します）。したがって、無料の jqGrid は、デフォルトで の代わりに使用する必要があります。width: 1200widthOrgtblwidthwidth

于 2015-06-05T14:18:10.803 に答える