javascript - JQGrid - 列の幅を動的に変更する

Question

jqgrid の各列の幅は、colModelパラメーターを使用して定義されていることがわかりました。ボタンをクリックした後に列のサイズを変更したい場合、どうすれば実行できますか?

Answer 1

setColProp と setGridWidth の 2 つのメソッドを使用して、列の新しい幅を設定できます。

列量の新しい幅を設定する例を次に示します。

$("#mygrid").jqGrid('setColProp','amount',{width:new_width});

var gw = $("#mygrid").jqGrid('getGridParam','width');

$("#mygrid").jqGrid('setGridWidth',gw);

PSこれを機能させるには、shrinkToFitをtrueにするか、2番目のパラメーターをtrueにしてsetGridWidthを呼び出す必要があることに注意してください

Answer 2

こんにちは、これは 2 つのステップで実行できます。

a) ヘッダー セルの幅を変更します。

$('.ui-jqgrid-labels > th:eq(0)').css('width','200px')

b) 列のセルの幅を変更:

$('#grid tr').find("td:eq(0)").each(function(){$(this).css('width','200px');})

Answer 3

このコードはテーブル ビューには影響しません。次widthの列のプロパティのみを変更しますcolModel。

$("#[grid_id]").jqGrid('setColProp','[column_name]',{width:[new_width]});

これで列widthを動的に変更できます([column_index] は 1 から始まります) :

$('#[grid_id]_[column_name], #[grid_id] tr.jqgfirstrow td:nth-child([column_index])').width([new_width])

Answer 4

例、変更する列が多数ある場合:

この場合、jqgrid が構築された後、生成されたテーブルに移動し、面倒なコードを記述することなく、列ヘッダーとそれぞれのデータのすべての列幅を手動で変更できます。

        var tabColWidths ='70px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px';

function reDefineColWidth(){
        var widthsArr = tabColWidths.split('|');

    for(var j=0; j < widthsArr.length ; j++ ){
            $('.ui-jqgrid-labels > th:eq('+j+')').css('width',widthsArr[j]);
            $('#grid tr').find('td:eq('+j+')').each(function(){$(this).css('width',widthsArr[j]);})
        }
}