Load the dtree.js treeview of sample code dynamically

  • 2020-03-30 00:54:45
  • OfStack


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

And then we can analyze if we want it to be dynamically generated what do we do with it

We can see that the following code is the key to the spanning tree:


<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 to the.cs file? It is ok to

First we must create a table in the database

So let's look at the fact that there are so many table fields here that I personally think the pid child node (if it's 0 then it's the root node, 1 child node, The child nodes of the 3 child nodes) name to display the name of the connection url address title title icon to close the picture path iconopen opened the path of the picture here is not we can try our most main was introduced in detail in the judgement is based on the username you also can be change the username to be referenced by field here are just a test so I use a string type let's dynamic loading the treeview

First we create a database connection class that returns a Dataset type that I personally like and you can also return a DataTable directly


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;
}

And then we're going to put our generated js into a.cs file and one of the key things to do is to notice that we're going to pour in the.js file and the.css file and we're going to use page.hearder.innerhtml ="" the file name that you're going to pour in

So let's look at the code


public void treeview()
{
//Empowers a long string type
StringBuilder strbu = new StringBuilder();
//We are generating a class that retains the location of the static text
Literal lit = new Literal();
//This is where we just mentioned to dump the.js and.cs files
//Page.header.innerhtml is what we mean by putting this file reference in the HTML tag
//<Head> Between this </ head>
Page.Header.InnerHtml = @"<
link rel='StyleSheet' href='dtree.css' type='text/css'/>
<script type='text/javascript' src='dtree.js'></script>";//Pour over
string username = "zhangsan";
DataSet ds = GetDt(username.Trim());
DataTable dt = ds.Tables[0];
//We're now going to start putting our js files into long string types
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');");//This ends with a long character crossing type
//We begin to loop the DataTable
for (int i = 1; i < dt.Rows.Count; i++)
{
//We're going to start adding long file types again and you'll notice the splicing here
//Be careful
strbu.Append(@"
d.add(" + i + "," + dt.Rows["pid"] + ",'" +
dt.Rows["name"] + "','" + 
dt.Rows["url"] + "','" + 
dt.Rows["target"] + "','" + 
dt.Rows["icon"] + "','"+
dt.Rows["iconopen"]+"');");
}
//Add the long file type again
strbu.Append(@"document.write(d);
-->
</script>
</div> "); //End of long file type addition
//Now we're going to keep the text value of the static text equal to the value of the long file type that we just had
lit.Text = Convert.ToString(strbu);
//So we were wondering how do I put a piece of text in <Body>
//<Form> What about this position? / 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 just assigned the value of the long file type to static text
//So we can just add it right here
form1.Controls.Add(lit);
}


Related articles: