复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<头>
<title>Destroydrop » JavaScript » 树</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</头>
<正文>
<div>
<p><a href="javascript: d.openAll();">全部打开</a> | <a href="javascript: d.closeAll();">关闭全部</a></p>
<脚本类型=“文本/javascript”>
<!--
d = new dTree('d');
d.add(0,-1,'我的示例树');
d.add(1,0,'节点1','example01.html');
d.add(2,0,'节点2','example01.html');
d.add(3,1,'节点1.1','example01.html');
d.add(4,0,'节点3','example01.html');
d.add(5,3,'节点1.1.1','example01.html');
d.add(6,5,'节点1.1.1.1','example01.html');
d.add(7,0,'节点4','example01.html');
d.add(8,1,'节点1.2','example01.html');
d.add(9,0,'我的图片','example01.html','这些年来我拍的照片','','','img/imgfolder.gif');
d.add(10,9,'冰岛之旅','example01.html','黄金瀑布和间歇泉图片');
d.add(11,9,'妈妈的生日','example01.html');
d.add(12,0,'回收站','example01.html','','','img/trash.gif');
文档.write(d);
//-->
</脚本>
</div>
<p></p>
</正文>
</html>
接下来我们可以分析我们希望让他动态的生成我们要怎么处理
我们可以看到下面的代码是生成树的关键:
复制代码代码如下:
<div>
<p><a href="javascript: d.openAll();">全部打开</a> | <a href="javascript: d.closeAll();">关闭全部</a></p>
<脚本类型=“文本/javascript”>
<!--
d = new dTree('d');
d.add(0,-1,'我的示例树');
d.add(1,0,'节点1','example01.html');
d.add(2,0,'节点2','example01.html');
d.add(3,1,'节点1.1','example01.html');
d.add(4,0,'节点3','example01.html');
d.add(5,3,'节点1.1.1','example01.html');
d.add(6,5,'节点1.1.1.1','example01.html');
d.add(7,0,'节点4','example01.html');
d.add(8,1,'节点1.2','example01.html');
d.add(9,0,'我的图片','example01.html','这些年来我拍的照片','','','img/imgfolder.gif');
d.add(10,9,'冰岛之旅','example01.html','黄金瀑布和间歇泉图片');
d.add(11,9,'妈妈的生日','example01.html');
d.add(12,0,'回收站','example01.html','','','img/trash.gif');
文档.write(d);
//-->
</脚本>
</div>
我们是不是可以把上面的代码写到.cs文件里面呢! 是可以的
首先我们必须在数据库中建立一张表
我们看下其实这里的这么多名称表字段个人觉得pid子节点(如果是0那么就是根节点,1子节点,3子节点的子节点) name要显示的url连接地址 title标题 icon关闭图片的路径iconopen打开图片的路径这里不介绍了大家可以试下我们详细的就是根据用户名进行判断大家也可以是把用户名换成是引用的字段我这里只是一个测试的所以下面就用了个字符串类型我们来动态加载树视图
首先我们建立一个数据库连接类返回一个数据集类型我个人喜欢你们也可以直接返回一个DataTable
复制代码代码如下:
私有数据集GetDt(字符串用户名)
{
string strConn="服务器=ZHOUYUN;数据库=Mytest;uid=sa;pwd=123456";
SqlConnection conn = new SqlConnection(strConn);
字符串 strSql = string.Format("
从树视图中选择*,其中用户名='{0}'",用户名);
SqlDataAdapter da = new SqlDataAdapter(strSql, conn);
数据集 ds = new 数据集();
da.Fill(ds);
返回ds;
}
然后我们先把生成书的js放到.cs文件里面来非常关键的一个就是注意.js文件的吸引和.css文件的作用我们可以不用Page.hearder.innerHTMl=""你要倒传入的文件名
我们查看代码
复制代码代码如下:
公共无效树视图()
{
//实力化一个长字符串类型
StringBuilder strbu = new StringBuilder();
// 我们在生成一个保留静态内容位置的类
文字点亮 = new Literal();
// 这里就是我们前面提到的.js和.cs文件引人注目的位置
//page.Header.InnerHtml的意思就是把文件引用放到html标签里的
// <head>这之间</head>
Page.Header.InnerHtml = @"<
链接 rel='StyleSheet' href='dtree.css' type='text/css'/>
<script type='text/javascript' src='dtree.js'></script>";//引人注目结束
string 用户名 = "zhangsan";
DataSet ds = GetDt(用户名.Trim());
数据表 dt = ds.Tables[0];
//我们现在开始把js文件放入长字符串类型里面
strbu.Append(@"<div class='dtree'>
<p><a href='javascript: d.openAll();'>全部打开</a> |
<a href='javascript: d.closeAll();'>关闭全部</a></p>
<脚本类型='文本/javascript'>
<!--
d = new dTree('d');
d.add(0,-1,'我的示例树');");//这里结束一段长字符穿类型
// 我们开始循环DataTable
for (int i = 1; i < dt.Rows.Count; i++)
{
//我们又开始添加长文件类型大家在这里注意了字符排列
//的时候要仔细一点
strbu.Append(@"
d.add(" + i + "," + dt.Rows["pid"] + ",'" +
dt.Rows["名称"] + "','" +
dt.Rows["url"] + "','" +
dt.Rows["目标"] + "','" +
dt.Rows["图标"] + "','"+
dt.Rows["iconopen"]+"');");
}
//再次添加长文件类型
strbu.Append(@"document.write(d);
-->
</脚本>
</div> "); //长文件类型添加结束
//现在我们保留静态文本的文本值就等于我们刚才的长文件类型的值
lit.Text = Convert.ToString(strbu);
// 那么我们在想我怎么把一段文本放到<body>
//<form>这个位置呢</form><boy>
form1.InnerHtml = "";
//我们可以直接从.cs文件里面获取form1然后.Controls.Add()
//他可以放静态文本所以我们把刚才长文件类型的值赋给了静态文本
//那么我们这里也可以直接添加进来了
form1.Controls.Add(lit);
}