Javascript JQGrid-动态更改列的宽度

我知道jqgrid的每一列的宽度是使用

colModel

参数定义的。假设我想在单击按钮后调整列的大小，如何执行此操作？

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

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

$（'.ui jqgrid labels>th:eq（0）'）.css（'width'，'200px'）

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

---

$（'#grid tr'）.find（“td:eq（0）”）.each（function（）{$（this）.css（'width'，'200px'）；}）

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

下面是设置列“数量”的新宽度的示例：

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

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

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

---

另请注意，为了进行此操作，shrinkToFit应该为true，或者您应该使用第二个参数true调用setGridWidth

此代码不影响表视图，只更改

colModel

中列的

宽度

属性：

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

您可以使用此动态更改列

宽度

（[列索引]从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]);})
        }
}

var tabColWidths='70px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px | 125px |125px |；
函数重定义ColWidth（）{
var widthsArr=tabColWidths.split（“|”）；
对于（var j=0；jth:eq（'+j+'））.css（'width'，widthsArr[j]）；
$（'#grid tr'）.find（'td:eq（'+j+'）））.each（function（）{$（this.css（'width'，widthsArr[j]）；）
}
}

这是我的答案，可以修正 我面临着同样的问题，比如在shrinkFit=true中，我得到了2个水平滚动条 这个解决方案是可行的，你可以用窗口宽度代替1300

我的表格id是

list\u requisitos

---

而分页器id是

pager\u requisitos

使用类似于

$（“#网格”）.父项（“.ui jqgrid view”）.查找（“.ui jqgrid labels>th:eq（0）”）.css（'width'，'200px'）

只会更改指定的网格[例如：$（“#网格”）]，而不是关闭所有网格（如果您有多个网格）。有些情况下，在我的情况下，这两行正在运行

$（“#list#requisitos tr”）.find（“td:eq（4）”.each（function（）{$（this）.css（'width'，'200px'））}$（.jqg第一行标题”）.find（“th:eq（4）”.each（function（）{$（this.css（'width'，'200px'）））.css'））

这是因为我尝试了lot，但在shrinkFit=ON中，这是空间列宽的唯一方法此解决方案有效，除了在调用“setColProp”时需要使用“widthOrg”而不是“width”。此解决方案在jqgrid 4.5.2中不起作用。。。在源代码中，它解释说。这个解决方案和telb关于

widthOrg

的评论仍然适用于jqGrid 4.5.4（当前版本）。这个答案提供了一个很好的插件：

$('#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');