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