複製程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<頭>
<title>Destroydrop » JavaScript » 樹</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</頭>
<正文>
<div>
<p><a href="javascript: d.openAll();">全部打開</a> | <a href="javascript: d.closeAll();">關閉全部</a></p>
<腳本類型=“文字/javascript”>
<!--
d = new dTree('d');
d.add(0,-1,'我的範例樹');
d.add(1,0,'節點1','example01.html');
d.add(2,0,'節點2','example01.html');
d.add(3,1,'節點1.1','example01.html');
d.add(4,0,'節點3','example01.html');
d.add(5,3,'節點1.1.1','example01.html');
d.add(6,5,'節點1.1.1.1','example01.html');
d.add(7,0,'節點4','example01.html');
d.add(8,1,'節點1.2','example01.html');
d.add(9,0,'我的圖片','example01.html','這些年來我拍的照片','','','img/imgfolder.gif');
d.add(10,9,'冰島之旅','example01.html','黃金瀑布與間歇泉圖片');
d.add(11,9,'媽媽的生日','example01.html');
d.add(12,0,'回收站','example01.html','','','img/trash.gif');
文檔.write(d);
//-->
</腳本>
</div>
<p></p>
</正文>
</html>
接下來我們可以分析我們希望讓他動態的生成我們要怎麼處理
我們可以看到下面的程式碼是生成樹的關鍵：
複製程式碼如下：
<div>
<p><a href="javascript: d.openAll();">全部打開</a> | <a href="javascript: d.closeAll();">關閉全部</a></p>
<腳本類型=“文字/javascript”>
<!--
d = new dTree('d');
d.add(0,-1,'我的範例樹');
d.add(1,0,'節點1','example01.html');
d.add(2,0,'節點2','example01.html');
d.add(3,1,'節點1.1','example01.html');
d.add(4,0,'節點3','example01.html');
d.add(5,3,'節點1.1.1','example01.html');
d.add(6,5,'節點1.1.1.1','example01.html');
d.add(7,0,'節點4','example01.html');
d.add(8,1,'節點1.2','example01.html');
d.add(9,0,'我的圖片','example01.html','這些年來我拍的照片','','','img/imgfolder.gif');
d.add(10,9,'冰島之旅','example01.html','黃金瀑布與間歇泉圖片');
d.add(11,9,'媽媽的生日','example01.html');
d.add(12,0,'回收站','example01.html','','','img/trash.gif');
文檔.write(d);
//-->
</腳本>
</div>
我們是不是可以把上面的程式碼寫到.cs檔裡面呢！
首先我們必須在資料庫中建立一張表
我們看下其實這裡的這麼多名稱表字段個人覺得pid子節點（如果是0那麼就是根節點，1子節點，3子節點的子節點） name要顯示的url連接地址 title標題 icon關閉圖片的路徑iconopen打開圖片的路徑這裡不介紹了大家可以試下我們詳細的就是根據用戶名進行判斷大家也可以是把用戶名換成是引用的字段我這裡只是一個測試的所以下面就用了個字符串類型我們來動態載入樹視圖
首先我們建立一個資料庫連線類別回傳一個資料集類型我個人喜歡你們也可以直接回傳一個DataTable
複製程式碼如下：
私有資料集GetDt（字串使用者名稱）
{
string strConn="伺服器=ZHOUYUN;資料庫=Mytest;uid=sa;pwd=123456";
SqlConnection conn = new SqlConnection(strConn);
字串 strSql = string.Format("
從樹狀視圖中選擇*，其中使用者名稱='{0}'"，使用者名稱）；
SqlDataAdapter da = new SqlDataAdapter(strSql, conn);
資料集 ds = new 資料集();
da.Fill(ds);
返回ds；
}
然後我們先把生成書的js放到.cs檔案裡面來非常關鍵的一個就是注意.js檔案的吸引和.css檔案的作用我們可以不用Page.hearder.innerHTMl=""你要倒傳入的文件名
我們查看代碼
複製程式碼如下：
公共無效樹視圖（）
{
//實力化一個長字串類型
StringBuilder strbu = new StringBuilder();
// 我們在產生一個保留靜態內容位置的類
文字點亮 = new Literal();
// 這裡就是我們前面提到的.js和.cs檔引人注目的位置
//page.Header.InnerHtml的意思就是把檔案引用放到html標籤裡的
// <head>這之間</head>
Page.Header.InnerHtml = @"<
連結 rel='StyleSheet' href='dtree.css' type='text/css'/>
<script type='text/javascript' src='dtree.js'></script>";//引人注目結束
string 使用者名稱 = "zhangsan";
DataSet ds = GetDt(使用者名稱.Trim());
資料表 dt = ds.Tables[0];
//我們現在開始把js檔案放入長字串型裡面
strbu.Append(@"<div class='dtree'>
<p><a href='javascript: d.openAll();'>全部開啟</a> |
<a href='javascript: d.closeAll();'>關閉全部</a></p>
<腳本類型='文字/javascript'>
<!--
d = new dTree('d');
d.add(0,-1,'我的範例樹');");//這裡結束一段長字穿型
// 我們開始循環DataTable
for (int i = 1; i < dt.Rows.Count; i++)
{
//我們又開始加入長文件類型大家在這裡注意了字元排列
//的時候要仔細一點
strbu.Append(@"
d.add(" + i + "," + dt.Rows["pid"] + ",'" +
dt.Rows["名稱"] + "','" +
dt.Rows["url"] + "','" +
dt.Rows["目標"] + "','" +
dt.Rows["圖示"] + "','"+
dt.Rows["iconopen"]+"');");
}
//再次新增長文件類型
strbu.Append(@"document.write(d);
-->
</腳本>
</div> "); //長檔案類型新增結束
//現在我們保留靜態文字的文字值就等於我們剛才的長文件類型的值
lit.Text = Convert.ToString(strbu);
// 那我們在想我怎麼把一段文字放到<body>
//<form>這個位置呢</form><boy>
form1.InnerHtml = "";
//我們可以直接從.cs檔案裡面取得form1然後.Controls.Add()
//他可以放靜態文字所以我們把剛才長文件類型的值賦給了靜態文本
//那我們這裡也可以直接加入了
form1.Controls.Add(lit);
}