JQGrid - 动态更改列的宽度答案

【问题标题】：JQGrid - Changing the width of a column dynamicallyJQGrid - 动态更改列的宽度
【发布时间】：2012-08-23 16:36:12
【问题描述】：

我了解jqgrid每一列的宽度是使用colModel参数定义的。假设我想在单击按钮后调整列的大小，我该怎么做？

【问题讨论】：

这个答案提供了一个很好的插件来做到这一点：stackoverflow.com/questions/20012365/…

标签： javascript jqgrid

【解决方案1】：

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

这里是设置新的列量宽度的例子：

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

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

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

附：请注意，为了工作，shrinkToFit 应该为 true，或者您应该使用第二个参数 true 调用 setGridWidth

【讨论】：

这个解决方案有效，除了我需要在调用“setColProp”时使用“widthOrg”而不是“width”。
这个解决方案在 jqgrid 4.5.2 中不起作用......在它明确说明的源代码中。
此解决方案和 telb 在widthOrg 上的评论仍然适用于 jqGrid 4.5.4（当前版本）。

【解决方案2】：

您好，这可以分两步完成：

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

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

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

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

【讨论】：

太棒了，在我的情况下，这两行是 Woking $('#list_requisitos tr').find("td:eq(4)").each(function(){$(this).css('width','200px');}) $('.jqg-first-row-header').find("th:eq(4)").each(function(){$(this).css('width','200px');}) 这是因为我尝试了很多，但在 shrinkFit = ON 这是空间列宽的唯一方法

【解决方案3】：

此代码不影响表格视图，仅更改colModel 中列的width 属性：

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

你可以用这个（[column_index]从1开始）动态改变列width：

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

【讨论】：

【解决方案5】：

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

【讨论】：