zoukankan      html  css  js  c++  java

  • javascript+css+xml 全选树

    vs2005 的TreeView树控件入门非常简单，花费很少时间就可以构造一颗树形目录来，是新手的不错选择，但是它缺少灵活性，要改变它的图标除了它本身的模板外，就有点麻烦了，还有它的点击回发事件，特别烦。如果选择父节点同时选择子节点，就很麻烦了，因为它的结构是div+table的，我们要扩展它也要花不少时间。我发现很多高手都没有用到它，都是自己写的，这样可以灵活扩展，和修改相关属性，下面是我用javascript+css+xml写的一颗树，只要xml文件的格式不变，你可以随便增加、删除目录，很容易就可以得到相应的树目录了，你可以在原有的基础上扩展更多的属性、和相关的操作。当然刚刚写出来的东西不是很好，还有BUG,没有时间测试，如果大家有什么建议或发现bug请提出来。大家一起讨论。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
            <title>Untitled</title>
            <Style>
    /*    .on
        {
            background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;
            text-decoration:none;
            border: 1px solid #2a4dab;
            font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
            
        }    */
        .list    {margin:0;padding:0;}
        .list ul
            {
                /*background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为：颜色，图片路径，横向重复*/
            list-style-type    :none;    
            margin    :0,0,0,9;
            padding    :0;
            padding-left    :1px;    
            }
        .list li
            {
            font    :bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为：粗体 大小/行高 字族*/
            list-style-type    :none;
            margin    :0;
            padding    :0;
            padding-left    :12px;
            cursor    :hand;
            background    :#008080
            }

        A:link     {font-size:12px;text-decoration:none;color: #FFFFFF}
        A:visited     {font-size:12px;text-decoration:none;color: #FFFFFF}
        A:active     {font-size:12px;text-decoration: none;color: ##FFFFFF}
        A:hover     {font-size:12px;text-decoration:none;color: #ff00ff;border: 1px solid #2a4dab;/*边框颜色*/ }

            </Style>
            <script language='javascript'>
            function GetName()
            {
            alert(    "88888");
        }
            var closeImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif";    //关闭图标
        var openImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif";    //打开图标
        var plusImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif";            //+号图标
        var minusImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif";        //-号图标
        var fileImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\icon_text.gif";        //默认图标
        var xmlPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\Tree.xml";
        
        
            function show(thisobj)
            {
            
            alert(thisobj);
            
        }
            </script>
            <script language='javascript'>
            var xmlDoc;
            function CreateXmlObj()
            {
                if(window.ActiveXObject)
                {
            xmlDoc    =new ActiveXObject("Microsoft.XMLDOM");
            }
                else
                {
                xmlDoc    ==document.implementation.createDocument("","",null);
            }
                //xmlDoc.async=false;
            xmlDoc.load(xmlPath);
                if(xmlDoc.parseError.errorCode!=0)
                {
                    var xmlErr=xmlDoc.parseError;
                alert(    "出错:"+xmlErr.reason);
            }
            
        }
            //父节点事件
        var bgObj=null;
            function showhide(thisobj,id)
            {
                if(bgObj==null)
                {
                bgObj    =thisobj;
            }
                else
                {
                bgObj.style.background    =""
                bgObj    =thisobj;            
            }
            bgObj.style.background    ="red"
                //alert(thisobj.outerHTML);
            var obj=document.getElementById(id);        
                //alert(thisobj.previousSibling.previousSibling.getAttribute("src"));
            if(obj.style.display=="")
                {
                obj.style.display    ="none";
                    //thisobj.innerText="+"+thisobj.innerText.substring(1);
                thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath);        
                thisobj.previousSibling.previousSibling.previousSibling.setAttribute(    "src",plusImgPath)
            }
                else
                {
                obj.style.display    ="";
                    //thisobj.innerText="-"+thisobj.innerText.substring(1);
                thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath)
                thisobj.previousSibling.previousSibling.previousSibling.setAttribute(    "src",minusImgPath)
            }
        }
            //打开、关闭文件夹图标事件
        function showImgHide(thisobj,id)
            {
            
                var obj=document.getElementById(id);        
                if(obj.style.display=="")
                {
                obj.style.display    ="none";
                thisobj.setAttribute(    "src",closeImgPath);        
                thisobj.previousSibling.setAttribute(    "src",plusImgPath)
            }
                else
                {
                obj.style.display    ="";
                thisobj.setAttribute(    "src",openImgPath)
                thisobj.previousSibling.setAttribute(    "src",minusImgPath)
            }
        }
            //+、－符号事件
        function showMinusHide(thisobj,id)
            {
            
                var obj=document.getElementById(id);        
                if(obj.style.display=="")
                {
                obj.style.display    ="none";
                thisobj.setAttribute(    "src",plusImgPath);        
                thisobj.nextSibling.setAttribute(    "src",closeImgPath)
            }
                else
                {
                obj.style.display    ="";
                thisobj.setAttribute(    "src",minusImgPath)
                thisobj.nextSibling.setAttribute(    "src",openImgPath)
            }
        }
            //checkbox 全选事件
        function checkAll(e)
            {
                var bool=e.checked;        
                var childObj=document.getElementById(e.id+"-1");        
            setCheckBox(bool,childObj);        
        }
            function setCheckBox(bool,chk)
            {        
                if(chk!=null)
                {        
                    //alert(chk.childNodes.length);
                if(chk.childNodes.length>0)
                    {
                        for(var i=0;i<chk.childNodes.length;i++)
                        {
                            //alert(chk.childNodes[i].type);
                        if(chk.childNodes[i].type=="checkbox")
                            {            
                            chk.childNodes[i].setAttribute(    "checked",bool);
                        }
                        
                            if(chk.childNodes[i].childNodes.length>0)
                            {
                            setCheckBox(bool,chk.childNodes[i]);
                        }
                    }
                }
            }        
        }
            //设置节点背景颜色
        function setNodeBgColor(e,id)
            {
                if(bgObj==null)
                {
                bgObj    =e;
            }
                else
                {
                bgObj.style.background    =""
                bgObj    =e;            
            }
            bgObj.style.background    ="#804000"
        }
            var str="<div class=\"list\" id=\"menu1_child\" title=\"菜单功能区\">";
            function CreateTreeNode(root)
            {
                if(root.hasChildNodes)
                {
                    var uid=root.getAttribute("Id")+"-1";
                str    +="<ul id=\""+uid+"\">"
                    for(var i=0;i<root.childNodes.length;i++)
                    {
                        var node=root.childNodes[i];
                        var id=node.getAttribute("Id");
                        var name=node.getAttribute("Name");                                            
                        if(node.hasChildNodes)
                        {//父节点
                        str+="<li id=\""+id+"\"><img onclick=\"showMinusHide(this,'"+id+"-1')\" src=\""+minusImgPath+"\"/><img onclick=\"showImgHide(this,'"+id+"-1')\" src=\""+openImgPath+"\"/><input onclick=\"checkAll(this)\" type=\"checkbox\" id=\""+id+"\" /><SPAN id=\"S"+id+"\" onclick=\"showhide(this,'"+id+"-1')\"><a >"+name+"</a></SPAN>"
                        CreateTreeNode(node)
                        str    +="</li>";
                    }
                        else
                        {//子节点
                        str+="<li id=\""+id+"\" style=\"margin-left:18px;\" ><img src=\""+fileImgPath+"\"/><input  type=\"checkbox\" id=\""+id+"\" /><a onclick=\"setNodeBgColor(this,'"+id+"')\" href=\"javascript:\">"+name+"</a></li>"
                    }                    
                }
                str    +="</ul>"
                //    alert(root.childNodes.length);
            }
        }
            //打开全部
        function showAll()
            {
                //var root=document.getElementById("idmenu").firstChild.firstChild.firstChild;//0级
            var root=document.getElementById("idmenu").firstChild.firstChild.firstChild.childNodes[4];//1级
            getULNode(root,true);
        }
            //关闭全部
        function closeAll()
            {        
                //var root=document.getElementById("idmenu").firstChild.firstChild.firstChild;//0级
            var root=document.getElementById("idmenu").firstChild.firstChild.firstChild.childNodes[4];//1级
            getULNode(root,false);
        }
            function getULNode(rootNode,bool)
            {
                for(var i=0;i<rootNode.childNodes.length;i++)
                {
                    if(rootNode.childNodes[i].hasChildNodes)
                    {
                        if(rootNode.childNodes[i].tagName=="UL")
                        {                    
                            if(bool)
                            {
                            openUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id);
                        }
                            else
                            {
                            closeUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id);
                        }
                    }                
                    getULNode(rootNode.childNodes[i],bool);                
                }
            }            
        }
            function closeUL(thisobj,id)
            {    
                var obj=document.getElementById(id);        
                if(obj!=null)
                {
                obj.style.display    ="none";
                thisobj.previousSibling.previousSibling.setAttribute(    "src",closeImgPath);        
                thisobj.previousSibling.previousSibling.previousSibling.setAttribute(    "src",plusImgPath)
            }            
        }
            function openUL(thisobj,id)
            {    
                var obj=document.getElementById(id);        
                if(obj!=null)
                {
                obj.style.display    ="";
                thisobj.previousSibling.previousSibling.setAttribute(    "src",openImgPath);        
                thisobj.previousSibling.previousSibling.previousSibling.setAttribute(    "src",minusImgPath)
            }            
        }
            function Test()
            {
            CreateXmlObj();
                //alert(xmlDoc.documentElement.firstChild.getAttribute("Name"));
            var root=xmlDoc.documentElement;
                //alert(root.xml);
            CreateTreeNode(root);
            str    +="</div>";
                //alert(str);
            document.getElementById("codeText").value=str
            idmenu.innerHTML    =str;
        }
            </script>
    </head>

    <body onload="Test()">
    <input type="button" onclick="showAll()" value="全部展開">
    <input type="button" onclick="closeAll()" value="全部關閉">
    <input type="button" onclick="Test()" value="测试">
    <input id="codeText" type="text" value="">
    <div id="idmenu">555</div>
    </body>
    </html>
  • 相关阅读:
    VS操作Sqlite数据库
    Sqlite官方下载对应版本注意细节
    样式
    移动端问题
    table最终版IE（浏览器中宽度不起作用）
    pointer-event:none;在IE浏览器中不起作用
    伪类的使用
    针对谷歌浏览器写的css样式
    IE浏览器中textarea有滚动条出现
    父级元素被子元素的margin-top值影响的解决方案
  • 原文地址：https://www.cnblogs.com/jacklong/p/1124479.html
Copyright © 2011-2022 走看看