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

复制代码 代码如下:

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

时间: 2013-12-14

JS控件ASP.NET的treeview控件全选或者取消(示例代码)

复制代码 代码如下: <script language="javascript">   /*   函数名称:CheckNode(currentNode).ParentNode(currentNode).ChildNode(currentNode) 函数功能:实现带checkbox的treeview中   1.选中父结点其子结点也全部选中   2.取消全部子结点的选择后,父结点的选择也随之取消 使用方法:1.在<head></head>中间添加Chec

Javascript 实现TreeView CheckBox全选效果

复制代码 代码如下: function OnTreeNodeChecked() { var ele = event.srcElement; if (ele.type == 'checkbox') { var childrenDivID = ele.id.replace('CheckBox', 'Nodes'); var div = document.getElementById(childrenDivID); if (div != null) { var checkBoxs = div.getE

js编写的treeview使用方法

本文实例为大家分享了treeview使用方法,供大家参考,具体内容如下 1.所需文件:ftiens4.js,ua.js,XMLTree.js,以及一些树上的图片(文件下载处:http://www.treeview.net/),图片名字和位置如下图 2.其他页面(MainContent.aspx,NavTree.aspx)放置位置如下图所示: 3.关键页面的代码 3.1 MainContent.aspx代码 <%@ Page Language="C#" CodeFile="

js获取TreeView控件选中节点的Text和Value值的方法

在实际项目中,遇到一个问题,首先弹出一个新窗口,新窗口中放了一个TreeView控件,TreeView控件的数据绑定在我的上一篇随笔(TreeView绑定XML数据源C#代码示例)中有讲到,现在要解决的是,如何单击TreeView中一个节点,返回Text和Value到父页面并关闭该新窗口. 首先,在后台代码中为TreeView添加属性onclick以支持TreeView的客户端事件,代码如下: 复制代码 代码如下: if (!IsPostBack) { TreeView1.Attributes.

javascript-TreeView父子联动效果保持节点状态一致

我们大部分都用过TreeView控件,对这个控件的评价也是各式各样的,但是我觉得不论如何它是一个免费的开源的控件,所以我还是在用它.在刚接触ASP.NET的时候,记得需要做一个分配权限的权限树,当时只知道有这个树,经过一天的研究对其服务器端的行为基本以及搞清楚了,但是由于当时的js水平有限,所以对客户端的代码很畏惧,基本没有看过. 当时有这样一个要求:如果一个节点被选中则该节点的所有子节点都要选中,如果该节点的所有子节点取消选择则该节点也要取消选择(节点一致性),相反一样. 还有一个要求就是:如

选择TreeView控件的树状数据节点的JS方法(jquery)

方法要达到的效果是:" 改变一节点的选中状态时,其后代节点选中状态也要跟随当前节点的选中状态改变而改变.当前节点选中时,其所有祖先节点也要跟着选中;如取消时,要根据其同级节点是否有选中时,来决定其祖先节点的选中状态." 说明:树是用vs的TreeView控件生成的. 如图: 代码如下: 复制代码 代码如下: jQuery(function(){ jQuery(":checkbox").click(function(){ var objNode = this; var

Bootstrap树形菜单插件TreeView.js使用方法详解

jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

JS控制TreeView的结点选择

网上有很多控制TreeView的checkbox选中,但是自己尝试的时候,要么报错,要么不可行.以下这种写法是经过验证有效的,仅作参考,思维比较巧妙! Tree: <asp:TreeView ID="treeViewDapartment" runat="server" SelectedNodeStyle-BackColor="GrayText" onclick="javascript:NodeCheck();" Font

用js脚本控制asp.net下treeview的NodeCheck的实现代码

增加CheckBox联动的情况选择: 1.单选TreeView中的任一节点 2.当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动,父节点不变; 父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true. 3.当一节点CheckBox属性值改变时:子节点.父节点的CheckBox属性值跟随其改动; 父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的Chec

js获取Treeview选中的节点(C#选中CheckBox项)

方法网上有很多,试了一下都有瑕疵.最后找了个看上去代码比较少,比较顺眼的,测试结果报错说有几个函数不存在,于是设置断点调试,各个属性查找有用的字段,终于找到. 现整理如下: 首先,要想在javascript中获取treeview中带checkbox的节点,需要设置treeview节点的某些属性,我是在后台代码中添加的. 复制代码 代码如下: TreeNode newNode = new TreeNode(); newNode.Text = "showText"; newNode.Val

js 获取元素所有兄弟节点的实现方法

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

react.js 获取真实的DOM节点实例(必看)

为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="m

js获取RadioButtonList的Value/Text及选中值等信息实现代码

HTML代码 复制代码 代码如下: <asp:RadioButtonList ID="rbtnCompany" runat="server" RepeatColumns="4" RepeatDirection="horizontal"> <asp:ListItem Value="1" Text="A"></</SPAN>asp:ListItem&

JS获取鼠标选中的文字

js获取鼠标选中的文字代码如下所示: <html> <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js获取鼠标选中的文字</title> <SCRIPT LANGUAGE="JavaScript"> <!-- functi

C#中TreeView实现适合两级节点的选中节点方法

本文实例讲述了C#中TreeView实现适合两级节点的选中节点方法.分享给大家供大家参考.具体如下: class TreeViewChecked { bool isfirst = true; public TreeViewChecked(TreeView treeView) { treeView.AfterCheck += new TreeViewEventHandler(treeView_AfterCheck); treeView.AfterSelect += new TreeViewEven

jQuery插件zTree实现单独选中根节点中第一个节点示例

本文实例讲述了jQuery插件zTree实现单独选中根节点中第一个节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link re

ExtJS 刷新后如何默认选中刷新前最后一次选中的节点

在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点.这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上. 查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点. 完成的代码如下: 首先是extjs3.x版本中的方法: 复制代码 代码如下: //获取选中的节点 var node = tre

解决Jstree 选中父节点时被禁用的子节点也会选中的问题

问题描述: 最近用jstree遇到一个问题,父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. 修改checkbox插件配置,将cascade_to_disabled设置为false(注:需要将配置脚本放jstree.min.js的后面) <script src="./../../dist/jstree.min.js"></script> <script> $.jstree.de