首页 > 网络编程 > JavaScript > javascript技巧 > 写了个XML+Tree无穷树js版 2007-09-17 20:26:22 作者： 写了个XML+Tree无穷树js版 <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需刷新才能执行]
