动态加载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 相关文章推荐
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
vue2实现数据请求显示loading图
Nov 28 Javascript
switchery按钮的使用方法
Dec 18 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 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/06/04 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python判断两个对象相等的原理
2017/12/12 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
基于python生成器封装的协程类
2019/03/20 Python
django的model操作汇整详解
2019/07/26 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python用SSH连接到网络设备
2021/02/18 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
个人求职信范文分享
2014/01/06 职场文书
婚前财产公证书
2014/04/10 职场文书
大学学生个人总结
2015/02/15 职场文书
活动总结书怎么写
2015/05/11 职场文书
公司催款律师函
2015/05/27 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript