jqGrid自适应展示不同列数

最近做的项目用到很多表格，列数各不同，有些列数很多，超过屏宽，需要设置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宽度。