`
wangtao0501
  • 浏览: 54903 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

dtree树.可以动态加载节点

    博客分类：
  • js
prototypeVBExcelVB.NETASP.net 
阅读更多
更多内容请关注：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="&quot;+this.url+&quot;""+  (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="&quot; + (this.tree.Ident[i] == 0? this.Icons.line:this.Icons.empty)+&quot;" />";
}
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(&quot;+this.id+&quot;);" ><img src=""+(this.tree.Ident[this.depth] == 0? "img/minus.gif" mce_src="&quot;+(this.tree.Ident[this.depth] == 0? &quot;img/minus.gif" />" :"img/minusbottom.gif'  />")  : "<a href="javascript:tree.Show("+this.id+");" mce_href="javascript:tree.Show(&quot;+this.id+&quot;);" ><img src=""+(this.tree.Ident[this.depth] == 0? "img/plus.gif" mce_src="&quot;+(this.tree.Ident[this.depth] == 0? &quot;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">
1
顶
0
踩
分享到：
| ２００９十大网络流行语　中英文对照读本（ ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    我修改的dtree，可以动态增加，修改，删除

    我在网上查了很多关于树的资料，最后选择了dtree，感觉他小巧，而且还挺耐看，但是不支持动态加载，添加，修改，删除，于是自己在网上查资料，也参考别人的，也自己写了一些，最终终于是的dtree可以动态加载，...

    dtree api.rar

    文件中包含dtree的源文件、api、例子。树主要在后台管理中用的较多，前台很少用。树的节点过多时会受到浏览器的阻止，弹出一会使系统变慢的对话框很影响使用，所以不要一次性将所有元素加载到页面中。

    带节点点击事件的DTree

    非常简单实用的js树，添加了节点点击事件，可以动态绑定数据，可以动态加载数据，可以点击加载数据

    dtree-checkbox-muchlin修改版

    3、添加css文件自动加载方法，使用时只需在head区引用dtree-ck.compress.js。 4、添加获取选中节点、名称、值、数量的方法 getSelectedNodes()： getSelectedNodes()['nodes']：获取选中节点，dTree节点对象数组 ...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。 大概效果如图 体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”...

    xloadtree无限极ajax tree

    将加载完后出现的子级菜单用JS保存在客户端，下载再点 + 的时候，不从数据库直接去，和CSDN的树菜单相似，主要用到的插件是：xloadtree，解决了其他常用的属性设置，如点击节点后的页面跳转，也就是target属性， ...

    Ext学习必备，涵盖大量实例，插件，其他有用组件

    这个包是在之前包的基础上多加了很多功能。 原来的内容： 1ext2.2源码及例子 2深入浅出extJs例子 3自己写的例子 470过个插件 新增内容： ...4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图编辑器

    ctreetable

    根据dtree控件修改而来，数据一次性载入，页面节点可动态加载,表格及下拉框支持单选和复选,有示例代码.注意：已有更新版本免分下载，谢谢支持！

    CTreeTable的详细文档

    CTreeTable的详细文档，带两个Sample。内含CTreeTable_v2.07和...CTreeTable根据dtree控件修改而来，数据一次性载入，页面节点可动态加载。表格及下拉框支持单选和复选。谢谢支持！ 最新版本为2.08b已经提供下载。

    JAVA上百实例源码以及开源项目

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

    JAVA上百实例源码以及开源项目源代码

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

Magicbox
Global site tag (gtag.js) - Google Analytics