jqgrid动态改变列以及隐藏列之后保持表格长度不变

首先说下动态改变列。由于jqgrid中的colNames和colModel都是不可改变的，所以有个取巧一点的方法，就是把需要的所有列都列出来，把需要隐藏的列使用hideCol方法隐藏，需要显示的列使用ShowCol方法显示。代码如下：

$("#gridTable").jqGrid({

url:"clxxtj",

datatype:"json",

height:"auto",

autowidth:true,

forceFit:true,

shrinkToFit:true,

colNames:['选择','车辆编号','号牌号码','工号','姓名','车辆类型','车辆所有人','品牌型号'],

colModel:[

{name:"xz",width:50,align:"center",sortable:false},

{name:"clbh",hidden:true,align:"center",sortable:false},

{name:'hphm',width:120,align:"center",sortable:false},

{name:"gh",width:120,align:"center",sortable:false},

{name:"xm",align:"center",sortable:false},

{name:"cllx",align:"center",sortable:false},

{name:"syr",align:"center",sortable:false},

{name:"ppxh",align:"center",sortable:false}

],

rowNum:10,

gridComplete: function(){

var ids = $("#gridTable").jqGrid('getDataIDs'); //获取jqgrid的所有行的id（是一个数组）

for(var i = 0;i < ids.length; i+=1){

var cl = ids[i]; //给借用说明单元格 注册事件

be = "<input type='radio' name='xz' class='dxradio' value='"+cl+"'/>";

$("#gridTable").jqGrid('setRowData', cl, {xz:be}); //给第一列赋值

}

},

pager:"#gridPager",

viewrecords:true,

caption:"车辆信息统计"

});

本来是有工号列的，如图：



后来由于某些原因需要动态改变列的内容，假设需要去掉工号列好了，那么可以用hideCol方法实现，代码：

$("#gridTable").setGridParam().hideCol("gh").trigger("reloadGrid");

可是问题来了，工号列被隐藏后表也相对变短了，如图：



大家可以看到代码，autoWidth、forceFit、shrinkToFit都已经设置为true了，表格还是变短。我特地翻了下API，没看到还有什么可以使表格长度保持不变的属性或方法，于是只好自己手工设置使得表格不变。其实原理也简单，就是记录下表格原始长度，然后再隐藏后设置长度为原始长度。代码如下：

var len=$("#gridTable").getGridParam("width");

$("#gridTable").setGridParam().hideCol("gh");

$("#gridTable").setGridWidth(len);

这样就行了，效果如下：