JQGrid - 动态更改列的宽度

时间:2012-08-29 05:50:32

标签: javascript jqgrid

据我所知,jqgrid每列的宽度是使用colModel参数定义的。假设我想在单击按钮后调整列的大小,我该如何执行此操作?

5 个答案:

答案 0 :(得分:13)

您可以使用两种方法设置列的新宽度--setColProp和setGridWidth。

以下是设置列量新宽度的示例:

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

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

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

P.S。请注意,为了解决这个问题,一个shrinkToFit应该是true,或者你应该用第二个参数调用setGridWidth true

答案 1 :(得分:5)

您好这可以分两步完成:

a)更改标题单元格的宽度:

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

b)改变列中单元格的宽度:

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

答案 2 :(得分:4)

此代码不会影响表格视图,只会更改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])

答案 3 :(得分:2)

示例,如果您要更改许多列:

在这种情况下,在构建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]);})
        }
}

答案 4 :(得分:0)

$('#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中,我有两个水平滚动条 并且此解决方案正在运行,而不是1300,您可以使用窗口宽度

我的表格ID为list_requisitos  和寻呼机ID为pager_requisitos