动态加载dtree,示例代码

作者: 关于计算机  发布:2019-09-12

复制代码 代码如下:

动态加载dtree.js树treeview

 本篇文章主若是对动态加载dtree.js树treeview的自己要作为榜样遵守规则代码实行了详尽的分析介绍,须要的爱侣能够恢复参谋下,希望对大家享有协理

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ";

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

}

 

本篇小说首如果对动态加载dtree.js树treeview的亲自去做代码进行了详实的解析介绍,需求的爱人能够回复参谋下,希望对...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ";
<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);
}

您大概感兴趣的篇章:

  • JS调节TreeView的结点选用
  • Bootstrap树形菜单插件TreeView.js使用方法详解
  • JS控件ASP.NET的treeview控件全选只怕撤回(示例代码)
  • js获取Treeview选中的节点(C#选中CheckBox项)
  • js获取TreeView控件选中节点的Text和Value值的必定要经过的道路
  • 用js脚本控制asp.net下treeview的NodeCheck的实现代码
  • 选用TreeView控件的树状数据节点的JS方法(jquery)
  • Javascript 实现TreeView CheckBox全选效果
  • javascript-TreeView爸爸和儿子联合浮动功用保持节点状态同样
  • js编写的treeview使用格局

本文由王中王开奖结果发布于关于计算机,转载请注明出处:动态加载dtree,示例代码

关键词: