JQuery Dategrid Adaptive width

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

2. /**
4. * jquery extension method, the user to jquery Easyui the DataGrid control to operate.
6. */
8. $.fn.extend ({
10. /** 
12. * Modify the default size of the DataGrid object to fit the page width.
14. *
16. * @param heightmargin
18. * height is the distance from the inside margin of the page.
20. * @param widthmargin
22. * Width is the distance from the inside margin of the page.
24. * @param minheight
26. * Minimum height.
28. * @param minWidth
30. * Minimum width.
32. *
34. */
36. Resizedatagrid: function (Heightmargin, Widthmargin, MinHeight, minWidth) {
38. var height = $ (document.body). Height ()-heightmargin;
40. var width = $ (document.body). Width ()-widthmargin;
44. Height = height < minheight? Minheight:height;
46. width = width < minWidth? Minwidth:width;
50. $ (this). DataGrid (' resize ', {
52. Height:height,
54. Width:width
56. });
58. }
60. });

How to use:

JS Code

2. $ (function () {
4. var datagridid = ' Userdatagrid ';
8. //other code
12. //Auto change size on first load
14. $ (' # ' + datagridid). Resizedatagrid (20, 20, 300, 600);
18. //Adjust the size of the DataGrid when the window size is changed
20. $ (window). Resize (function () {
22. $ (' # ' + datagridid). Resizedatagrid (20, 20, 300, 600);
24. });
26. });

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