Javascript JQGrid - 动态更改列的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12171640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQGrid - Changing the width of a column dynamically
提问by Jemp
I understand that the width of each column of jqgrid is defined using colModelparameter. Assuming I want to resize a column after I click a button, how can I perform this?
我知道 jqgrid 每列的宽度是使用colModel参数定义的。假设我想在单击按钮后调整列大小，我该如何执行？
回答by Piyush Sardana
You can set the new width of the column using two methods – setColProp and setGridWidth.
您可以使用两种方法设置列的新宽度 - setColProp 和 setGridWidth。
Here is example of setting new width of the column amount:
以下是设置新列宽的示例：
$("#mygrid").jqGrid('setColProp','amount',{width:new_width});
var gw = $("#mygrid").jqGrid('getGridParam','width');
$("#mygrid").jqGrid('setGridWidth',gw);
P.S. Note that in order to work this a shrinkToFit should be true, or you should call setGridWidth with second parameter true
PS 请注意，为了解决这个问题，shrinkToFit 应该为 true，或者您应该使用第二个参数 true 调用 setGridWidth
回答by r.piesnikowski
Hello this can be done in two steps:
您好，这可以分两步完成：
a) Change width of header cell:
a) 更改标题单元格的宽度：
$('.ui-jqgrid-labels > th:eq(0)').css('width','200px')
$('.ui-jqgrid-labels > th:eq(0)').css('width','200px')
b) Change width of cells in column:
b) 更改列中单元格的宽度：
$('#grid tr').find("td:eq(0)").each(function(){$(this).css('width','200px');})
$('#grid tr').find("td:eq(0)").each(function(){$(this).css('width','200px');})
回答by Temka
This code doesn't affect on table view, only change widthproperty of column in colModel:
此代码不影响表视图，仅更改width列的属性colModel：
$("#[grid_id]").jqGrid('setColProp','[column_name]',{width:[new_width]});
Yo can change column widthdynamically with this ([column_index] starts from 1):
您可以width使用此动态更改列（[column_index] 从 1 开始）：
$('#[grid_id]_[column_name], #[grid_id] tr.jqgfirstrow td:nth-child([column_index])').width([new_width])
回答by Arun Pratap Singh
Example, if you have many columns to change:
例如，如果您有许多要更改的列：
In this case, after the jqgrid is getting built, you can just go to the table getting generated and manually change all the column widths of column header and the respective data without writing tedious code.
在这种情况下，在 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]);})
}
}
回答by Chintan Gor
$('#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');
Here is my answer It can be fixed I was facing same problem like in shrinkFit = true, I got 2 horizontal scroll bars and this solution is working, instead of 1300 you can use window width
这是我的答案它可以修复我遇到了与shrinkFit = true相同的问题，我有2个水平滚动条并且此解决方案有效，您可以使用窗口宽度而不是1300
my table id is list_requisitosand pageer id is pager_requisitos
我的表 ID 是list_requisitos，寻呼机 ID 是pager_requisitos
