快捷導(dǎo)航

動態(tài)加載dtree.js樹treeview(示例代碼)

更新時間：2013年12月17日 08:48:29 作者：

本篇文章主要是對動態(tài)加載dtree.js樹treeview的示例代碼進行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>

<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">

</script>
</div>
<p></p>
</body>
</html>

接下來我們可以分析我們要是想讓他動態(tài)的生成我們要怎么處理

我們可以看到如下代碼是生成樹的關(guān)鍵:

復(fù)制代碼代碼如下:

<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I've taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom's birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

我們是不是可以把上面的代碼寫到.cs文件里面呢！是可以的

首先我們必須在數(shù)據(jù)庫建立一張表

我們看下其實這里的這么多表字段個人覺得 pid子節(jié)點（如果是0那么就是根節(jié)點，1子節(jié)點，3子節(jié)點的子節(jié)點） name要顯示的名稱 url連接地址 title標(biāo)題 icon關(guān)閉圖片的路徑 iconopen打開圖片的路徑這里不詳細(xì)介紹了大家可以試下我們最主要的就是根據(jù)username 進行判斷大家也可以是把username換成是引用的字段我這里只是一個測試的所以就用了個字符串類型下面我們來動態(tài)加載treeview

首先我們建立一個數(shù)據(jù)庫連接類返回一個Dataset類型我是個人喜歡你們也可以直接返回一個DataTable

復(fù)制代碼代碼如下:

private DataSet GetDt(string username)
{
string strConn="server=ZHOUYUN;database=Mytest;uid=sa;pwd=123456";
SqlConnection conn = new SqlConnection(strConn);
string strSql = string.Format("
select * from treeview where username='{0}'",username);
SqlDataAdapter da = new SqlDataAdapter(strSql, conn);
DataSet ds = new DataSet();
da.Fill(ds);
return ds;

}

然后我們把先我們生成書的js放到.cs文件里面來非常關(guān)鍵的一個就是注意.js文件的倒入和 .css文件的倒入我們可以用到Page.hearder.innerHTMl=""你要倒入的文件名

我們來看代碼

復(fù)制代碼代碼如下:

public void treeview()
{
//實力化一個長字符串類型
StringBuilder strbu = new StringBuilder();
//我們在生成一個保留靜態(tài)文本的位置的類
Literal lit = new Literal();
//這里就是我們剛才提到的要把.js和.cs文件倒入的位置
//page.Header.InnerHtml的意思就是把這段文件引用放到html標(biāo)簽里的
// <head>這個之間</head>
Page.Header.InnerHtml = @"<
link rel='StyleSheet' href='dtree.css' type='text/css'/>
<script type='text/javascript' src='dtree.js'></script>";//倒入結(jié)束

string username = "zhangsan";
DataSet ds = GetDt(username.Trim());
DataTable dt = ds.Tables[0];
//我們現(xiàn)在開始把js文件放到長字符串類型里面

strbu.Append(@"<div class='dtree'>
<p><a href='javascript: d.openAll();'>open all</a> |
<a href='javascript: d.closeAll();'>close all</a></p>
<script type='text/javascript'>

</script>
</div> "); //長文件類型添加結(jié)束
//現(xiàn)在我們保留靜態(tài)文本的text值就等于我們剛才的長文件類型的值
lit.Text = Convert.ToString(strbu);
//那么我們在想我怎么把個段文本放到<body>
//<form>這個位置呢</form><boy>
form1.InnerHtml = "";
//我們可以直接從.cs文件里面獲得form1然后.Controls.Add()
//他只能放靜態(tài)文本所以我們把剛才長文件類型的值賦給了靜態(tài)文本
//那么我們這里也就可以直接添加進來了
form1.Controls.Add(lit);
}