JQGrid-динамическое изменение ширины столбца

Я понимаю, что ширина каждого столбца в jqgrid определяется с помощью . Предполагая, что я хочу изменить размер столбца после нажатия кнопки, как я могу это сделать?

6
javascript jqgrid

5 ответов

вы можете установить новую ширину столбца, используя два метода-setColProp и setGridWidth.

вот пример установки новой ширины столбца amount:

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

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

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

P.S. обратите внимание, что для работы этого shrinkToFit должен быть true, или вы должны вызвать setGridWidth со вторым параметром true

13

Привет это можно сделать в два шага:

a) изменить ширину ячейки заголовка:

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

b) изменить ширину ячеек в столбце:

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

5

этот код не влияет на представление таблицы, только изменить width свойства столбца в colModel: 

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

Yo может изменить столбец width динамически с этим ([column_index] начинается с 1): 

$('#[grid_id]_[column_name], #[grid_id] tr.jqgfirstrow td:nth-child([column_index])').width([new_width])
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]);})
        }
}
2
$('#gbox_list_requisitos').css('width','1300px');
$('#gview_list_requisitos').css('width','1300px');
$('#gview_list_requisitos').css('width','1300px');
$('.ui-state-default').css('width','1300px');
$('.ui-jqgrid-hdiv').css('width','1300px');
$('.ui-jqgrid-bdiv').css('width','1300px');
$('#pager_requisitos').css('width','1300px');

вот мой ответ, он может быть исправлен Я столкнулся с той же проблемой, что и в shrinkFit = true, у меня есть 2 горизонтальные полосы прокрутки и это решение работает, вместо 1300 вы можете использовать окно ширина

мой ID таблицы list_requisitos и pageer id pager_requisitos

0