动态加载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实时获取系统当前时间实例代码
Jun 28 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
Vue实现简易计算器
Feb 25 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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 面向对象的一个例子
2011/04/12 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python实现simhash算法实例
2014/04/25 Python
python获取文件扩展名的方法
2015/07/06 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Pyqt5自适应布局实例
2019/12/13 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
露营世界:Camping World
2017/02/02 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
优秀教师工作感言
2014/02/16 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书