JQGrid-动态更改列的宽度

JQGrid - Changing the width of a column dynamically

本文关键字：动态 JQGrid-      更新时间：2023-09-26

我知道jqgrid每列的宽度是使用colModel参数定义的。假设我想在点击按钮后调整列的大小，我该如何执行？

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

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

$("#mygrid").jqGrid('setColProp','amount',{width:new_width});
var gw = $("#mygrid").jqGrid('getGridParam','width');
$("#mygrid").jqGrid('setGridWidth',gw);

附言：请注意，为了实现这一点，shrinkToFit应该为true，或者您应该使用第二个参数true 调用setGridWidth

你好，这可以通过两个步骤完成：

a） 更改标题单元格宽度：

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

b） 更改列中单元格的宽度：

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

此代码不影响表视图，只更改colModel:中列的width属性

$("#[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])

例如，如果有许多列要更改：

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

$('#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寻呼机id为pager_requisitos

相关文章：