I think the friend who is using the jquery easy UI must very much hope that the DataGrid can adapt to the page size changes, I have not yet found that it comes with this function, so I wrote a simple implementation method, share with netizens, also hope to help needy friends.
Here is an implementation of my jquery based:
JS Code
- /**
- * jquery extension method, the user to jquery Easyui the DataGrid control to operate.
- */
- $.fn.extend ({
- /**
- * Modify the default size of the DataGrid object to fit the page width.
- *
- * @param heightmargin
- * height is the distance from the inside margin of the page.
- * @param widthmargin
- * Width is the distance from the inside margin of the page.
- * @param minheight
- * Minimum height.
- * @param minWidth
- * Minimum width.
- *
- */
- Resizedatagrid: function (Heightmargin, Widthmargin, MinHeight, minWidth) {
- var height = $ (document.body). Height ()-heightmargin;
- var width = $ (document.body). Width ()-widthmargin;
- Height = height < minheight? Minheight:height;
- width = width < minWidth? Minwidth:width;
- $ (this). DataGrid (' resize ', {
- Height:height,
- Width:width
- });
- }
- });
How to use:
JS Code
- $ (function () {
- var datagridid = ' Userdatagrid ';
- //other code
- //Auto change size on first load
- $ (' # ' + datagridid). Resizedatagrid (20, 20, 300, 600);
- //Adjust the size of the DataGrid when the window size is changed
- $ (window). Resize (function () {
- $ (' # ' + datagridid). Resizedatagrid (20, 20, 300, 600);
- });
- });
In addition, because IE6 JS is inefficient, so in order to make the DataGrid adaptive page size changes, please set the DataGrid Fitcolumns property to False, otherwise changing the page size will cause IE to appear a certain time to pause. Set the method to:
$ (' # ' + Datagridid). DataGrid ({
Title: ' User type ',
URL: ' Usertype.json ',
Fitcolumns:false,
.......
JQuery Dategrid Adaptive width