动态加载dtree.js树treeview(示例代码)


Posted in Javascript onDecember 17, 2013
<!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 相关文章推荐
js从Cookies里面取值的简单实现
Jun 30 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
Express框架之connect-flash详解
May 31 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 #Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 #Javascript
js捕获鼠标滚轮事件代码
Dec 16 #Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 #Javascript
使用firebug进行调试javascript的示例
Dec 16 #Javascript
javascript和jquery修改a标签的href属性
Dec 16 #Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 #Javascript
You might like
php自定义时间转换函数示例
2016/12/07 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
javascript的函数作用域
2014/11/12 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python导入txt数据到mysql的方法
2015/04/08 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
基于python plotly交互式图表大全
2019/12/07 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
东方红海科技面试题软件测试方面
2012/02/08 面试题
质量工程师岗位职责
2013/11/16 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript