標籤：overflow XML gets span block 菜單 ret eclips 結果
1.準備工作
（1）jquery easy ui
（2）mysql資料
（3）eclipse開發環境等等
2.開發前端
<body class="easyui-layout">
<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 顯示菜單的例子
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
