Dtree Jquery動態生成樹節點

火星人 @ 2014-03-09 , reply:0


  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>





[火星人 via ] Dtree Jquery動態生成樹節點已經有213次圍觀

http://www.coctec.com/docs/java/show-post-60450.html