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就行,如果你写的有表格宽度自适应还需要在那个函数里再调用一次,不然页面尺寸改变后,这个就不起作用了。使用方法如下:
jqgridColResize使用方法

效果图:
这里写图片描述

资源下载链接为: https://pan.quark.cn/s/9648a1f24758 在Web开发领域,数据展示是至关重要的,尤其是在处理大量结构化数据时。JqGrid是一款基于jQuery的数据表格插件,它为表格数据的展示和操作提供了一种高效且可高度定制的解决方案。本文将深入探讨“JqGrid自适应列宽度”这一功能,帮助开发者更好地实现和优化这一特性。 JqGrid能够根据屏幕尺寸或窗口大小自动调整列宽,从而优化用户体验。这种自适应性是现代Web应用的必备特性,尤其是在响应式设计日益普及的当下。自适应列宽功能可以确保表格在不同设备和屏幕分辨率下保持清晰易读,从而提升用户浏览体验。 实现JqGrid自适应列宽主要依赖以下几点: 全局网格宽度设置:JqGrid允许通过width属性设置全局网格宽度,可以是固定像素值,也可以是百分比值。百分比值有助于实现自适应,因为它会根据容器宽度动态调整。 列模型配置:在JqGrid中,每个列都有对应的列模型(colModel)。通过设置autoResizable: true属性,可以开启列的自动调整大小功能。 自适应事件处理:JqGrid提供了resizeStop和gridResize等事件,这些事件可以在窗口大小改变或列宽调整后触发,从而执行特定操作以适应新的布局。 调整列宽的函数:JqGrid内置了一些函数,如setGridWidth和autoResizeAllColumns,用于动态调整表格或单个列的宽度。开发者可以通过监听窗口的resize事件并调用这些函数来实现自适应。 CSS和媒体查询:除了JqGrid自身的自适应机制外,还可以结合CSS和媒体查询来控制表格在不同屏幕尺寸下的表现。例如,可以为小屏幕设备定义不同的列宽和布局。 jQuery插件:有时需要额外的jQuery插件(如jQuery.resize)来检测和处理非窗口对
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值