jqGrid自适应展示不同列数

最新推荐文章于 2020-03-28 17:37:16 发布

原创最新推荐文章于 2020-03-28 17:37:16 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jqgrid #ui #可视化

本文介绍了一种自适应屏幕宽度的jqGrid实现方法，通过动态计算表格列宽总和来调整表格宽度，确保所有列内容完整显示的同时，提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做的项目用到很多表格，列数各不同，有些列数很多，超过屏宽，需要设置grid宽度，让未展示出来的列以滚动条的形式出现。但实际列宽常常需要更改，且不同显示器的屏宽相差很大，给grid设置固定宽度常常导致某一列显示不全，UI很难看，用户体验不好，如图所示：

列显示不全

宽度设置如下：

width : $(window).width() < 1400 ? $(window).width():1375；

这些数值往往还需要手动计算，效率实在低下。因此，我在考虑是否可以让表格的宽度设为和屏宽最接近的列宽之和。这样首先我要获取每列的宽度。jqGrid并没有提供类似的参数。于是我先将$("#grid-table")打印出来，在一番查找试探之后，发现列宽数组可以用$("#grid-table").jqGrid()[0].attributes.style表示出来。总共设置了两个方法:

1.让表格显示给定的列数

function setGridWidth(num, array){
    var grid_width = 0;
      for(var i = 0;i < num;i++){
        grid_width += array[i].offsetWidth
      }
    return grid_width
  }

2.选择合适的列数

function chooseGridWidth(array){
    var len = array.length;
    var min = setGridWidth(len, array);
    var num1 = $(window.parent.document).width()-300,num2 = 0;
    if(min>$(window.parent.document).width()-300){ min = setGridWidth(1, array) };
    for(var i = 1; i < len; i++){
      for(var j = i+1; j < len; j++){
        
        num2 = setGridWidth(j, array);
        if(Math.abs(num1-num2) <= Math.abs(min -num1) && (num1-num2)>=0 ){ 
          
          min = setGridWidth(j, array)
        }             
      }      
    }
    return min
  }

最后设置jqGrid宽度

var cols_array = $(grid_selector).jqGrid()[0].attributes.style.ownerElement.grid.cols;
$("#grid-table").setGridWidth( chooseGridWidth(cols_array) );

效果如下：

适用性非常好，亦不必手动计算设定的宽度。改变每列的宽度，无需重新设定grid宽度。