dtree树.可以动态加载节点

最新推荐文章于 2021-02-16 06:38:55 发布
最新推荐文章于 2021-02-16 06:38:55 发布
阅读量199 收藏
点赞数
分类专栏： js 文章标签： prototype VB Excel VB.NET ASP.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oceans0501/article/details/83527594
版权
更多内容请关注：http://www.shangdiren.com 

     function Node(name,url,ico,iconOpen,display,guid,type,hasChild)
{
   this.id = NaN;
this.name = name;
this.url = !url ? this.name : "<a href=""+this.url+"" mce_href=""+this.url+"""+  (this.config.target ? "target='"+this.config.target+"'":'')+ (this.config.useStatusText?" onmouseover=\"window.status='"+ this.name + "';return true;\" onmouseout=\"window.status='';return true;\"" :'' ) + " ></a>"+this.name+"</a>";
this.ico = ico;
this.iconOpen = iconOpen;
this.Childs = [];
this.display = display;
this.guid = guid;
this.type = type;
this.tree = NaN;
this.parent = NaN;
this.depth = NaN;
this.hasLoad = !(hasChild == undefined || hasChild) ;
this.innerHTML = null;
}

function Tree()
{
this.ParentNode = NaN;
this.Ident = [];
this.index = NaN;
this.selectedNode = null;
}

Node.prototype.Icons = {
root	 : 'img/base.gif',
folder	 : 'img/folder.gif',
folderOpen	: 'img/folderopen.gif',
node	 : 'img/page.gif',
empty	 : 'img/empty.gif',
line	 : 'img/line.gif',
join	 : 'img/join.gif',
joinBottom	: 'img/joinbottom.gif',
plus	 : 'img/plus.gif',
plusBottom	: 'img/plusbottom.gif',
minus	 : 'img/minus.gif',
minusBottom	: 'img/minusbottom.gif',
nlPlus	 : 'img/nolines_plus.gif',
nlMinus	 : 'img/nolines_minus.gif'
}
Node.prototype.config = {
   target : 'child',
   useSelection  : true,
   closeSameLevel : true,
   useStatusText  : true
}

Node.prototype.AddNode = function(name,url,ico,iconOpen,display,guid,type,hasChild)
{
var node = new Node(name,url,ico,iconOpen,display,guid,type,hasChild); 
node.parent = this;
node.tree = this.tree;
node.depth = this.depth+1;
this.hasLoad = true;
node.id = ++this.tree.index;
this.Childs[this.Childs.length] = node;
};
Tree.prototype.Show = function(id)
{
   this.SelectNode(this.ParentNode,id);
   this.selectedNode.display = true;
   if(!this.selectedNode.hasLoad)
   {
      this.selectedNode.Load();
   }
   else
   {    
       this.selectedNode.innerHTML = this.selectedNode.toString();
       this.selectedNode = null;
       DrawTree();	        
   }
}
Tree.prototype.Close = function(id)
{
   this.SelectNode(this.ParentNode,id);
   this.selectedNode.display = false;
   this.selectedNode = null;
   document.getElementById("div1").innerHTML = tree;
}

Node.prototype.CloseAll = function()
{
this.display = false;
}
Node.prototype.Load = function()
{
   var xmlHttp = window.ActiveXObject ? new ActiveXObject("microsoft.XMLHTTP") : new XMLHttpRequest();
   var url =  "GetTreeNode.ashx?type=" +this.type+"&guid="+this.guid;
   xmlHttp.open('GET',url,true);
   xmlHttp.onreadystatechange = function()
   {
       if(xmlHttp.readyState == 4 )
       {   
           if(xmlHttp.status == 200)
           {
       	    var xmlDoc = xmlHttp.responseXML;
       	    var root = xmlDoc.documentElement;
       	    if(root != null)
       	    {
       	        for(var i=0;i<root.childNodes.length;i++)
       	        {
       	            var node = root.childNodes[i];
       	            var hasChild = node.childNodes[3].text == 'true' ? true:false;
       	            tree.selectedNode.AddNode(node.childNodes[0].text,'1','folder','folderOpen',false,node.childNodes[1].text,node.childNodes[2].text,hasChild);
       	        }
       	    }
       	    tree.selectedNode.hasLoad = true;
       	    tree.selectedNode.innerHTML = tree.selectedNode.toString();
       	    tree.selectedNode = null;
       	    DrawTree();
       	}
       }
   }
      xmlHttp.send(null);
}

Node.prototype.ShowAll = function()
{
for(var i=0;i<this.Childs.Length;i++)
{
this.Childs[i].display = true;
}
}

//本来想通过递归循环的方式去实现，发现挺麻烦的。
Node.prototype.toString = function()
{
var str ="<div class='dTreeNode'>";
for(var i=0;i<this.depth;i++)
{
str += "<img src="" + (this.tree.Ident[i] == 0? this.Icons.line:this.Icons.empty)+"" mce_src="" + (this.tree.Ident[i] == 0? this.Icons.line:this.Icons.empty)+"" />";
}
if( this.depth == 0 )
{
str += this.display ? "<a href="javascript:tree.Close(0);" mce_href="javascript:tree.Close(0);" ><img src= '"+this.Icons.nlMinus+"'/></a>" : "<a href="javascript:tree.Show(0);" mce_href="javascript:tree.Show(0);" ><img src= '"+this.Icons.nlPlus+"'/></a>";
}
else
{
   if(this.Childs.length == 0 && this.hasLoad)
   {
       str += (this.tree.Ident[this.depth] == 0 ? "<img src= 'img/join.gif' />" : "<img src= 'img/joinbottom.gif' />" ) ;
   } 
   else
   {
       str += this.display ? "<a href="javascript:tree.Close("+this.id+");" mce_href="javascript:tree.Close("+this.id+");" ><img src=""+(this.tree.Ident[this.depth] == 0? "img/minus.gif" mce_src=""+(this.tree.Ident[this.depth] == 0? "img/minus.gif" />" :"img/minusbottom.gif'  />")  : "<a href="javascript:tree.Show("+this.id+");" mce_href="javascript:tree.Show("+this.id+");" ><img src=""+(this.tree.Ident[this.depth] == 0? "img/plus.gif" mce_src=""+(this.tree.Ident[this.depth] == 0? "img/plus.gif"  />" :"img/plusbottom.gif'  />") ;
       str += "</a>";
   }
}
str +=  "<img src= '"+this.Icons[this.display? this.iconOpen:this.ico] +"'/>";
str += this.url;
str += "</div>"
if(this.display)
{
   for(var i=0;i<this.Childs.length;i++)
   {
   this.tree.Ident[this.depth+1] = (i == this.Childs.length-1 ? 1:0);
   str += this.Childs[i].toString();
   }
}
this.innerHTML = str;
return str;
}
Tree.prototype.toString = function()
{
var str = "<div class='dtree'>";
str += this.ParentNode.toString();
str += "</div>";
return str;
} 
Tree.prototype.SelectNode = function(node,id)
{
   if(node.id == id)
   {
       this.selectedNode = node;
       return;
   }

   for(var i=0;i<node.Childs.length;i++)
   {
       this.SelectNode(node.Childs[i],id);
       if(this.selectedNode != null)
       {
           return;
       }
   }
}

Tree.prototype.InitParent = function(node)
{
node.parent = NaN;
node.id = 0;
node.depth = 0;
node.tree = this;
this.index = 0;
this.Ident[0] = 1;
this.ParentNode = node;
}  
function DrawTree()
{
            document.getElementById("div1").innerHTML = tree;
}
function LoadAll(node)
{
   if(!node.hasLoad)
   {
       tree.Show(node.id);
   }
   for(var i=0;i<node.Childs.length;i++)
   {
       LoadAll(node.Childs[i]);
   }
}


        protected void Page_Load(object sender, EventArgs e)
        {
            string str = System.Configuration.ConfigurationManager.AppSettings["sqlConnect"];
            DataSet ds = new DataSet();
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["sqlConnect"]))
            {
                try
                {
                    con.Open();
                    SqlDataAdapter adp = new SqlDataAdapter("select top 2 * from province;select * from city;select * from area",con);
                    adp.Fill(ds);
                    sb.Append("<mce:script type='text/javascript' defer='defer'><!--
");
                    sb.Append("var tree = new Tree();");
                    sb.Append("tree.InitParent(new Node('全国省市','1','root','root',true,'1','1'));");
                    DataTable dtProc = ds.Tables[0];
                   </p>
        <p> <!--<A href="#">http://msnpiki.msnfanatic.com/index.php/Main_Page</A>--></p>
		<div id="ad_f4" class="ad_f4"><script src="/js/2009/ad/ad_f4.js"></script></div>
      <div id="ad_f10" class="ad_f10"><script src="/js/2009/ad/ad_f10.js"></script></div><div id="ad_f11" class="ad_f11"><script src="/js/2009/ad_f11.js"></script></div>
	  </div>
      <div align="center" class="pager w635px"><span id="pagesSpan">　<span id="1">1</span>　<a href="185188_2.html">2</a></span></div>
      <div class="fh b14 w635px"> 如果图片或页面不能正常显示请<a onClick="#" onMouseOver="this.style.cursor='hand';" class= "redlink"><font color="#990000"><strong>点击这里</strong></font></a>　站内搜索：
     <iframe id="baiduframe" marginwidth="0" marginheight="0" scrolling="no"
  framespacing="0" vspace="0" hspace="0" frameborder="0" width="280" height="21" 
  src="http://unstat.baidu.com/bdun.bsc?tn=diybl_pg&cv=0&cid=1061623&csid=541&bgcr=ffffff&urlcr=0000ff&tbsz=180&sropls=2,99&insiteurl=diybl.com&defid=99&kwgp=0&ch=1">
</iframe>
      </div>
      <div class="toollinks hui"> 【<A href="javascript:window.external.addFavorite(window.location,'MSN协议分析-DIY部落');">收藏此页</a>】【<A 
      href="http://www.diybl.com/course/webjsh/osgl/5589fdssd.html" target="_blank">BBS社区</A>】【<A href="#comment">发表评论</A>】【<a href="#">返回顶部</a>】【<A 
      href="javascript:window.close()">关闭</A>】 </div>
      <div class="p_bottom">

                     <a href="/course/4_webprogram/asp.net/netjs/20091221/185187.html">上一篇文章:页面间传参的方法</a>
                                      <br>
                                        <a href="/course/4_webprogram/asp.net/netjs/20091221/185189.html">下一篇文章:Win7下安装SQL Server2005</a>
                         </div>
    </div>
    <!--content area end!-->
    <div class="fc"></div>
    <div class="left-contect mtop blue border">
      <div class="b14 bold fh left-width">推荐文章</div>
    </div>
    <div class="left-contect white border recommend">
      <div class="tj_l fh20 white"> 
       <UL>

                                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/200855/113165.html" target="_blank">nplot用法（线、柱、标签、移..</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/2008628/128934.html" target="_blank">ASP.NET中应用Excel：(5)..</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20090916/175385.html" target="_blank">web developer tips (48):..</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20090316/161875.html" target="_blank">[VB.NET源码]软件安装管..</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/2007930/75604.html" target="_blank">VB使用WinInet API创建简..</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/2007113/82443.html" target="_blank"> PE文件格式</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20091215/184776.html" target="_blank">多线程CreateThread函数..</a></LI>
                              <LI>  <a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20071222/93258.html" target="_blank">Delphi2007企业版破解</a></LI>
                 </UL></div>
      <div class="tj_r fh20 white"> 
      <ul>
                                               <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20071020/78353.html" target="_blank">C++ Builder里面保持控件..</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20091126/183460.html" target="_blank">label控件应用</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/2008313/104606.html" target="_blank">页面传值的方法</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20091027/180318.html" target="_blank">c# 下载千千静听歌词</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/2008219/100165.html" target="_blank">EXCEL文件的SQL语句</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20091115/182526.html" target="_blank">11.如何生成静态页面的五..</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/2007101/75798.html" target="_blank">Administrator用户直接获..</a></li>
                                <li><a href="http://www.diybl.com/course/4_webprogram/asp.net/netjs/20091126/183467.html" target="_blank">C#中获取文件夹的名称</a></li>
                        </ul> 
      </div>
    </div>
    <div class="fc"></div>
    <div class="left-contect mtop gray border-hui">
      <div class="b14 bold fh left-width"><a name="comment"></a>文章评论</div>
    </div>
    <div class="left-contect border-hui">
	  <div id="divComment" class="left-width fh"></div>
    </div>
    <div class="fc"></div>
    <div class="comment_1 mtop border w_l">
      <div class="blue fh b14 bold pleft">请您留言</div>
      <div class="cleanblock fh22">
        昵称：
         <input name="tbName" id="tbName" class="input input_comment" type="text" size="15" value="" onclick="this.focus();this.select()"maxlength="20"/>        
        <br />
		<span style="float:left;">验证码：<input name="tbCode" id="tbCode" class="input input_comment" type="text" size="6"  /></span><span id="spanCode" style=" float:left; clear:right; "><img  id="Img2" onclick="this.src=this.src"  style="display:none;"/></span>
        <a href="http://user.diybl.com/register.aspx" target="_blank"><font color=red><br />
        注册会员</font></a> <a href="http://user.diybl.com/login.aspx" target="_blank">会员登陆</a> <br />
        <textarea name="tbContent" id="tbContent" rows="6" class=" input" style="VERTICAL-ALIGN: text-top; WIDTH:290px; HEIGHT: 7em">
oceans0501
关注
专栏目录
自定义dtree.js加载数据的方式
pow8368684的专栏
03-13 909
1.问题：在使用dtree.js的过程中，经常遇到需要加载大数据的情况，可是一次性加载数据太多的情况下会导致网页卡死。 2.处理逻辑：所有就需要分批加载或者动态加载，先加载一部分数据，通过拖动条拖动或者点击子节点按钮，继续加载下一个节点的数据。 3.难处：dtree.js就算动态加载数据，也只是把新数据动态加到他的缓存数组了，如果把新数据显示到网页上的话，dtree.js会刷新所有数据，也就是...
dtree支持动态添加,删除节点
08-09
dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点
Dtree+JQuery动态加载树
lvhongfen的专栏
05-09 1718
我的动态树加载是从网上查找的资料然后做出来的，有意见或建议还望大家海涵！//页面显示
[网络收集]动态加载dtree.js树treeview
weixin_30834019的博客
11-12 92
<!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&gt...
java dtree_dtree实现动态加载树形菜单，动态插入树形菜单
weixin_31000273的博客
02-16 172
packagecom.dtree.test;importjava.sql.Connection;importjava.sql.PreparedStatement;importjava.sql.ResultSet;importjava.sql.SQLException;importjava.util.ArrayList;importjava.util.List;public classOrganiz...
dtree(AJAX动态载入)
12-05
dtree 修改 AJAX动态载入 简单的测试环境，不需要复杂的其他东西和数据库设计 下载放到TOMCAT下就可以使用。稍微修改就能用到自己的应用里面。 注释在 dtree.js 中的 dTree.prototype.o 方法里面。 修改了 dTree.prototype.o方法，小修改，把整块去了跟原来的一模一样。 没有大的改动。
dtree所需要的dtree.css和dtree.js文件（包括图标）
11-22
它包括了节点的创建、操作、事件处理等逻辑，使得可以通过JavaScript动态地加载、操作和交互树形数据。开发者需要对JavaScript有一定的理解，才能有效利用这个库来处理数据结构，并通过调用API实现各种功能，如添加...
动态加载dtree.js树treeview(示例代码)
10-26
根据提供的文件内容，这篇文章主要讨论了如何使用JavaScript库dtree.js来动态生成一个树形结构（或者说树状视图，Tree View），并提供了一个具体的示例代码。以下是关于这一主题的知识点分析： ### 1. dtree.js介绍...
Dtree+Jquery动态生成树节点.
05-28
- **交互与更新**：当服务器返回新数据时，可以通过DTree提供的API动态添加、删除或更新树节点。 6. **优化与性能**：在实际应用中，可能需要考虑性能问题，如大量数据一次性加载可能导致页面卡顿，这时可以采用懒...
Dtree+Jquery动态生成树节点
04-25
在IT领域，动态生成树节点是一项常见的需求，特别是在构建用户...动态生成树.rar"可能是实际的代码示例，"dtree参数说明..rar"则可能包含了DTree各种参数的详细解释，这些资源对于理解和应用DTree都是非常有价值的。
jquery整合dtree 动态加载树形结构，提高效率
11-21
jquery整合dtree 动态加载树形结构， 本人这段时间正巧要做一个省市县的树状结构图，公司之前用的dtree实现起来效率太低，半天打不开页面，于是考虑用jquery动态加载，通过网上查资料，学习别人的列子，现将本人所整理的树状结构实例上传。测试数据库为mysql，代码里面有建表语句与测试数据，可直接发布运行查看该例子。有对这颗树的增删改查。
我修改的dtree，可以动态增加，修改，删除
07-21
这段时间公司要做一个树，我在网上查了很多关于树的资料，最后选择了dtree，感觉他小巧，而且还挺耐看，但是不支持动态加载，添加，修改，删除，于是自己在网上查资料，也参考别人的，也自己写了一些，最终终于是的dtree可以动态加载，修改，删除了，因为是用在公司里的项目里，所以不能把整个项目传上去，值上传dtree，其实主要还是dtree.prototype.o()这个方法最关键。供大家参考。
dtree+ajax异步加载树
04-02
dtree+ajax异步加载树，请按照自己的需求修改
最全的DTREE的说明文档和例子
12-06
我找的最全的DTREE动态树的例子和文档说明。欢迎下载
dtree实现动态加载树形菜单，动态插入树形菜单
weixin_33842328的博客
11-14 149
1.导入  dtree文件    dtree.css   img文件夹   dtree.js   2. 建立对应 的数据库      1      父ID     name    id 3    建立连接类     mysql   例子 package com.dtree.test; import java.sql.Connection; import java.sql.Driver...
dtree.js改写，实现树状节点动态添加(解析树状htmll生成xml字符串)
BeautyOfJava的专栏
03-22 399
1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子.         Dtree目录树的总结                  一：函数                           1：页面中                              tree.add(id,pid,name,url,ti...
Ajax+dtree实现动态加载无刷新树
热门推荐
Fantasy
03-28 1万+
   今天研究了很久，终于把动态加载无刷新树给整出来了，反正刚开始也是在网上搜了很多东东，但感觉都不太方便，最后找到了dtree，又发现一位朋友把dtree的源代码进行了更改，（dtree发布于2003年，那时编写这个javascript脚本的作者估计还不知道ajax这玩意吧，呵呵），就可以实现无刷新动态加载了，废话不说，先把例子整理出来先！首先是Sql脚本（MSSQL） IF E
Dtree+jQuery动态树节点生成教程与用法详解
通过这些步骤，你可以根据需要在页面上动态构建Dtree树形结构，并定制节点的外观和行为。在实际应用中，你还需要结合jQuery的事件处理功能来实现节点的动态加载、展开与折叠等交互效果。记得在开发过程中测试和调整...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值