jQuery-easyUI的使用：tree的使用
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP '014_tree.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var flag ; //判斷執行儲存還是修改的方法
$(function(){
$('#t1').tree({
//傳送非同步ajax請求, 還會攜帶一個id的引數
url:'ResourceServlet?method=loadTree' ,
//第一次不帶引數，以後非同步載入的時候傳送id，以此獲取孩子
dnd:true ,//拖拽onDrop:function(target , source , point){
//target表哪個、source表誰被拖了、point表 方式（append、top、bottom）
var tar = $('#t1').tree('getNode' , target);//console.info(tar);
//console.info(source);
//console.info(point);
$.ajax({
type:'post',
url:'ResourceServlet?method=changeLevel' ,
data:{
targetId:tar.id ,
sourceId:source.id ,
point:point
} ,
dataType:'json' ,
cache:false ,
success:function(result){
$.messager.show({
title:'提示資訊' ,
msg:'操作成功!'
});
}
});
} ,
onContextMenu: function(e,node){
//禁止瀏覽器的選單開啟
e.preventDefault();
$(this).tree('select',node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
//儲存和修改按鈕
$('#savebtn').click(function(){
if(flag == 'add'){
//1 做前臺更新
// (1)獲取所選中的節點,也就是父節點
var node = $('#t1').tree('getSelected');
// (2)呼叫追加節點的方法
$('#t1').tree('append' , {
parent:node.target ,
data:[{
text: $('#myform').find('input[name=name]').val() ,
attributes:{
url:$('#myform').find('input[name=url]').val()
}
}]
});
//2 後臺同步更新
$.ajax({
type:'post' ,
url:'ResourceServlet?method=save' ,
cache:false ,
data:{
parentId:node.id ,
name:$('#myform').find('input[name=name]').val() ,
url:$('#myform').find('input[name=url]').val()
} ,
dataType:'json' ,
success:function(result){
//重新整理節點
var parent = $('#t1').tree('getParent' , node.target);
$('#t1').tree('reload',parent.target);
$.messager.show({
title:'提示資訊',
msg:'操作成功!'
});
}
});
//3 關閉dialog
$('#mydiv').dialog('close');
} else {
$.ajax({
type:'post' ,
url:'ResourceServlet?method=update' ,
cache:false ,
data:{
id:$('#myform').find('input[name=id]').val() ,
name:$('#myform').find('input[name=name]').val() ,
url:$('#myform').find('input[name=url]').val()
} ,
dataType:'json' ,
success:function(result){
//重新整理節點 (一定是選中節點的父級節點)
var node = $('#t1').tree('getSelected');
var parent = $('#t1').tree('getParent' ,node.target);
$('#t1').tree('reload',parent.target);
//給出提示資訊
$.messager.show({
title:'提示資訊',
msg:'操作成功!'
});
}
});
//3 關閉dialog
$('#mydiv').dialog('close');
}
});
//取消按鈕
$('#cancelbtn').click(function(){
$('#mydiv').dialog('close');
});
});
function append(){
flag = 'add';
$('#mydiv').dialog('open');
}
function editor(){
flag = 'edit';
//清空表單資料 ,重新填充選中的節點裡的id ,name , url屬性
$('#myform').form('clear');
var node = $('#t1').tree('getSelected');
$('#myform').form('load',{
id:node.id ,
name:node.text ,
url:node.attributes.url//額外的都放在attributes裡面
});
//開啟dialog
$('#mydiv').dialog('open');
}
function remove(){
//前臺刪除
var node = $('#t1').tree('getSelected');
$('#t1').tree('remove' , node.target);
//後臺刪除
$.post('ResourceServlet?method=delete' , {id:node.id} , function(reuslt){
//給出提示資訊
$.messager.show({
title:'提示資訊',
msg:'操作成功!'
});
});
}
</script>
</head>
<body>
<ul id="t1"></ul>
<div id="mydiv" title="設定許可權" class="easyui-dialog" style="width:300px;" closed=true >
<form id="myform" method="post">
<input type="hidden" name="id" value="" />
<table>
<tr>
<td>許可權名稱:</td>
<td><input type="text" name="name" value=""/></td>
</tr>
<tr>
<td>url:</td>
<td><input type="text" name="url" value=""/></td>
</tr>
<tr align="center" >
<td colspan="2" >
<a id="savebtn" class="easyui-linkbutton">確定</a>
<a id="cancelbtn" class="easyui-linkbutton">取消</a>
</td>
</tr>
</table>
</form>
</div>
<div id="mm" class="easyui-menu" style="width:150px;">
<div onclick="append()">Append</div>
<div onclick="editor()">editor</div>
<div onclick="remove()">Remove</div>
</div>
</body>
</html>
後臺程式碼
/**
* 載入tree的資料方法
* @param request
* @param response
*/
private void loadTree(HttpServletRequest request,
HttpServletResponse response) {
try {
//獲取當前展開的節點id
String id = request.getParameter("id");
List<TreeDTO> treelist = this.rdao.getChildrenByParentId(id);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(JSONArray.fromObject(treelist).toString());
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 根據父id獲取子節點們
*/
public List<TreeDTO> getChildrenByParentId(String id) throws Exception {
Connection conn = DBUtils.createConn();
String sql = "";
if("".equals(id) || id == null){
sql = "select * from resource where parent_id = 999999";
} else {
sql = "select * from resource where parent_id = " + id ;
}
PreparedStatement ps = DBUtils.getPs(conn, sql);
ResultSet rs = ps.executeQuery();
List<Resource> rlist = new ArrayList<Resource>();
while(rs.next()){
Resource r = new Resource();
r.setId(rs.getInt("id"));
r.setIcon(rs.getString("icon"));
r.setChecked(rs.getInt("checked"));
r.setName(rs.getString("name"));
r.setUrl(rs.getString("url"));
r.setParent_id(rs.getInt("parent_id"));
rlist.add(r);
}
List<TreeDTO> tlist = new ArrayList<TreeDTO>();
for (Iterator iterator = rlist.iterator(); iterator.hasNext();) {
Resource resource = (Resource) iterator.next();
TreeDTO tree = new TreeDTO();
tree.setId(resource.getId());
tree.setText(resource.getName());
tree.setChecked(resource.getChecked());
tree.setIconCls(resource.getIcon());
tree.setParent_id(resource.getParent_id());
if(getChildren(resource.getId()).size() > 0){
tree.setState("closed");
} else {
tree.setState("open");
}
Map<String, Object> map = new HashMap<String, Object>();
map.put("url", resource.getUrl());
tree.setAttributes(map);
tlist.add(tree);
}
return tlist;
}
/**
* 根據pid 獲取孩子
* @param pid
* @return
* @throws Exception
*/
public List<Resource> getChildren(int pid) throws Exception{
Connection conn = DBUtils.createConn();
String sql = "select * from resource where parent_id = " + pid;
PreparedStatement ps = DBUtils.getPs(conn, sql);
ResultSet rs = ps.executeQuery();
List<Resource> children = new ArrayList<Resource>();
while(rs.next()){
Resource r = new Resource();
r.setId(rs.getInt("id"));
r.setIcon(rs.getString("icon"));
r.setChecked(rs.getInt("checked"));
r.setName(rs.getString("name"));
r.setUrl(rs.getString("url"));
r.setParent_id(rs.getInt("parent_id"));
children.add(r);
}
return children;
}
/**
* 改變節點的層次結構方法
* @param request
* @param response
*/
private void changeLevel(HttpServletRequest request,
HttpServletResponse response) {
try {
String targetId = request.getParameter("targetId");
String sourceId = request.getParameter("sourceId");
String point = request.getParameter("point");
//得到目標物件
Resource target = this.rdao.findById(Integer.parseInt(targetId));
//得到操作的物件(源物件)
Resource source = this.rdao.findById(Integer.parseInt(sourceId));
// append top bottom
if("append".equals(point)){
source.setParent_id(target.getId());
} else {
source.setParent_id(target.getParent_id());
}
this.rdao.update(source);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 遞迴刪除節點們
* @param id
*/
private void deletenodes(int id) throws Exception{
//獲取當前要刪除的節點下面所有的孩子
List<Resource> rlist = this.rdao.getChildren(id);
for(int i = 0 ; i < rlist.size();i++){
int cid = rlist.get(i).getId();
this.rdao.delete(cid); //刪除操作
deletenodes(cid);
}
this.rdao.delete(id);
}