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

首先说下动态改变列。由于jqgrid中的colNamescolModel都是不可改变的,所以有个取巧一点的方法,就是把需要的所有列都列出来,把需要隐藏的列使用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");

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

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

var len=$("#gridTable").getGridParam("width");
 $("#gridTable").setGridParam().hideCol("gh");
 $("#gridTable").setGridWidth(len);

这样就行了,效果如下:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值