【转发】JqGrid自适应列宽度

国内外的网站都翻了一遍都没有找到一个通用的jqgrid能自适应列宽的方法,要么是太繁琐,要么是不能用,通过参照http://vipshow.iteye.com/blog/1812381这篇文章,自己稍作修改写了个通用的,希望能帮到那些苦苦寻觅的人。代码如下:
首先设置div样式,该样式随意放,只要能找到就行

<!-----用来计算单元格内容实际长度的--------->  
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" style="position:absolute;top:-9999px"><div class="ui-jqgrid-view">  
<div class="ui-jqgrid-bdiv"><div style="position: relative;"><table cellspacing="0" cellpadding="0" border="0"><tr class="ui-widget-content jqgrow ui-row-ltr" style="table-layout:table"><td id="tdCompute" style="background:#eee;width:auto"></td></tr></table></div></div></div></div>  
<!-----用来计算单元格内容实际长度的---------> 

然后js:

复制代码
//重新调整jqgrid每列的宽度
function jqgridColResize(){  
    var td=$('#tdCompute')//获取计算实际列长度的容器  
        ,tds//临时保存列  
        ,arr=[];//用于保存最大的列宽  
     //遍历每行获得每行中的最大列宽  
    $('.ui-jqgrid-htable tr,.ui-jqgrid-btable tr:gt(0)').each(function(){  
       $(this).find('td,th').each(function(idx){  
         arr[idx]=Math.max(arr[idx]?arr[idx]:0,td.html($(this).text())[0].offsetWidth);  
       })           
    });  
    $('.ui-jqgrid-labels th').each(function(idx){this.style.width=arr[idx]+'px'});//设置页头单元格宽度         
    $('.ui-jqgrid-btable tr:eq(0) td').each(function(idx){this.style.width=arr[idx]+'px'});//设置内容表格中控制单元格宽度的单元格,在第一行  
  }
复制代码

使用时在gridComplete这个方法里所有的逻辑都执行完后,在最后调用jqgridColResize就行,如果你写的有表格宽度自适应还需要在那个函数里再调用一次,不然页面尺寸改变后,这个就不起作用了。使用方法如下:

转自:https://blog.csdn.net/duzhanxiaosa/article/details/78922660?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-78922660-blog-116800975.235%5Ev32%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-78922660-blog-116800975.235%5Ev32%5Epc_relevant_default_base3&utm_relevant_index=2 

 

posted @   James·wang  阅读(351)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2022-05-08 WebApi建立测试在线功能
2020-05-08 jquery利用sort方法对json数据排序
2020-05-08 jQuery closest() /parents()/parent() 方法说明
点击右上角即可分享
微信分享提示