AJAX TreeView

最新推荐文章于 2021-08-06 04:41:42 发布
最新推荐文章于 2021-08-06 04:41:42 发布
阅读量80 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/doll-net/archive/2007/05/16/749282.html
版权
最近做项目要用TreeView，开始用VS自带的TreeView控件，发现不大好扩展，索性自己写了一个，这个DEMO很简单，但已经有了最基本的方法，实现了动态读取自节点数据，鼠标经过时节点变背景色，选中节点变背景色，左键菜单，根据URL上传递的参数在页面刷新的时候展开相应的节点,可以根据自己的实际需求进行修改或者扩展。
这个JS只可运行于IE,其他浏览器不支持
TreeView.js的代码 :
ContractedBlock.gif ExpandedBlockStart.gif TreeView.js
        function Tree(objTreeID)
        {
            this.objTree = getObjById(objTreeID);
            this.IMG = [{id:1,imgSrc:"../images/open.gif",imgTitle:"点击折叠"},{id:2,imgSrc:"../images/close.gif",imgTitle:"点击展开"}];
            this.TagName = [{id:1,name:"Tbl"},{id:2,name:"Td"},{id:3,name:"Img"}];
            this.outBgColor = "#FFF";
            this.clickBgColor = "#4c4c4c";
            this.overBgColor = "#D4D4D4";            
            this.target = "_self";
            this.pageUrl = "#";
            this.isFirstLoad = true;
                        
            this.selectNodeID = "";//存放选中的节点值
            this.menuNodeID = "";
            
            this.html = "";
            
            this.getXmlData = function(qid,objTree)
            {   
                var _this = this;
                var url = "GetCityData.aspx?id="+qid+"&" + Math.random();  
                var xmlHttp = new xmlHTTP();
                xmlHttp.open("GET",url,true);
                xmlHttp.onreadystatechange = function()
                {            
                    if(xmlHttp.ReadyState == 4)
                    {    
                        if(xmlHttp.responseXML.childNodes.length == 0)
                            return;
                        var nodeData = xmlHttp.responseXML.getElementsByTagName("NodeData");//    alert(nodeData[0].getAttribute("result"));                
                        var childNodeData = nodeData[0].getElementsByTagName("node");
                        _this.foreachXmlNode(childNodeData);
                        //显示
                        objTree.innerHTML = _this.html;
                        
                        //没有数据则将DIV的高度设为1
                        if(_this.html.length==0)
                        {
                            objTree.style.height = "1px";
                            objTree.style.overflow="hidden";
                        }
                        if(_this.isFirstLoad)
                        {    
                            _this.orientationNode();                         
                        }
                    }
                };
                xmlHttp.send(null); 
            }
            
            this.foreachXmlNode = function(nodeData)
            {   
                var _this = this;
                var nodeValue,nodeName;
                if(_this.html != "")
                    _this.html = "";

                for( var i=0;i<nodeData.length;i++)
                {   
                    nodeName = nodeData[i].childNodes[0].childNodes[0].nodeValue;
                    nodeValue = nodeData[i].childNodes[1].childNodes[0].nodeValue;
                     
                    _this.html += _this.createNode(nodeValue,nodeName);
                }
             }
             
             this.createNode = function(nodeValue,nodeName)
             {
                var _this = this; 
                var imgSrc=_this.IMG[1].imgSrc,imgTitle=_this.IMG[1].imgTitle;
                return "<table border=0 cellpadding='1' cellspacing='1' id='Tbl"+nodeValue+"'><tr><td>"
                    +"<img id='Img"+nodeValue+"' οnclick=\""+objTreeID+".openNode(this,'Img')\" src='"+imgSrc+"' title='"+imgTitle+"' hspace='0' vspace='0' style='cursor:hand'>"
                    +"</td><td nowrap id='Td"+nodeValue+"' οnmοuseup="+objTreeID+".showMenu('"+nodeValue+"') οnclick=\""+objTreeID+".tdClick(this)\" οnmοuseοver="+objTreeID+".mouseOver(this) οnmοuseοut="+objTreeID+".mouseOut(this) style='cursor:hand'>"
                    +"<a href='"+_this.pageUrl+nodeValue+"' target='"+_this.target+"'>"
                    +nodeName+"</a></td></tr></table><div id='"+nodeValue+"' style=\"display: none; margin-left: 1em;\"></div>"; 
             }
             
             this.openNode = function(objNode)
             {
                var _this = this; 
                try{
                    if(event.button == 2 || event.button == 1)
                        _this.isFirstLoad = false;
                    if(event.button == 2)
                        return;
                }catch(ex){}
                
                var divObj = getObjById((objNode.id).Replace(_this.TagName[2].name,""));
               
                if(_this.isFirstLoad || objNode.title == _this.IMG[1].imgTitle)
                {  
                    objNode.src = _this.IMG[0].imgSrc;
                    objNode.title = _this.IMG[0].imgTitle;
                    
                    divObj.style.display = "block";        
                    if(!divObj.innerHTML.length>0)
                    { 
                        divObj.innerHTML="loading.";
                        _this.getXmlData(divObj.id,divObj);
                    }
                }
                else
                {
                    objNode.src = _this.IMG[1].imgSrc;
                    objNode.title = _this.IMG[1].imgTitle;
                    divObj.style.display = "none";
                }
             }
             
             this.tdClick = function(objNode)
             {
                var _this = this;
                if(_this.selectNodeID == "")
                {
                    _this.selectNodeID = objNode.id;
                }
                else if(objNode.id != _this.selectNodeID)
                {
                    getObjById(_this.selectNodeID).style.backgroundColor = _this.outBgColor;
                    _this.selectNodeID = objNode.id;
                }
                objNode.style.backgroundColor = _this.clickBgColor;
                _this.openNode(getObjById(objNode.id.Replace(_this.TagName[1].name,_this.TagName[2].name)));   
             }
             
             this.mouseOver = function(objNode,type)
             {
                var _this = this;
                if(type==1 && objNode.id != _this.selectNodeID)
                {
                     objNode.style.backgroundColor="#d1d1d1";
                }
                else
                {
                    if(objNode.id != _this.selectNodeID)
                    {
                        objNode.style.backgroundColor = _this.overBgColor;
                    }
                }
             }
             
             this.mouseOut = function(objNode,type)
             {
                var _this = this;
                if(type==1)
                {
                    objNode.style.backgroundColor="#ACD3E2";
                }
                else
                {
                    if( objNode.id != _this.selectNodeID)
                    {
                        objNode.style.backgroundColor = _this.outBgColor;
                    }
                }
             }
             //根据URL上的参数,让相应的节点展开
             this.orientationNode = function(nodeId)
             {
                var _this = this;
                try{
                    var nodeId = window.location.href.match(/#([^&?].)*/g)[0];                
                    if(nodeId.length>0)
                    {
                        nodeId = nodeId.substring(1);
                        if(!(/^\d{4}0{2}$/).test(nodeId))
                        {
                            _this.openNode(getObjById(_this.TagName[2].name+nodeId.substring(0,4)+"00"));
                        }
                        _this.openNode(getObjById(_this.TagName[2].name+nodeId));
                        _this.isFirstLoad = false;    
                    }
                }catch(e){}
             }  
             //显示菜单
             this.showMenu = function(nodeID)
             {
                if(event.button == 1)
                    return;
                var _this = this;
                _this.tdClick(eval(_this.TagName[1].name+nodeID));
                
                var divElement=eval("menu");
                var rightedge = document.body.clientWidth + document.documentElement.clientWidth - event.clientX ; 
                var bottomedge = document.body.clientHeight + document.documentElement.clientHeight - event.clientY ;  
                if (rightedge < divElement.offsetWidth) 
                {  
                   divElement.style.left = document.body.scrollLeft + event.clientX - divElement.offsetWidth + "px"; 
                }
                else
                { 
                    divElement.style.left = document.body.scrollLeft + event.clientX + "px"; 
                }
                
                if (bottomedge < divElement.offsetHeight)
                { 
                    divElement.style.top = document.body.scrollTop + document.documentElement.scrollTop + event.clientY - divElement.offsetHeight + "px";  
                }
                else 
                {
                   divElement.style.top = document.body.scrollTop + document.documentElement.scrollTop + event.clientY + "px";   
                }
                _this.menuNodeID = nodeID;
                divElement.style.visibility = "visible"; 
             }    
        }       
        

浏览页HTML的代码：
ContractedBlock.gif ExpandedBlockStart.gif TeeView Demo HTML
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="../js/XmlHttp.js"></script>
    <script type="text/javascript" src="../js/TreeView.js"></script>
    <script type="text/javascript">
        function getObjById(id)
        {   
            if (typeof(id) != "string" || id == "") return null;
            if (document.getElementById) return document.getElementById(id);
            if (document.all) return document.all(id);            
            try {return eval(id);} catch(e){ return null;}
        }
        String.prototype.Replace = function(oldValue,newValue) 
        { 
            return this.replace(new RegExp(oldValue,"g"), newValue); 
        }
        var tree ;
        window.onload = function()
        {
            tree = new Tree("tree");
            tree.getXmlData(-1,tree.objTree);
        }
         //屏蔽系统左键
        document.oncontextmenu = function () { return false; }
        //鼠标点击事件
        document.onmouseup = function()
        {  
            if(event.button == 1)
            {
                getObjById("menu").style.visibility = 'hidden';
            }
        }
        //菜单事件
        function ObjClick(obj)
        {
            switch(obj.innerText)
            {
                case "添加" :
                    alert("你要添加的节点ID为:"+tree.menuNodeID);
                    break;
                case "删除":
                    delteNode();
                    break;
            }
        }
        //删出事件
        function delteNode()
        {   
            if(confirm('确定要删除吗?'))
            {
                getObjById(tree.TagName[0].name+tree.menuNodeID).removeNode(true);//删除节点
                getObjById(tree.menuNodeID).removeNode(true);//删除其子节点
            }
           tree.selectNodeID = '';//清除选中节点值
        }
        function mouseOver(objNode,type)
        {
            tree.mouseOver(objNode,type);
        }
        function mouseOut(objNode,type)
        {
            tree.mouseOut(objNode,type);
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="menu" style="position:absolute;visibility:hidden;width:60px;font-size: 9pt; background-color:#ACD3E2;">
    <div id='divAdd' onmouseover="mouseOver(this,1)" onmouseout="mouseOut(this,1)" onclick="ObjClick(this)">添加</div>
    <div style='height:2px;background-color:#fff; overflow: hidden;'></div>
    <div id='divDel' onmouseover="mouseOver(this,1)" onmouseout="mouseOut(this,1)" onclick="ObjClick(this)">删除</div>
    </div>
    <div id="tree">    
    </div>
    </form>
</body>
</html>


XmlHttp.js 请见 ajax中获取xmlHttp对象方法

GetCityData.aspx返回一个XML文件，截图：

 运行效果截图：   菜单截图：

新版本及DEMO下载地址 :JavaScript TreeView

转载于:https://www.cnblogs.com/doll-net/archive/2007/05/16/749282.html

weixin_34127717
关注
TreeView控件ajax操作实例
06-29
使用jQuery以及它的ajax方法直接操作asp.net 2.0 中的TreeView控件，具体说明请看http://blog.csdn.net/luq885
jquery ajax TreeView asp.net改进版
10-26
<link href="lib/jquery/plugins/treeview/jquery.tree.css" rel="stylesheet" type="text/css" /> <script src="lib/jquery/jquery.js" type="text/javascript"></script> <script src="lib/jquery/plugins/...
ASP.NET AJAX TREEVIEW
weixin_33853794的博客
08-31 77
  Rad TreeView for ASP.NET AJAX http://www.telerik.com/products/aspnet-ajax/treeview.aspx   AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载) http://www.builder.com.cn/2008/0324/781170.shtml   ASP.N...
treeview数据结构问题ajax
qq_18937429的博客
11-20 227
treeview 的data属性是json，但是它必须是以"["开始，"]"结束,并不是"{}"这大括号来开始和结束。而我们后台封装的这样 TreeNode root = null; //封装树结构 for(){ ... } String str = JSONArray.toJSONString(root) 直接将 str 通过ajax传到前台的时候 ，此时的json是不可用做treevie...
ajaxTree 用Javascript 写的树形导航控件 jsTreeView
雪后残阳
05-22 1363
----------------------目前仅支持IE  ----------------IE 7 下试过，其余的尚未测试，和服务器端的联合也未测试。----------------------ajaxTree.htm---------------------http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">htt
有Ajax技术的一个treeview
a775252的博客
03-28 105
文件下载：ajax 实现treeview今天项目中用了这个treeview,struts + hibernate的设计，调用时需要修改js文件里两处地方。folder-tree-static.js：varajaxRequestFile='writeNodes.php'; 修改成你自己的子类URL，如：varajaxRequestFile='employeeHandle.do...
ajax TreeView 树
04-22
ajax TreeView 树 dtree 树结构 javascript
ASP.net+jQuery 基于数据库的动态AJAX树控TreeView
03-16
内容索引:.NET源码,Ajax相关,TreeView,树形菜单　treeViewClientControl，的配合，采用Access数据库，实现了即时加载的动态TreeView控件，完美展现了ajax操作之美。同时，通过控制程序，你将能实现全部收缩、全部...
ASP.NET AJAX TreeView control with templates
12-08
ASP.NET AJAX TreeView 控件是ASP.NET框架中用于构建层级结构数据展示的一种强大的工具。它允许用户以交互式的方式浏览和操作数据，如文件系统、组织结构或分类目录。在结合了AJAX（Asynchronous JavaScript and XML...
Ajax TreeView 控件及范例
06-17
Ajax TreeView 控件及范例
支持AJAX的TreeView树例子，使用省市县三级xml作演示
07-06
看到网上很多想用ajax的树的例子，很奇怪，明明TreeView自带AJAX功能，取非要自己去写一大堆代码， 工作量增加了，而性能又没有提高多少 正好自己这次用到了，就做了一个例子，供大家一起研究参考 注：顺便下载了一个省市县的3级xml文件，作为ajax树联动展示的例子 这个例子还实现了选中父结点时，选中全部子结点； 取消一个子结点，同时取消全部级别的父结点。
jquery treeview ajax
lrenwang的专栏
05-21 1920
这个效果是jquery的插件 jquery.treeview 带有ajax功能, 效果非常棒, 和大家共享下, 先上图还有好多样式,等以后我会慢慢整理出来,持续更新中 呵呵官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-treeview/html代码调用超级方便, 只要加载相关js,css 一个语句就行了test.html
用AJAX实现从数据库读取数据实现TreeView（二）
不积跬步无以至千里 不积小流无以成江海
11-25 2154
2、TreeView的实现:     此部分参考了梅花雪的TreeView。    TreeView.js/**//*    设置TreeView样式*/function setTreeStyle()...{    var style = "";    style += "DIV.zhTreeView DIV IMG{border: 0px solid #FFFFFF;} ";    st
用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
天天无用
06-10 9649
       上回实现了treeview控件的选择和删除节点(asp.net treeview控件无刷新选择和删除节点的ajax方法)，经过研究终于实现了如何增加节点，详细的说明过一段时间写新的文章，先说明一下这次实现的功能。    1.基于AJAX完全无刷新的增删改节点     2.选择节点以及取消选择，并且可以在客户端获得节点的值和文本(选择节点是增删改的基础)     3.展开与
bootstrap tree ajax,浅析BootStrap Treeview的简单使用
weixin_33995900的博客
08-06 343
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用。废话不多说，直接上干干货。1、bootstrap-treeview Github网址：2、使用要求：3、数据格式：(注意了，使用过程中，树的数据格式可以Json格式，也可以写死，当然写死的代码肯定不灵活。Json格式的字段名一定要按照tree的字段要求，即文本格式tex...
用AJAX实现从数据库读取数据实现TreeView（一）
不积跬步无以至千里 不积小流无以成江海
11-25 3070
用AJAX从数据库中提取数据,然后使用DOM+JavaScript来实现TreeView. 提取数据时并不是全部提取，而是只提取当前级别和当前级别的下一级数据。共三个JS文件。1、Ajax.js,此文件从自zxub的ajax.js文件修改而来,内容如下:/**//*AJAX数据请求*//**//** * 用于存放通道名称及通信对象的类，这样可以通过不同通道名称来区分不同的通信对象 */fu
ajax异步请求数据，用bootstrap中的tree模板实现tree
倚楼听风雨
11-13 8783
后台数据格式json数据data： {"0":[{"id":1,"fatherId":0,"typeName":"测试","typeIndex":0,"typeStatus":"1"}], "1":[{"id":2,"fatherId":1,"typeName":"测试类别1","typeIndex":1,"typeStatus":"1"},{"id":3,"fatherId":1,"type
TreeView控件实现无限级别绑定示例
在Web开发中，TreeView控件通常与服务器端技术（如ASP.NET）结合使用，并通过Ajax或异步调用来实现局部刷新，达到动态加载的效果。这需要在后台代码中编写逻辑来处理数据获取和递归构建树形结构，同时前端需要处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值