A summary of the experience of web development framework based on MVC4+EASYUI ()--datagrid controls enable automatic adaptation to broadband heights

By default, Easyui's DataGrid does not seem to have automatic width adaptation, typically a specified pixel width, but the screen resolution of the person computer used may be different, resulting in some places showing too large or too small to always achieve good results, If the DataGrid can scale according to the window size, the effect should be much better. This article mainly introduces the operation of the DataGrid control to automatically adapt to the broadband height.

First we need to define a resizedatagrid extension function, which makes it easy to call inside the page, and the extension function definition is as follows.

 // datagrid width height auto-adjust function  $.fn.extend ({resizedatagrid:  function   (Heightmargin, Widthmargin, MinHeight, minWidth) { var  height = $ (document.body). Height ()- Heightmargin;  var  width = $ (document.body). Width ()- = height < minheight?         Minheight:height; Width  = width < minWidth?         Minwidth:width; $ ( , {height:    Height, width:width}); }});

Once we have defined the above functions, we can use JavaScript in the page to invoke them, as follows: $ (' #grid '). Resizedatagrid.

        var heightmargin = $ ("#toolbar"). Height () +;         var widthmargin = $ (document.body). Width ()-$ ("#tb"). Width ();         // automatically changes size when the first load occurs and when the window size changes        $ (' #grid '). Resizedatagrid (Heightmargin, widthmargin, 0, 0);        $ (window). Resize (function  () {            $ (' #grid '). Resizedatagrid (Heightmargin, Widthmargin, 0, 0);        });

With the code above, we can define two boundaries of height and width, but these should not be fixed, and we should get the border size dynamically through objects of some interface code.

The HTML code is shown below.

    <DivID= "TB"style= "Padding:5px;height:auto">        <!-------------------------------the search box--------------------------------- -        <fieldset>            <legend>Information Enquiry</legend>            <formID= "Ffsearch"Method= "POST">                <DivID= "toolbar">                    <Tablecellspacing= "0"cellpadding= "0">                        <TR>                             <th>                                <label for= "Txtprovincename">Province Name:</label>                            </th>                            <TD>                                <inputtype= "text"ID= "Txtprovincename"name= "Txtprovincename"style= "width:100px"  />                            </TD>                            <TDcolspan= "2">                                <ahref="#"class= "Easyui-linkbutton"data-options= "Iconcls: ' Icon-search '"ID= "Btnsearch">Inquire</a>                                <ahref= "javascript:void (0)"class= "Easyui-linkbutton"ID= "Btnimport"Iconcls= "Icon-excel"onclick= "Showimport ()">Import</a>                                <ahref= "javascript:void (0)"class= "Easyui-linkbutton"ID= "Btnexport"Iconcls= "Icon-excel"onclick= "Showexport ()">Export</a>                            </TD>                          </TR>                    </Table>                </Div>            </form>        </fieldset>                        <!-------------------------------Details display table--------------------------------- -        <TableID= "Grid"style= "width:940px"title= "User Action"data-options= "Iconcls: ' Icon-view '">                    </Table>    </Div>

This interface effect is shown below.

Similar effects of other similar interfaces are shown below.

In contrast to the above interface, the following interface adds a panel to the left, and the code here does not require a special setting.

            var heightmargin = $ ("#toolbar"). Height () + +;             var widthmargin = $ (document.body). Width ()-$ ("#tb"). Width () +;             // automatically changes size when the first load occurs and when the window size changes            $ (' #grid '). Resizedatagrid (Heightmargin, widthmargin, 0, 0);            $ (window). Resize (function  () {                $ (' #grid '). Resizedatagrid (Heightmargin, Widthmargin, 0, 0);            });

The above code is just a few tweaks based on the effect, the basic and the first part of the setting width code is similar.

A summary of the experience of web development framework based on MVC4+EASYUI ()--datagrid controls enable automatic adaptation to broadband heights