easyui datagrid 没数据时显示滚动条的解决方法

今天解决了一个bug，因为datagrid有多列，可是当没有数据的时候，后面的列无法通过滚动条拉动来显示，比较麻烦，而需求要求没有数据也要拉动滚动条查看后面有什么列，一开始在网上找了一些资料，发现都不可以，有一个实现生成空的table，也就是数据行，然后将其隐藏。

后来查看了一下，easyui datagrid中显示数据的区域是一个div，没有数据的时候没有滚动条，当时想找一些当div中内容为空，用js生成滚动条，并且控制滚动条的长短，都找不到。

使用生成数据行，然后隐藏的方式会导致没有数据的时候，其pagination也会显示有一条数据，而且当有数据的时候，数据不显示了，后来想到一种方法，获取其总的标题列的宽度（标题列是<td>标签，外层是<tr>标签，也就是<tr>标签的宽度），然后在显示数据的div中加入一个div，让其宽度与其总的标题列的宽度一样，然后然div的border为0px，也就是不显示出来（或者可以隐藏），就有滚动条，也不会导致有数据时无法显示数据，没数据的时候pagination不会显示有一条数据。

以jquery-easyui-1.3.3\demo\datagrid中的aligncolumns.html为例：

<table class="easyui-datagrid" title="Aligning Columns in DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'">这里width为700的时候显示如下图，

把 width改为500，显示如下图：

使用下面的代码

var dv2 = $(".datagrid-view2");
dv2.children(".datagrid-body").html("<div style='width:"+$(".datagrid-header-row").width()+"px;border:solid 1px;height:1px;'></div>");

结果如下图

dv2.children(".datagrid-body").html("<div style='width:"+$(".datagrid-header-row").width()+"px;border:solid 1px;height:1px;'></div>");

改为 

dv2.children(".datagrid-body").html("<div style='width:"+$(".datagrid-header-row").width()+"px;border:solid 0px;height:1px;'></div>");

结果如下图