Mvc+easyui-based Web development Framework Experience Summary (17)--Layout and dialog box automatic adaptation to size processing

In my own web development framework, I've spent many years Easyui, The latest version of Easyui is 1.4.5, with the release of the update, many of its features have been greatly improved and improved, but also expanded some new features, previously in the Layout and dialog box pop-up layer of automatic adaptation to the size of the problem, but also in some recent versions have been resolved, this article in the migration to the latest Easyui version of the time, Hopefully it will help you to use this powerful Web interface component.

1. Layout adjustment of Web main interface

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160720102848294-1894599050.png " Style= "border:0px;"/>

<! Doctype html>
In the above main page layout code, <div class= "Easyui-layout" outside the attention does not include the form of the logo, otherwise there will be some inexplicable error. We set the automatic adaptation of the layout by data-options= "Fit:true,border:false" , so that the layout will always automatically adapt to changes in the page when zoomed out.
2, the DataGrid table automatic Adjustment processing
In some previous versions, the DataGrid was not automatically able to automatically adjust the width, in order to achieve this effect, you also need to add some JS code for processing, this way in the DataGrid now support the width of the percentage of the properties, it becomes easy.
650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160720104734560-704213063.png " Style= "border:0px;"/>
The HTML code for the table is shown below.
<!-------------------------------details Show Table-----------------------------------><table id= "grid" title= " User Action "data-options=" ICONCLS: ' Icon-view ' "></table>
And the JS code where we automatically assign a value to jquery is shown below.
Implements a binding operation on the Datagird control Function initgrid (querydata)  {$ (' #grid '). DataGrid ({   // Navigate to the table label, the ID of the table tag is gridurl:  '/user/findwithpager ',    // The JSON-formatted data that points to the background action to get the current user's information title:  ' System user Information ',iconcls:  ' Icon-view ',height: 650,width:  ' 100% ',nowrap: true,autorowheight: true,striped: true,collapsible: true,pagination:  true,pagesize: 50,pagelist: [50, 100, 200],rownumbers: true,//sortname:  ' ID ',     //sorts the Easyui sortorder:  ' ASC ',remotesort: false,//idfield:  ' ID according to a field,  //does not set IDfield, page flipping does not record the parameter Columns: [[{ field of the Select queryparams: querydata,  //asynchronous query:   ' CK ',  checkbox: true },   //select  { title:  ' ID ',  field:   ' ID ', width: 80, sortable: true }, { title:  ' user code ',  field:   ' Handno ',  width: 80, sortable: true }, { title:  ' username/login ', field:  ' name ',  width: 120, sortable: true  }, { title:  ' real name ', field:  ' FullName ',  width: 80, sortable:  true }, { title:  ' expired ', field:  ' Isexpire ', width: 80,  formatter: function  (Val, rowdata, index)  { if  (val)  { return   ' <a class= ' grid_unvisible " href=" javascript:void (0) " >"  + val +   ' </a> '; } else { return  ' <a class= "grid_visible"  href= " Javascript:void (0) " >"  + val +  </a> '; } } },  ....................................]],onloadsuccess: function  ()  {$ (". Grid_visible"). LinkButton ({ text:  ' available ', plain: true, iconcls:  ' Icon-ok '  }); $ (". Grid_ Unvisible "). LinkButton ({ text:  ' expired ', &NBSP;PLAIN:&NBsp;true, iconcls:  ' Icon-stop '  }); $ (". Grid_normal"). LinkButton ({ text:  ' normal ',  plain: true, iconcls:  ' Icon-ok '  }); $ (". grid_deleted"). LinkButton ({ text:  ' deleted ',  plain: true, iconCls:  ' Icon-stop '  });},toolbar: [{id:  ' Btnadd ',text:  ' Add ',iconcls:  ' Icon-add ',handler: function  ()  {showadddialog ();//Implement Add Record page}},  '-',  {id:  ' Btnedit ',text:  ' modify ',iconcls:  ' Icon-edit ',handler: function  ()  { Showeditorviewdialog ();//Implement the method of modifying records}},  '-', {id:  ' btndelete ',text:  ' delete ',iconcls:  ' Icon-remove ',handler: function  ()  {delete ();//method for directly deleting data}},  '-', {id:  ' BtnView ' ,text:  ' view ',iconcls:  ' icon-table ',handler: function  ()  {showeditorviewdialog ("View") }},  '-', {id:  ' btnreload ',text:  ' refresh ',iconcls:  ' Icon-reload ', handler:  function  ()  {Implementation refreshes the data in the column $ ("#grid"). DataGrid ("Reload");}}],ondblclickrow: function  (rowindex, rowdata)   {$ (' #grid '). DataGrid (' Uncheckall '); $ (' #grid '). DataGrid (' Checkrow ',  rowindex); Showeditorviewdialog ();});};
In order to achieve its auto-scaling, we just need to set width:  ' 100% ' on it, do not need automatic width as before.
3. Automatic adjustment and Processing of dialog box
In our web development framework, the use of Div layer as a sub-window of the interface is a very common way of processing, so pop-up dialog layer needs to set its corresponding Autoscale effect.
Especially because of different computer devices, notebook and desktop computers are different in height, and the resolution is different, so their width height requires very flexible automatic adjustment processing, to achieve the consistency of our interface.
650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160720121202247-1037521803.png " Style= "border:0px;"/>
650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160720121353482-745918823.png " Style= "border:0px;"/>
In the above interface, we can change the size of the dialog box through the adjustment of the style, and follow the overall layout of the adjustment, the overall center of the effect.
<!--------------------------add pop-up layer----------------------------> <div id= "divadd" class= "Easyui-dialog"         Style= "width:98%;max-width:824px;height:98%;max-height:300px;" Closed= "true" resizable= "true" modal= "true" data-options= "iconcls: ' Icon-add ', buttons: ' #dlg-buttons ', onResize: Function () {$ (this). Dialog (' Center ');} " > </div>
Among them style= "width:98%;max-width:824px;height:98%;max-height:300px;" Make sure the dialog box is not too big to be ugly, we keep it a good size.
where onresize:function () {$ (this). Dialog (' Center ') , let it automatically center the dialog box when the layout changes so that it looks better.
These are some of the things that we usually do to implement the Layout and dialog box to automatically adapt to the size, which is well adapted to our different device resolutions.

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1829099
Mvc+easyui-based Web development Framework Experience Summary (17)--Layout and dialog box automatic adaptation to size processing