Easyui a workaround for displaying scrollbars when no data is present for the DataGrid

Today solves a bug, because the DataGrid has more than one column, but when there is no data, the following columns can not be pulled through the scroll bar to display, more trouble, and requirements require no data to pull the scroll bar to see what columns behind, a start on the Internet to find some information, found that can not, There is an implementation that generates an empty table, which is the data row, and then hides it.

Later on, Easyui DataGrid display data in the area is a div, no data when there is no scroll bar, when you want to find some when the contents of the div is empty, with JS generated scroll bar, and control the length of the scroll bar, can not find.

Using the generated data row, and then hiding the way it will cause no data, its pagination will also display a piece of data, and when there is data, the data is not displayed, and then think of a way to get its total title column width (the title column is <td> tag, the outer layer is < Tr> tag, that is, the width of the <tr> label, and then add a div to the div that displays the data so that it is the same width as the total header column, and then the border of the div is 0px, that is, it is not displayed (or can be hidden), there is a scrollbar, does not cause data to be displayed when data is not available, pagination does not display a single data when there is no data.

Take the aligncolumns.html in Jquery-easyui-1.3.3\demo\datagrid as an example:

<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 ' "> here width is 700 when the following figure is shown,

Change the width to 500 to show the following figure:

Use the following code

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

The result is the following figure

Dv2.children (". Datagrid-body"). HTML ("<div style= ' width:" +$ (". Datagrid-header-row"). Width () + "Px;border:solid 1px;height:1px; ' ></div> ");

Switch

Dv2.children (". Datagrid-body"). HTML ("<div style= ' width:" +$ (". Datagrid-header-row"). Width () + "Px;border:solid 0px;height:1px; ' ></div> ");

The result is the following figure