在后台管理系統開發的過程中，上左右的布局是最常見的頁面布局方式，現在我們來看看使用easyui這個jquery前端框架如何快速搭建一個可用的頁面框架。
1.在頁面中引入easyui所需的文件
1 <%-- 加載easyui的樣式文件，bootstrap風格 --%> 2 <link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet"> 3 <link href="${ctx }/css/themes/icon.css" rel="stylesheet"> 4 <%-- 加載jquery和easyui的腳本文件 --%> 5 <script src="${ctx }/js/jquery-easyui-1.4.4/jquery.min.js"></script> 6 <script src="${ctx }/js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script> 7 <script src="${ctx }/js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
2.在頁面body部分構建必要的html結構
<body> <div id="home-layout"> <!-- 頁面北部，頁面標題 --> <div data-options="region:'north'" style="height:50px;"> <!-- add your code --> </div> <!-- 頁面西部，菜單 --> <div data-options="region:'west',title:'菜單欄'" style="width:200px;"> <div class="home-west"> <ul id="home-west-tree"></ul> </div> </div> <!-- 頁面中部，主要內容 --> <div data-options="region:'center'"> <div id="home-tabs"> <div title="首頁"> <h2 style="text-align: center">歡迎登錄</h2> </div> </div> </div> </div> </body>
這里需要注意一點：easyui在使用layout布局的時候，north、south需要指定高度，west、east需要指定寬度，而center會自動適應高和寬。
3.使用js初始化easyui組件
我個人比較推薦使用js代碼去初始化easyui組件，而不使用easyui標簽中的data-options屬性去初始化。因為對於后台開發人員來說，寫js代碼可能比寫html標簽更加熟悉，而且這樣使得html代碼更加簡潔。
<script> $(function(){ /* * 初始化layout */ $("#home-layout").layout({ //使layout自適應容器 fit: true }); /* * 獲取左側菜單樹，並為其節點指定單擊事件 */ $("#home-west-tree").tree({ //加載菜單的數據，必需 url: "${ctx }/pages/home-west-tree.json", method: "get", //是否有層次線 lines: true, //菜單打開與關閉是否有動畫效果 animate: true, //菜單點擊事件 onClick: function(node){ if(node.attributes && node.attributes.url){ //打開內容區的tab，代碼在其后 addTab({ url: "${ctx }/" + node.attributes.url, title: node.text }); } } }); /* * 初始化內容區的tabs */ $("#home-tabs").tabs({ fit : true, //tab頁是否有邊框 border : false });
}) </script> <script> /* * 在內容區添加一個tab */ function addTab(params){ var t = $("#home-tabs"); var url = params.url; var opts = { title: params.title, closable: true, href: url, fit: true, border: false }; //如果被選中的節點對應的tab已經存在，則選中該tab並刷新內容 //否則打開一個新的tab if(t.tabs("exists", opts.title)){ var tab = t.tabs("select", opts.title).tabs("getSelected"); t.tabs("update", { tab: tab, options: opts }); }else{ t.tabs("add", opts); } } </script>
4.easyui-tree組件所需的json格式
easyui使用的傳輸格式為json，它對json內容的格式有比較嚴格的限制，所以請注意查看api。
text為樹的節點名稱，children則表示子節點，state表示關閉的狀態（我們可以利用這個屬性來構建延遲加載樹），而attributes則是easyui-tree為我們提供的一個自定義屬性，在這個屬性下，我們可以自定義屬性，例如我就在其中定義了url屬性，並為其賦值。當然，我們還能夠為其添加其他自定義屬性。
[{ "text":"區域管理", "attributes":{ "url":"pages/consume/area/areaList.jsp" } },{ "text":"預約信息管理", "children":[{ "text":"商戶預約信息查詢", "attributes":{ "url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp" } }] },{ "text":"准入申請管理", "children":[{ "text":"商戶准入申請", "state":"closed", "children":[{ "text":"商戶待處理申請", "attributes":{ "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait" } },{ "text":"商戶審批中申請", "attributes":{ "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current" } },{ "text":"商戶審批通過申請", "attributes":{ "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass" } },{ "text":"商戶被拒絕申請", "attributes":{ "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse" } }] }] },{ "text":"准入審批管理", "children":[{ "text":"商戶審批管理", "state":"closed", "children":[{ "text":"當前任務", "children":[{ "text":"商戶當前初審任務", "attributes":{ "url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp" } },{ "text":"商戶當前復審任務", "attributes":{ "url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp" } }] },{ "text":"商戶已完成任務", "attributes":{ "url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp" } },{ "text":"商戶不通過任務", "attributes":{ "url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp" } }] }] }]
就這樣，我們使用easyui完成了簡單的上左右布局。