萬盛學電腦網 >> 腳本專題 >> javascript >> 動態加載dtree.js樹treeview
動態加載dtree.js樹treeview
本篇文章主要是對動態加載dtree.js樹treeview的示例代碼進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
代碼如下: <!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"> <!-- 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> <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'> <!-- d = new dTree('d'); d.add(0,-1,'My example tree');");//這裡結束一段長字符穿類型 // 我們開始循環DataTable for (int i = 1; i < dt.Rows.Count; i++) { //我們又開始添加長文件類型 大家這裡注意了拼接字符穿 //的時候要仔細點 strbu.Append(@" d.add(" + i + "," + dt.Rows["pid"] + ",'" + dt.Rows["name"] + "','" + dt.Rows["url"] + "','" + dt.Rows["target"] + "','" + dt.Rows["icon"] + "','"+ dt.Rows["iconopen"]+"');"); } //再次添加長文件類型 strbu.Append(@"document.write(d); --> </script> </div> "); //長文件類型添加結束 //現在我們保留靜態文本的text值就等於 我們剛才的長文件類型的值 lit.Text = Convert.ToString(strbu); //那麼我們在想 我怎麼把個段文本放到<body> //<form>這個位置呢</form><boy> form1.InnerHtml = ""; //我們可以直接從.cs文件裡面獲得form1然後.Controls.Add() //他只能放靜態文本所以我們把剛才長文件類型的值賦給了靜態文本 //那麼我們這裡也就可以直接添加進來了 form1.Controls.Add(lit); }javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved