Summary of Web Development Framework experience based on MVC4 + EasyUI (13) -- DataGrid Control to automatically adapt to the broadband height, mvc4 -- datagrid

Summary of Web Development Framework experience based on MVC4 + EasyUI (13) -- DataGrid Control to automatically adapt to the broadband height, mvc4 -- datagrid

By default, the DataGrid of EasyUI does not seem to have the auto-width adaptation function. Generally, the pixel width is specified, but the screen resolution of the human computer may be different, therefore, in some cases, the display is too large or too small to achieve the expected effect. If the DataGrid can be scaled according to the window size, the effect should be much better. This article describes how to automatically adapt to the broadband height of the DataGrid Control.

First, we need to define an extension function for resizeDataGrid to facilitate calls on the page. The extension function is defined as follows.

// The function of auto-adjusting the datagrid width and height $. fn. extend ({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 });}});

After defining the above functions, we can use Javascript to call them on the page. The Calling method is as follows: $ ('# grie'). resizeDataGrid.

Var heightMargin = $ ("# toolbar "). height () + 60; var widthMargin = $ (document. body ). width ()-$ ("# tb "). width (); // automatically changes the size when the window size changes during the first loading. $ ('# grid '). resizeDataGrid (heightMargin, widthMargin, 0, 0); $ (window ). resize (function () {$ ('# grid '). resizeDataGrid (heightMargin, widthMargin, 0, 0 );});

Through the above code, we can define two borders of height and width, but we should not fix them. We should dynamically obtain the border size through some interface code objects.

The HTML code is as follows.

<Div id ="Tb"Style =" padding: 5px; height: auto "> <! ------------------------------- Search box ---------------------------------> <fieldset> <legend> Information Query </legend> <form id = "ffSearch" method = "post"> <div id ="Toolbar"> <Table cellspacing =" 0 "cellpadding =" 0 "> <tr> <th> <label for =" txtProvinceName "> province Name: </label> </th> <td> <input type = "text" ID = "txtProvinceName" name = "txtProvinceName" style = "width: 100px "/> </td> <td colspan =" 2 "> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-search' "id =" btnSearch "> query </a> <a href =" javascript: void (0) "class =" easyui-linkbutton "id =" btnImport "iconcls =" icon-exce L "onclick =" ShowImport () "> Import </a> <a href =" javascript: void (0) "class =" easyui-linkbutton "id =" btnExport "iconcls =" icon-excel "onclick =" ShowExport () "> export </a> </td> </tr> </table> </div> </form> </fieldset> <! ------------------------------- Detailed information display table -----------------------------------> <table id = "grid" style = "width: 940px" title = "user operation" data-options = "iconCls: 'icon-View' "> </table> </div>

The interface effect is as follows.

Other similar interfaces have the following similar effects.

Compared to the above interface, the following interface adds a panel on the left, and the code here does not require special settings.

Var heightMargin = $ ("# toolbar "). height () + 40; var widthMargin = $ (document. body ). width ()-$ ("# tb "). width () + 20; // automatically changes the size when the window size changes during the first loading. $ ('# grid '). resizeDataGrid (heightMargin, widthMargin, 0, 0); $ (window ). resize (function () {$ ('# grid '). resizeDataGrid (heightMargin, widthMargin, 0, 0 );});

The code above is only fine-tuned based on the effect, basically similar to the width setting code in the first part.

You can also use the layout class = "easyui-layout" to adjust the DataGrid table automatically.

<Div class = "easyui-layout"Data-options = "fit: true"Id = "tb"><Div data-options = "region: 'north '"Style = "padding: 5px; height: 70px"> <! ----------------------------- Search box response> <fieldset> <legend> Information Query </legend> <form id = "ffSearch" method = "post"> <div id = "toolbar"> <table cellspacing = "0" cellpadding = "0"> <tr> <th> <label for = "txtProvinceName"> province Name: </label> </th> <td> <input type = "text" id = "txtProvinceName" name = "txtProvinceName" style = "width: 100px "/> </td> <td colspan =" 2 "> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-search' "id =" btnSearch "> query </a> <a href =" javascript: void (0) "class =" easyui-linkbutton "id =" btnImport "iconcls =" icon-excel "onclick =" ShowImport () "> Import </a> <a href =" javascript: void (0) "class =" easyui-linkbutton "id =" btnExport "iconcls =" icon-excel "onclick =" ShowExport () "> export </a> </td> </tr> </table> </div> </form> </fieldset> </div><Div data-options = "region: 'center'"><! ------------------------------- Detailed information display table -----------------------------------> <table id = "grid" title = "user operation" data-options = "iconCls: 'icon-View' "fit =" true "> </table> </div>