1.先來介紹一下. dtree 的用法.(我引用了以前我收集的一篇文章.還比較詳細,出處不記得啦).文章下面會附帶dtree用法的例子.
Dtree目錄樹的總結
一:函數
1:頁面中
tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
參數說明:
id :節點自身的id
pid :節點的父節點的id
name :節點顯示在頁面上的名稱
url :節點的鏈接地址
title :滑鼠放在節點上所出現的提示信息
target :節點鏈接所打開的目標frame(如框架目標mainFrame,_blank,_self 類)
icon :節點關閉時的顯示圖片的路徑
iconOpen:節點打開時的顯示圖片的路徑
open :布爾型,節點是否打開(默認為false)
註:open項:頂級節點一般採用true,即pid是-1的節點
2:dtree.js文件中
約87-113行是一些默認圖片的路徑,注意要指對.
二:頁面中的書寫
1:默認值的書寫規則(從左至右,依次省略)
即 tree.add(id,pid,name,url);後面5個參數可以省略
2:有間隔時的默認值(如存在第6個參數,但第5個參數想用默認值)
即 tree.add(id,pid,name,url,"",target);必須這樣寫
3:樣式表
(1):可以將dtree.css中的樣式附加到你的應用中的主css中,如a.css
(2):也可以同時引用dtree.css與a.css兩個文件,但前提條件是兩個css文件中不能有重複的樣式
4:頁面代碼書寫的位置是:一般寫在表格的td之中
說明:這是靜態的代碼,動態的可用循環加入.其他 tree.add(id,pid,name,url,"","","","",true);
不羅嗦啦..上面的只是讓你大概了解一下.dtree怎麼用.
dtree JQuery動態生成樹.思路其實很簡單... 把樹的節點信息存儲到資料庫,然後在servlet或jsp中獲取資料庫表中的數據,把這些信息寫成在xml文件中.然後界面jsp頁面通過JQuery實現對改servlet的請求.並且回調方法中接受xml數據對象.並且遍歷xml文件,取得xml文件中的節點的屬性或文本數據.再循環的對dtree添加節點..
5. 將dtree.js 和dtree.css,jquery.js, img文件夾.放在WebRoot下面.(工程的根目錄)
6. 編寫我們的tree.jsp頁面.
Java代碼
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>樹形結構___ajax請求方式</title>
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="dtree.css" type="text/css"></link>
<script type="text/javascript">
tree = new dTree('tree');//創建一個對象.
$.ajax({
<A href="'NodesPrint'">url:'NodesPrint'</A>,
type:'post', //數據發送方式
dataType:'xml', //接受數據格式
error:function(json){
alert( "not lived!");
},
async: false ,//同步方式
success: function(xml){
$(xml).find("node").each(function(){
var nodeId=$(this).attr("nodeId");
var parentId=$(this).attr("parentId");
var hrefAddress=$(this).attr("hrefAddress");
var nodeName=$(this).text();
tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);
});
}
});
document.write(tree);
</script>
</head>
<body>
</body>
</html>
[火星人 ] Dtree Jquery動態生成樹節點已經有1056次圍觀