写了个XML+Tree无穷树js版

ttx9n · 发表于 2007-9-17 20:26:22

<head> 
<style type="text/css"> 
.select 
{ 
    width:80%; 
    border:0px solid #bfbfbf; 
} 
.options 
{ 
    width:98%; 
    border:0px solid #ff0000; 
} 
.tree 
{ 
    width:92%; 
    border:0px solid #ff0000; 
} 
</style> 
</head> 
<body> 
<xml id="Login"> 
<?xml version="1.0" encoding="utf-8" ?> 
<Students name="98班级"> 
    <Student name="王小平"> 
        <Chinese id="語文"> 
           <Item id="单选题"> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="多选题"> 
             <Score id="33"></Score> 
            </Item> 
           <Item id="计算题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="应用题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="附加题"> 
             <Score id="33"></Score> 
           </Item> 
        </Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="王小波"> 
        <Chinese id="語文"> 
           <Item id="单选题"> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="多选题"> 
             <Score id="33"></Score> 
            </Item> 
           <Item id="计算题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="应用题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="附加题"> 
             <Score id="33"></Score> 
           </Item> 
        </Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="劉瓊"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="孟雲江"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="余敬興"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="金細愛"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="羅必洪"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="姜海平"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="姚軍"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="李海濤"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="陳平"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="胡光"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
</Students> 
</xml> 
<body> 
<script> 
// 
var Box = function () 
{ 
    return document.createElement("div"); 
} 
// 
// 
var desktop = document.body; 
// 
// 
// 
var Options = function () 
{ 
    // 
} 
var Tree = function () 
{ 
    // 
    var _this = this; 
    this._select = null; 
    this._options = null; 
    // 
    this.create = function (level,xml) 
    { 
        var space = ""; 
        for(var i=0;i<level;i++) 
        { 
            space += "  "; 
        } 
        // 
        this._select = new Box(); 
        this.appendChild(this._select); 
        this._select.className = "select"; 
        this._select.innerHTML = space+"[+]"+xml.attributes[0].value; 
        // 
        this._options = new Box(); 
        this.appendChild(this._options); 
        this._options.className = "options"; 
//        this._options.innerHTML = "options"; 
        this._options.style.display = "inline"; 
        // 
        this._select.onclick = function () 
        { 
            if(_this._options.style.display == "inline") 
            { 
               _this._options.style.display = "none"; 
            } 
            else 
            { 
               _this._options.style.display = "inline" 
            } 
        } 
        // 
        for(var i=0;i< xml.childNodes.length;i++) 
        { 
            // 
            if(xml.childNodes[i].childNodes.length>0) 
            { 
                this._tree = new Box(); 
                this._options.appendChild(this._tree); 
                this._tree.style.display = "inline"; 
                Tree.apply(this._tree); 
                // 
                this._tree.className = "tree"; 
                this._tree.create(level+1,xml.childNodes[i]); 
            } 
            else 
            { 
                var div = new Box(); 
                this._options.appendChild(div); 
                div.innerHTML = space+"  "+"[-]"+xml.childNodes[i].attributes[0].value; 
            } 
            // 
        } 
        // 
    } 
} 
// 
var tree = new Box(); 
desktop.appendChild(tree); 
Tree.apply(tree); 
tree.className = "tree"; 
tree.style.left = 400; 
tree.create(0,Login.documentElement); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<head> 
<style type="text/css"> 
.select 
{ 
    width:80%; 
    border:0px solid #bfbfbf; 
} 
.options 
{ 
    width:98%; 
    border:0px solid #ff0000; 
} 
.tree 
{ 
    border:0x solid #ff0000; 
} 
.treeView 
{ 
    height:400px; 
    width:300px; 
    border:1x solid #ff0000; 
    overflow:auto; 
} 
</style> 
</head> 
<body> 
<xml id="Login"> 
<?xml version="1.0" encoding="utf-8" ?> 
<Students name="98班级"> 
    <Student name="王小平"> 
        <Chinese id="語文"> 
           <Item id="单选题"> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="多选题"> 
             <Score id="33"></Score> 
            </Item> 
           <Item id="计算题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="应用题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="附加题"> 
             <Score id="33"></Score> 
           </Item> 
        </Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="王小波"> 
        <Chinese id="語文"> 
           <Item id="单选题"> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="多选题"> 
             <Score id="33"></Score> 
            </Item> 
           <Item id="计算题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="应用题"> 
             <Score id="33"></Score> 
           </Item> 
           <Item id="附加题"> 
             <Score id="33"></Score> 
           </Item> 
        </Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="劉瓊"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="孟雲江"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="余敬興"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="金細愛"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="羅必洪"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="姜海平"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="姚軍"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="李海濤"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="陳平"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
    <Student name="胡光"> 
        <Chinese id="語文"></Chinese> 
        <Physics id="物理"></Physics> 
        <English id="英語"></English> 
        <Geography id="地理"></Geography> 
        <Historical id="歷史"></Historical> 
    </Student> 
</Students> 
</xml> 
<body> 
<script> 
// 
var Box = function () 
{ 
    return document.createElement("div"); 
} 
// 
// 
var desktop = document.body; 
// 
// 
// 
var Options = function () 
{ 
    // 
} 
var Tree = function () 
{ 
    // 
    var _this = this; 
    this._select = null; 
    this._options = null; 
    // 
    this.create = function (level,xml) 
    { 
        var space = ""; 
        for(var i=0;i<level;i++) 
        { 
            space += "  "; 
        } 
        // 
        this._select = new Box(); 
        this.appendChild(this._select); 
        this._select.className = "select"; 
        this._select.innerHTML = space+"[+]"+xml.attributes[0].value; 
        // 
        this._options = new Box(); 
        this.appendChild(this._options); 
        this._options.className = "options"; 
//        this._options.innerHTML = "options"; 
        this._options.style.display = "inline"; 
        // 
        this._select.onclick = function () 
        { 
            if(_this._options.style.display == "inline") 
            { 
               _this._options.style.display = "none"; 
            } 
            else 
            { 
               _this._options.style.display = "inline" 
            } 
        } 
        // 
        for(var i=0;i< xml.childNodes.length;i++) 
        { 
            // 
            if(xml.childNodes[i].childNodes.length>0) 
            { 
                this._tree = new Box(); 
                this._options.appendChild(this._tree); 
                this._tree.style.display = "inline"; 
                Tree.apply(this._tree); 
                // 
                this._tree.className = "tree"; 
                this._tree.create(level+1,xml.childNodes[i]); 
            } 
            else 
            { 
                var div = new Box(); 
                this._options.appendChild(div); 
                div.innerHTML = space+"  "+"[-]"+xml.childNodes[i].attributes[0].value; 
            } 
            // 
        } 
        // 
    } 
} 
// 
var tree = new Box(); 
desktop.appendChild(tree); 
Tree.apply(tree); 
tree.className = "treeView"; 
tree.style.left = 400; 
tree.create(0,Login.documentElement); 
// 
var tree1 = new Box(); 
desktop.appendChild(tree1); 
Tree.apply(tree1); 
tree1.className = "treeView"; 
tree1.style.position = "absolute"; 
tree1.style.top = 100; 
tree1.style.left = 400; 
tree1.create(0,Login.documentElement); 
// 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

idy6_yus · 发表于 2022-11-4 01:59:04

数据库了多久撒快乐的健身卡啦

5cf304mn2 · 发表于 2022-11-22 21:59:45

哦哦哦哦哦哦哦哦哦

3t0ukmu · 发表于 2022-11-28 20:11:33

刷屏刷屏刷屏

5vulod · 发表于 2023-1-20 00:16:23

搞个免费的用用

idy6_yus · 发表于 2023-6-8 18:32:08

我要金豆金豆金豆

shw5ovr · 发表于 2023-7-1 11:31:51

的vgdsvsdvdsvdsvds

adm1n · 发表于 2023-8-25 07:25:19

管灌灌灌灌灌灌灌灌灌灌

gc4hg · 发表于 2023-8-31 11:49:06

哈哈哈哈哈哈

lsc54 · 发表于 2023-9-4 07:56:11

看看怎么样再说

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 写了个XML+Tree无穷树js版

相关帖子