JQUERY EASY UI +TREE +SERVLET 顯示菜單的例子

最後更新：2017-09-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：overflow XML gets span block 菜單 ret eclips 結果

1.準備工作

（1）jquery easy ui

（2）mysql資料

（3）eclipse開發環境等等

2.開發前端

<div data-options="region:‘north‘,title:‘header‘,split:true,noheader:true" style="height:60px;background:#666;">
<div class="logo">網站後台服務管理</div>
<div class="logout">您好，ssss | <a href="##">退出</a></div>
</div>
<div data-options="region:‘south‘,title:‘footer‘,split:true,noheader:true" style="height:35px;line-height:30px;text-align:center;">
<span>本網站由公司技術組進行支援人員！</span>
</div>
<div data-options="region:‘west‘,title:‘導航‘,split:true,iconCls:‘icon-world‘" style="width:180px;padding:10px;">
<ul id="nav"></ul>
</div>
<div data-options="region:‘center‘" style="overflow:hidden;">
<div id="tabs">
<div title="起始頁" iconCls="icon-house" style="padding:10px 10px;display:block;">
歡迎來到後台管理系統！
</div>
</div>
</div>
</body>

js部分

$(function () {

$(‘#nav‘).tree({
url : ‘navMenu.do?code=1&id=0‘,
lines : true,
onClick : function (node) {
if (node.url) {
if ($(‘#tabs‘).tabs(‘exists‘, node.text)) {
$(‘#tabs‘).tabs(‘select‘, node.text);
} else {
$(‘#tabs‘).tabs(‘add‘, {
title : node.text,
iconCls : node.iconCls,
closable : true,
href : node.url + ‘.do‘,
});
}
}
}
});

$(‘#tabs‘).tabs({
fit : true,
border : false,
});

});

3.編寫後台代碼

（1）建立資料庫表

（2）編寫實體類

（3）編寫資料庫遍曆資料方法

//其中DbHelper和CRS 類省略，都是對資料庫jdbc的封裝

public class NavMenuDaoImpl extends DbHelper implements NavMenuDao{

@Override
public List<NavMenu> findAllNavMenu(int id) {
List<NavMenu> list = new ArrayList<NavMenu>();
String sql = "SELECT * FROM nav_menu WHERE nid = ?";
Object []obj ={id};
CRS crs = executeQuery(sql, obj);
ResultSet rs = crs.getRs();
try {
while(rs.next()){
list.add(new NavMenu(rs.getInt(1),rs.getString(2),rs.getString(3),rs.getString(4),rs.getString(5),findAllNavMenuByid(rs.getInt(1))));
}
}catch (SQLException e) {
e.printStackTrace();
}finally{
closeSource(crs);
}
return list;
}

public List<NavMenu> findAllNavMenuByid(int id) {
List<NavMenu> list = new ArrayList<NavMenu>();
String sql = "SELECT * FROM nav_menu WHERE nid = ?";
Object []obj ={id};
CRS crs = executeQuery(sql, obj);
ResultSet rs = crs.getRs();
try {
while(rs.next()){
list.add(new NavMenu(rs.getInt(1),rs.getString(2),rs.getString(3),rs.getString(4),rs.getString(5)));
}

}catch (SQLException e) {
e.printStackTrace();
}finally{
closeSource(crs);
}

return list;
}

}

（4）編寫和配置servlet

web.xml

5.測試結果

JQUERY EASY UI +TREE +SERVLET 顯示菜單的例子

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More