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

dtree树.可以动态加载节点

    博客分类:
  • js
阅读更多
更多内容请关注: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.js + dtree.css

    1. 动态渲染:可以根据需要动态添加、删除或修改节点,使界面实时更新。 2. 事件处理:提供了丰富的事件接口,如点击、展开、折叠等,方便进行交互逻辑的实现。 3. 自定义样式:允许开发者通过CSS进行个性化定制,以...

    Dtree+Jquery动态生成树节点

    在IT领域,动态生成树节点是一项常见的需求,特别是在构建用户...动态生成树.rar"可能是实际的代码示例,"dtree参数说明..rar"则可能包含了DTree各种参数的详细解释,这些资源对于理解和应用DTree都是非常有价值的。

    dtree api.rar

    - `loadData(data)`: 用于动态加载树节点数据,`data`是一个JSON对象数组,每个对象代表一个节点,包含ID、文本、子节点等属性。 - `appendData(data)`: 在现有树的基础上添加新的节点数据。 - `insertData(data,...

    封装的dTree.js文件动态创建树形菜单

    本篇文章将详细讲解如何利用封装的dTree.js文件,结合EL(Expression Language)表达式来动态创建树形菜单。 dTree.js是一个轻量级的JavaScript库,专门用于构建交互式的树形菜单。它提供了丰富的API和配置选项,...

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

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

    ajax,servlet动态加载dtree

    在本项目"ajax,servlet动态加载dtree"中,我们看到的是利用Ajax技术和Servlet实现dtree(一种树形菜单控件)的动态加载。这个项目可能是一个文件管理系统或者目录浏览应用,其中dtree用于展示文件或目录结构,而...

    dtree动态生成树

    例如,`onClick`事件可以监听节点点击,`onCheck`事件可以处理节点的选中状态变化,`loadData`方法用于动态加载数据等。 总之,dtree作为jQuery的一个插件,提供了丰富的功能来构建动态生成树,适用于各种需要展示...

    下拉树 dtree.rar

    - **异步加载**:如果数据量很大,可以采用异步加载技术,只在用户展开特定节点时加载其子节点,提高页面性能。 4. **库和框架**:虽然可以手动编写所有这些功能,但通常我们会使用现有的JavaScript库或框架,如...

    Dtree树菜单 动态树

    动态树形菜单意味着菜单项可以根据用户的交互或者服务器的数据动态地加载和更新。这种特性使得DTree适用于处理大量数据或数据频繁变化的情况,避免一次性加载所有节点导致页面性能下降。 DTree通常基于JavaScript和...

    带节点点击事件的DTree

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

    Dtree目录树下载

    了解并熟练掌握这些API是使用DTree的关键,它允许开发者实现动态加载数据、响应用户操作、实现树的异步加载等多种高级功能。 `example01.html`是一个示例文件,展示了DTree的基本用法。通过查看这个例子,开发者...

    dtree_JQuery实例.动态生成树

    动态生成树”这个项目是一个很好的学习资源,它展示了如何使用jQuery和dtree插件来创建具有动态加载和交互功能的树形结构。通过这个实例,开发者可以深入了解如何将静态HTML转化为生动的、响应式的用户界面元素,这...

    dtree树形菜单的简单使用举例

    - **异步加载**:对于大型数据集,可以配置`dtree`以在需要时异步加载子节点,提高页面性能。 - **自定义样式**:通过CSS样式调整菜单的外观,使其与网站设计保持一致。 - **节点操作**:添加、删除和编辑节点功能,...

    动态和高性能的DTREE树

    动态加载DTREE解决了这个问题,它只在需要时加载部分数据或节点,从而降低内存消耗。这种方法可以提高系统的效率和可扩展性,使得处理大规模数据变得更加可行。实现上,可能会采用懒加载(Lazy Loading)策略,只有...

    dtree+jquery 动态实现无限树形菜单 (包括增删改查)

    在dtree中,可以通过调用特定的API方法,如`appendNode()`或`insertNode()`,向现有树结构中添加新的子节点。这些方法通常接受一个包含新节点信息的对象作为参数,如文本、图标、父节点ID等。 "删",删除节点,可以...

    dtree+jquery动态生成树

    【dtree+jquery动态生成树】是一个用于创建交互式树形结构的JavaScript库,结合了jQuery框架的强大功能,使得在网页上动态展示层次结构数据变得简单。本实例着重于实现菜单树的生成,这对于构建多级导航系统尤其有用...

    一种dtree树用控件实现的

    4. **动态加载**:对于大型数据集,可以采用懒加载策略,即只在节点首次展开时异步加载其子节点数据,提高应用性能。 5. **交互优化**:为了提供良好的用户体验,可以增加多种交互功能,如搜索、拖放排序、多选等。...

    dtreeJQuery实例.动态生成树

    此外,为了提升性能,可以考虑使用懒加载策略,只在需要时加载节点,以及优化AJAX请求,如缓存重复请求,减少不必要的网络通信。 ### 7. 示例代码 ```html &lt;!DOCTYPE html&gt; &lt;title&gt;dtreeJQuery实例 ...

    DTree较好的树形菜单js控件

    1. **动态加载**:DTree支持动态加载子节点,当用户展开一个父节点时,只加载必要的数据,从而提高页面性能。 2. **多级节点**:DTree能够处理多层的树结构,允许用户进行深度级别的导航。 3. **事件驱动**:它提供...

    dtree js树形菜单 你懂的

    1. **动态加载**:`dtree`支持异步加载子节点,这意味着在用户展开父节点时,仅会加载必要的数据,从而提高页面性能。 2. **可定制化**:通过自定义CSS样式和JavaScript事件,你可以轻松地调整菜单的外观和行为,以...

Global site tag (gtag.js) - Google Analytics