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

2019-11-20 21:27:03

字體：大中小

來源：轉載

供稿：網友

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

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

我們可以看到如下代碼是生成樹的關鍵:

復制代碼代碼如下:

<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文件里面呢！是可以的

首先我們必須在數據庫建立一張表

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

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

復制代碼代碼如下:

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文件里面來非常關鍵的一個就是注意.js文件的倒入和 .css文件的倒入我們可以用到Page.hearder.innerHTMl=""你要倒入的文件名

我們來看代碼

復制代碼代碼如下:

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

string username = "zhangsan";
DataSet ds = GetDt(username.Trim());
DataTable dt = ds.Tables[0];
//我們現在開始把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> "); //長文件類型添加結束
//現在我們保留靜態文本的text值就等于我們剛才的長文件類型的值
lit.Text = Convert.ToString(strbu);
//那么我們在想我怎么把個段文本放到<body>
//<form>這個位置呢</form><boy>
form1.InnerHtml = "";
//我們可以直接從.cs文件里面獲得form1然后.Controls.Add()
//他只能放靜態文本所以我們把剛才長文件類型的值賦給了靜態文本
//那么我們這里也就可以直接添加進來了
form1.Controls.Add(lit);
}