使用php自動備份數據庫表的實現方法
772
2023-12-08
EasyUI 簡介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。
easyui節省您網頁開發的時間和規模。
easyui很簡單但功能強大的。
在后臺管理系統開發的過程中，上左右的布局是最常見的頁面布局方式，現在我們來看看使用easyui這個jquery前端框架如何快速搭建一個可用的頁面框架。
1.在頁面中引入easyui所需的文件
<%-- 加載easyui的樣式文件，bootstrap風格 --%>
<link href="http://www.gimoo.net/t/1903/${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="http://www.gimoo.net/t/1903/${ctx }/css/themes/icon.css" rel="stylesheet">
<%-- 加載jquery和easyui的腳本文件 --%>
<script src="http://www.gimoo.net/t/1903/${ctx }/js/jquery-easyui-../jquery.min.js"></script>
<script src="http://www.gimoo.net/t/1903/${ctx }/js/jquery-easyui-../jquery.easyui.min.js"></script>
<script src="http://www.gimoo.net/t/1903/${ctx }/js/jquery-easyui-../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":"區域管理",
"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完成了簡單的左右布局。
以上所述是小編給大家分享的jQuery Easyui實現上左右布局的相關內容，希望對大家有所幫助。
