Summary of Web Development Framework experience based on MVC4 + EasyUI (17) -- automatic resizing of layout and dialog box, mvc4easyui
In my Web development framework, EasyUI has been used for many years. The latest version of EasyUI is 1.4.5, many of its functions have been greatly improved and improved, and some new functions have also been extended. In the past, the layout and dialog box pop-up layers were automatically adapted to the size issue, some recent versions have also been solved. This article summarizes some experiences when migrating to the latest EasyUI version, hoping to help you use this powerful Web interface component.
1. Adjust the layout of the main Web InterfaceThe above layout is the top content + level 1 menu, left menu, the right main content is the page content, the page content is changed content, other parts are unchanged, such layout code is as follows.
<! DOCTYPE html> <body style = "overflow-y: hidden;" scroll = "no"> <div class = "easyui-layout" data-options = "fit: true, border: false "> <! -- Top Banner --> <div region = "north" id = "header"> </div> <! -- Left navigation menu --> <div region = "west" split = "true" title = "navigation menu" style = "width: 200px; padding: 1px; overflow: hidden; "> </div> <! -- Main workspace --> <div id = "mainPanle" region = "center" title = "" style = "overflow: hidden;"> </div> <! -- Bottom copyright identity --> <div data-options = "region: 'south', split: true" style = "height: 40px; background: # D2E0F2; "> </div> </body>In the above homepage layout code, <div class = "easyui-layout" should not contain the Form flag; otherwise, some inexplicable errors may occur. We passData-options = "fit: true, border: false"In this way, the layout can automatically adapt to the changes of the page when the page is zoomed in and out.
2. Automatic Adjustment of the DataGrid table
In earlier versions, the DataGrid does not automatically adjust the width. To achieve this effect, you need to add some JS Code for processing, this method is easy after DataGrid supports the attribute of width percentage.
The HTML code of the table is as follows.
<! ------------------------------- Detailed information display table -----------------------------------> <table id = "grid" title = "user operation" data-options = "iconCls: 'icon-View'"> </table>Among them, the JS Code that we automatically assign values through JQuery is as follows.
// Function InitGrid (queryData) {$ ('# grid') to bind the initird control '). datagrid ({// locate the Table tag. The Table tag ID is grid url: '/User/FindWithPager ', // point to the background Action to obtain the information of the current user in Json format. title: 'System user information', iconCls: 'icon-view', height: 650,Width:'123',Nowrap: true, autoRowHeight: true, striped: true, collapsible: true, pagination: true, pageSize: 50, pageList: [50,100,200], rownumbers: true, // sortName: 'id', // sort sortOrder: 'asc ', remoteSort: false, // idField: 'id' according to a field. // idField is not set, selecting queryParams: queryData, // The columns: [{field: 'ck ', checkbox: true} parameter for asynchronous query is not recorded on the page. // select {title: 'id ', field: 'id', width: 80, sortable: true}, {title: 'user Code', field: 'handno', width: 80, sortable: true }, {title: 'user Name/login name', 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', plain: true, iconCls: 'icon-stop'}); $ (". grid_normal "). linkbutton ({text: 'normal', plain: true, iconCls: 'icon-OK '}); $ (". grid_deleted "). linkbutton ({text: 'delete', plain: true, iconCls: 'icon-stop'}) ;}, toolbar: [{id: 'btnadd', text: 'add', iconCls: 'icon-add', handler: function () {ShowAddDialog (); // page for adding records}, '-', {id: 'btnedit ', text: 'modify', iconCls: 'icon-edit', handler: function () {ShowEditOrViewDialog (); // Method for modifying records }}, '-', {id: 'btndelete', text: 'delete', iconCls: 'icon-delete', handler: function () {Delete (); // Method for directly deleting data}, '-', {id: 'btnview', text: 'view', iconCls: 'icon-table', handler: function () {ShowEditOrViewDialog ("view"); // Method for viewing detailed information}, '-', {id: 'btnreload', text: 'refree ', iconCls: 'icon-reload', handler: function () {// refreshes the data in the column $ ("# grid "). datagrid ("reload") ;}}], onDblClickRow: function (rowIndex, rowData) {$ ('# grid '). datagrid ('uncheckall'); $ ('# grid '). datagrid ('checkrow', rowIndex); ShowEditOrViewDialog ();}});};To achieve automatic scaling, we only need to setWidth:'123'You do not need to set the automatic width as before.
3. Automatic Adjustment of the dialog box
In our Web development framework, using the DIV layer as the sub-window of the interface is a very common processing method, therefore, the pop-up dialog box layer needs to set the corresponding auto scaling effect.
In particular, because the height of the notebook and the desktop is different on different computer devices and the resolution is different, their width and height must be adjusted flexibly and automatically to ensure the consistency of our interface.
On the above interface, we can adjust the style to change the dialog box size and adjust the overall layout to center the overall effect.
<! -------------------------- Pop-up layer for adding information --------------------------> <div id = "DivAdd" class = "easyui-dialog" style = "width: 98%; max-width: pixel PX; 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>WhereStyle = "width: 98%; max-width: pixel PX; height: 98%; max-height: 300px ;"Make sure that the dialog box is not too big and ugly, so we keep it in a good size.
WhereOnResize: function () {$ (this). dialog ('center ');}Let it automatically center the dialog box when the layout changes, so that the effect is better.
The above are some of the operations we usually perform to automatically adapt the layout and dialog box to the size, which can well adapt to our different device resolutions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
