在我自己的《Web開發框架》中，用了很多年的EasyUI，最新版本EasyUI為1.4.5，隨着版本的更新，其很多功能得到了很大的完善和提高，同時也擴展了一些新的功能，以前在布局和對話框彈出層的自動適應大小的問題，也在最近的一些版本得到了解決，本文在遷移到最新EasyUI版本的時候，總結了一些經驗，希望對大家使用這個強大的Web界面組件有所幫助。
1、Web主界面的布局調整
上面的布局是頂部內容+一級菜單、左邊菜單，右邊主內容為頁面內容，頁面內容是變化的內容，其他部分為不變的，這樣的布局代碼如下所示。
<!DOCTYPE html> <html> <body style="overflow-y:hidden;" scroll="no"> <div class="easyui-layout" data-options="fit:true,border:false"> <!--頂部Banner--> <div region="north" id="header"> </div> <!--左側導航菜單--> <div region="west" split="true" title="導航菜單" style="width:200px;padding:1px;overflow:hidden;"> </div> <!--主工作區--> <div id="mainPanle" region="center" title="" style="overflow:hidden;"> </div> <!--底部版權標識--> <div data-options="region:'south',split:true" style="height: 40px;background: #D2E0F2;"> </div> </div> </body> </html>
在上面的主頁面布局代碼里面，<div class="easyui-layout" 外面注意不要包含有Form的標志，否則會出現一些莫名其妙的錯誤。我們通過data-options="fit:true,border:false"來設定布局的自動適應，這樣在放大縮小頁面的時候，布局總是能夠自動適應頁面的變化的。
2、DataGrid表格的自動調整處理
在之前的一些版本里面，DataGrid總是沒有能夠自動實現寬度的自動調整，為了實現這種效果，還需要添加一些JS代碼進行處理，這種方式在現在DataGrid支持寬度百分比的屬性后，變得簡單容易了。
表格的HTML代碼如下所示。
<!-------------------------------詳細信息展示表格-----------------------------------> <table id="grid" title="用戶操作" data-options="iconCls:'icon-view'"></table>
而其中我們自動通過JQuery賦值的JS代碼如下所示。
//實現對DataGird控件的綁定操作 function InitGrid(queryData) { $('#grid').datagrid({ //定位到Table標簽，Table標簽的ID是grid url: '/User/FindWithPager', //指向后台的Action來獲取當前用戶的信息的Json格式的數據 title: '系統用戶信息', 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', //根據某個字段給easyUI排序 sortOrder: 'asc', remoteSort: false, //idField: 'ID', //不設置idField，翻頁不會記錄選擇 queryParams: queryData, //異步查詢的參數 columns: [[ { field: 'ck', checkbox: true }, //選擇 { title: 'ID', field: 'ID', width: 80, sortable: true }, { title: '用戶編碼', field: 'HandNo', width: 80, sortable: true }, { title: '用戶名/登錄名', field: 'Name', width: 120, sortable: true }, { title: '真實姓名', field: 'FullName', width: 80, sortable: true }, { title: '是否過期', 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: '可用', plain: true, iconCls: 'icon-ok' }); $(".grid_unvisible").linkbutton({ text: '過期', plain: true, iconCls: 'icon-stop' }); $(".grid_normal").linkbutton({ text: '正常', plain: true, iconCls: 'icon-ok' }); $(".grid_deleted").linkbutton({ text: '已刪除', plain: true, iconCls: 'icon-stop' }); }, toolbar: [{ id: 'btnAdd', text: '添加', iconCls: 'icon-add', handler: function () { ShowAddDialog();//實現添加記錄的頁面 } }, '-', { id: 'btnEdit', text: '修改', iconCls: 'icon-edit', handler: function () { ShowEditOrViewDialog();//實現修改記錄的方法 } }, '-', { id: 'btnDelete', text: '刪除', iconCls: 'icon-remove', handler: function () { Delete();//實現直接刪除數據的方法 } }, '-', { id: 'btnView', text: '查看', iconCls: 'icon-table', handler: function () { ShowEditOrViewDialog("view");//實現查看記錄詳細信息的方法 } }, '-', { id: 'btnReload', text: '刷新', iconCls: 'icon-reload', handler: function () { //實現刷新欄目中的數據 $("#grid").datagrid("reload"); } }], onDblClickRow: function (rowIndex, rowData) { $('#grid').datagrid('uncheckAll'); $('#grid').datagrid('checkRow', rowIndex); ShowEditOrViewDialog(); } }); };
為了實現其自動伸縮，我們只需要設置 width: '100%'就可以了，不需要像以前那樣需要自動寬度。
3、對話框的自動調整處理
在我們《Web開發框架》里面，利用DIV層作為界面的子窗口是一種很常見的處理方式，因此彈出的對話框層需要設定好其對應的自動縮放效果。
特別是由於不同的電腦設備上，筆記本和台式電腦的高度不同，還有分辨率不同，因此它們的寬度高度需要非常靈活的自動調整處理，實現我們界面的一致性。
以上界面我們通過樣式的調整就可以實現對話框大小的變化，以及跟隨整體布局的調整，總體居中的效果了。
<!--------------------------添加信息的彈出層----------------------------> <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>
其中 style="width:98%;max-width:824px;height:98%;max-height:300px;" 確保了對話框不會太大變得難看，我們讓它保持一個較好的大小。
其中 onResize:function(){$(this).dialog('center');} 讓它在布局變化的時候自動把對話框居中，這樣效果更加好看。
以上就是我們通常在實現布局和對話框自動適應大小所做的一些處理，能夠很好的適應我們不同的設備分辨率。