ligerUIGrid自适应BUG的解决方法

最近在开发的时候，使用到了前端开发框架ligerUI，但是在使用的过程中发现，ligeruiGrid在界面缩放的时候会出现右边空白，经过自己的几番调试，发现了是几个div的样式宽度没有自适应导致的，由于项目觉得这个BUG不好，所以我自己捣鼓了下，大致解决了自适应的问题。因对js不是很熟悉，所以在通用性上，可能还有问题存在，大神勿喷。希望能帮到大家。

ligerui版本：1.3.2

1.ligerUIGrid出现的布局问题：

没修改前，使用的时候，一旦缩放，就会出现这样的空白区域，看起来就很奇怪。

2、修改方法：

2.1、打开ligerui.all.js文件，在13800行左右（_onResize方法中），拷贝以下标红代码，

if (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方法之后添加，

<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相同代码出现的位置）。