Dynamically loading Dtree.js tree treeview

Source: Internet
Author: User

  This article is mainly on the dynamic loading Dtree.js tree TreeView sample Code for a detailed analysis of the introduction, the need for friends can come to the reference, I hope to help you.

The code is as follows: <! 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>     Next we can analyze If we want him to dynamically build what we're going to do with   we can see that the following code is the key to the spanning tree:   code as follows: <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>   Can we write the above code in the. cs file? Is OK   First we have to build a table in the database   We look at the fact that so many table fields here personally feel that the PID child node (if it is 0 then is the root node, 1 child nodes, 3 child nodes of the child node) name to display name URL connection address title Icon close the path of the picture Iconopen Open the path of the picture here is not a detailed introduction we can try our most important is based on the username to judge you can also be a reference to the username of the field I'm just a test here, so I used a string type. Now let's dynamically load the TreeView   First we set up a database connection class to return a DataSet type I'm a person like you can also directly return a DataTable   code as follows: 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;  }     Then we put the JS of the first generation of the book into the. cs file. One of the key is to notice. js file poured and. css file poured we can use the page.hearder.innerhtml= "" You want to pour in the filename   We look at Code   code as follows: public void TreeView () {//Strength a long string type StringBuilder Strbu = new StringBuilder (); Generates a class Literal lit = new Literal () that retains the position of the static text; Here is the position we just mentioned to pour the. js and. cs files into the//page. Header.innerhtml means to put this file reference into the HTML tag//<head> between </head> Page.Header.InnerHtml = @ "< link rel=" StyleSheet ' href= ' dtree.css ' type= ' text/css '/> <script the type= ' text/javascript ' src= ' ' dtree.js ' > "//pour over   string username =" Zhangsan "; DataSet ds = GETDT (username. Trim ()); DataTable dt = ds. Tables[0]; We now start to put the JS file into the long string type inside   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 '); /here ends a long character wear type//We start the Loop DataTable for (int i = 1; i < dt.) Rows.Count; i++) {//We are starting to add long file types Here we note that stitching characters should be carefully strbu when they are worn//. Append (@ "D.add" + i + "," + dt.) rows["pid" + ", '" + dt. rows["name"] + "', '" +  dt. rows["url"] + "', '" +  dt. rows["target"] + "', '" +  dt. rows["icon"] + "', '" + dt. rows["Iconopen"]+ ""); Add long file type Strbu again. Append (@ "document.write (d);--> </script> </div>"); Long file type add end//Now we keep the text value of the static literal equal to the value of the long file type we just lit. Text = convert.tostring (Strbu); So we're wondering how I can put a piece of text in the position of <body>//<form> </form><boy> Form1. InnerHtml = ""; We can get Form1 directly from the. cs file and then. Controls.Add ()//he can only put static text so we assign the value of the long file type to the static text//Then we can add it directly to the Form1. Controls.Add (lit); }  
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.