快捷導(dǎo)航

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

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

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

<!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>

接下來我們可以分析我們要是想讓他動(dòng)態(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ù)庫建立一張表

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

首先我們建立一個(gè)數(shù)據(jù)庫連接類返回一個(gè)Dataset類型我是個(gè)人喜歡你們也可以直接返回一個(gè)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)鍵的一個(gè)就是注意.js文件的倒入和 .css文件的倒入我們可以用到Page.hearder.innerHTMl=""你要倒入的文件名

我們來看代碼

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

public void treeview()
{
//實(shí)力化一個(gè)長(zhǎng)字符串類型
StringBuilder strbu = new StringBuilder();
//我們?cè)谏梢粋€(gè)保留靜態(tài)文本的位置的類
Literal lit = new Literal();
//這里就是我們剛才提到的要把.js和.cs文件倒入的位置
//page.Header.InnerHtml的意思就是把這段文件引用放到html標(biāo)簽里的
// <head>這個(gè)之間</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文件放到長(zhǎng)字符串類型里面

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