版权声明：本文为博主原创文章，未经博主允许不得转载。
最近在开发的时候，使用到了
前端开发框架ligerUI，但是在使用的过程中发现，ligeruiGrid在界面缩放的时候会出现右边空白，经过自己的几番调试，发现了是几个div的样式宽度没有自适应导致的，由于项目觉得这个BUG不好，所以我自己捣鼓了下，大致解决了自适应的问题。因对js不是很熟悉，所以在通用性上，可能还有问题存在，大神勿喷。希望能帮到大家。
ligerui版本：1.3.2
1.ligerUIGrid出现的布局问题：
没修改前，使用的时候，一旦缩放，就会出现这样的空白区域，看起来就很奇怪。
2、修改方法：
2.1、打开ligerui.all.js文件，在13800行左右（_onResize方法中），拷贝以下标红代码，
[javascript]
view plain copyif (g.enabledFrozen())
{
var gridView1Width = g.gridview1.width();
var gridViewWidth = g.gridview.width();
g.gridview2.css({
width: gridViewWidth - gridView1Width
});
//新增，调用grid自适应方法
<span style="color:#ff6666;"> g._f_gridLayout_autoAdapt(gridViewWidth - gridView1Width);//将这行代码拷贝粘贴即可</span>
}
2.2 、打开ligerui.all.js文件，新增function_f_gridLayout_autoAdapt，最好在_onResize方法之后添加，[javascript]
view plain copy<span style="color:#ff0000;">/*****自己添加的grid自适应方法--start*******/
_f_gridLayout_autoAdapt:function(ChangedWidth) {
var g = this;
for (var level = 1; level <= g._columnMaxLevel; level++)
{
//1、修改column宽度
var columns = g.getColumns(level); //获取level层次的列集合
var colNum = columns.length; //要进行计算的列数
$(columns).each(function (i, column)
{
if(column.isrownumber || column.hide || column.ischeckbox){//扣除序号列和隐藏列
colNum = colNum - 1;
}
});
var columnWidth = parseInt(ChangedWidth / colNum);//计算修改后的列宽度
/****************20160310修改标题宽度（排除序号列）---start**************/
jQuery(".l-grid-header2 .l-grid-hd-cell").css({width: columnWidth});//修改标题宽度（排除序号列）
/****************20160310修改标题宽度（排除序号列）---end**************/
/****************20160309修改标题宽度（排除序号列）,最初的做法，影响界面显示效率---start**************/
/*$(columns).each(function (i, column)
{
if(column.isrownumber || column.hide){
}else {
column._width = columnWidth;//宽度赋值
g._setColumns(column);//修改列
}
});*/
/****************20160309,最初的做法，影响界面显示效率---end**************/
//2、修改l-grid-header-inner的宽度
if(g.gridview2 != undefined){
var gridHeaderInner = g.gridview2[0].children[0].children[0];
if(gridHeaderInner != undefined){
jQuery("." + gridHeaderInner.className).css({width: ChangedWidth});
}
}
//3、修改l-grid-body-inner的宽度
var gridBodyInner = g.gridbody[0].children[0];
if (gridBodyInner != undefined){
var str = "." + gridBodyInner.className;
jQuery(str).css({width: ChangedWidth});//修改l-grid-body-inner的宽度
//4、修改每行数据，每个单元格的宽度
var bodyTable = gridBodyInner.children[0];
if(bodyTable != undefined){
var gridRows = bodyTable.children[0].children;
if(gridRows != undefined){
/****************20160310,修改每行数据，每个单元格的宽度(排除序号列)、修改每行数据，每个单元格的内部存放字体的元素宽度（排除序号列）---start**************/
var rowCellClassName = gridRows[0].children[0].className;
var rowCellInnerClassName = gridRows[0].children[0].children[0].className;
if(rowCellClassName != null && rowCellClassName !=""){
//修改每行数据，每个单元格的宽度(排除序号列)
jQuery(".l-grid-body2 ." + rowCellClassName).css({width: columnWidth});
}
if(rowCellInnerClassName != null && rowCellInnerClassName !=""){
//修改每行数据，每个单元格的内部存放字体的元素宽度（排除序号列）
jQuery(".l-grid-body2 ." + rowCellInnerClassName).css({width: columnWidth-10});
}
/****************20160310---end**************/
/****************20160309,修改每行数据，每个单元格的宽度(排除序号列)、修改每行数据，每个单元格的内部存放字体的元素宽度（排除序号列）；最初的做法，影响界面显示效率---start**************/
/*$(gridRows).each(function (i, gridRow){
var cells = gridRow.children;
if(cells != undefined){
$(cells).each(function (i, cell){
if(cell.style.display =="none"){
//不改变
}else{
cell.style.width = columnWidth;//修改每行数据，每个单元格的宽度
if(cell.children[0] != undefined){
if(cell.children[0].className =="l-grid-row-cell-inner"){
cell.children[0].style.width = columnWidth-10;//修改每行数据，每个单元格的内部存放字体的元素宽度
}
}
}
});
}
});*/
/****************20160310,最初的做法，影响界面显示效率---end**************/
}
}
}
}
},
/*****自己添加的grid自适应方法--end*******/</span>
3、测试代码可行性：启动项目，访问页面。
初始化：
收缩后：
可以看见，缩放前，缩放后再没有出现原先的空白区域了的。
备注：
1、另外还有一种方式就是在不改动源码的情况下，直接将grid对应的样式取出来，修改样式布局，同样可以达到效果（亲测可行）。不过修改太过麻烦，不如直接在源码里面修改，如果有兴趣的朋友，可以慢慢研究哈。
2、当浏览器窗口改变大小时，grid布局无法自适应，则在ligerGrid.js中添加上述代码（代码添加位置为：与ligerui.all.js相同代码出现的位置）。
