EasyUI scroll bar

@ Author YHC

Now easyUI is used for a project, but there is a small bug in easyUI that when the column is exceeded, no scroll bars will appear:

Reprinted with address: thanks!

Let's talk a little bit about the Code:

@ Author YHC

[Javascript]
// EasyUI displays a scroll bar by default
Function defaultHaveScroll (gridid ){
Var opts = $ ('#' + gridid). datagrid ('options ');
// Alert (Ext. util. JSON. encode (opts. columns ));
Var text = '{';
For (var I = 0; I <opts. columns. length; I ++ ){
Var inner_len = opts. columns [I]. length;
For (var j = 0; j <inner_len; j ++ ){
If (typeof opts. columns [I] [j]. field) = 'undefined') break;
Text + = "'" + opts. columns [I] [j]. field + "':''";
If (j! = Inner_len-1 ){
Text + = ",";
}
}
}
Text + = "}";
Text = eval ("(" + text + ")");
Var data = {"total": 1, "rows": [text]};
$ ('#' + Gridid). datagrid ('loaddata', data );
// $ ('# Grid'). datagrid ('appendrow', text );
$ ("Tr [datagrid-row-index = '0']" detail .css ({"visibility": "hidden "});
}

// EasyUI displays a scroll bar by default
Function defaultHaveScroll (gridid ){
Var opts = $ ('#' + gridid). datagrid ('options ');
// Alert (Ext. util. JSON. encode (opts. columns ));
Var text = '{';
For (var I = 0; I <opts. columns. length; I ++ ){
Var inner_len = opts. columns [I]. length;
For (var j = 0; j <inner_len; j ++ ){
If (typeof opts. columns [I] [j]. field) = 'undefined') break;
Text + = "'" + opts. columns [I] [j]. field + "':''";
If (j! = Inner_len-1 ){
Text + = ",";
}
}
}
Text + = "}";
Text = eval ("(" + text + ")");
Var data = {"total": 1, "rows": [text]};
$ ('#' + Gridid). datagrid ('loaddata', data );
// $ ('# Grid'). datagrid ('appendrow', text );
$ ("Tr [datagrid-row-index = '0']" detail .css ({"visibility": "hidden "});
}
The method is generic. You can directly call the method by copying it. The input parameter is the ID of your datagrid;

Describe the above Code Implementation Principles:

1. Why does easyUI not display a scroll bar by default ?????

Take a look at this figure: note that (the same for a single header and multiple headers) the example here is multiple headers.

 

The non-lock column on the right is actually wrapped by a DIV. The single header is one DIV, and the multi-header is two divs. the scroll bar appears only when the content of the DIV is set to exceed, therefore, the scroll bar does not appear when no content is initialized;

2. How is the above Code implemented ????

After initialization, you can obtain all your column information based on gridID, splice a row json object, load data using easyUI to local json, and set this row to invisible, in this way, if your row exceeds the width of the grid, the scroll bar will appear; otherwise, the scroll bar will not appear;

3. Why does visibility attribute be used without the display of css styles?

After a widget is hidden in display, it does not occupy the changed position, that is, the position is also canceled. However, the visibility attribute is set to Den den, which is not visible but still occupied, so a scroll bar appears; www.2cto.com

4. $ ("tr [datagrid-row-index = '0']" detail .css ({"visibility": "hidden"}); explanation of the code?

This indicates to search for the tr element with the value of 0 in the custom attribute datagrid-row-index of tr. If it is a multi-header, two tr objects will be obtained. If there is only one single header, in fact, each row of the datagrid contains tr, td and div, and div contains data. In the end, I only need to hide tr, so all its sub-elements are hidden and invisible, the final style is achieved;

The above is not the best practice. It is only a temporary alternative. We will post it and share it with you. If you have a better solution, please submit it!

This is the difference between visibility and display on the CSS3.0API:

 

Author: yhc13429826359