史上最强的JS:要求根据字符串生成树结构

Question

觉得意义不大。设计那个字符串还不如直接写棵树。xml和json更直观一些。

Answer 1

真的好难！3.字符串string113表示的是第一子节点下面的第一个子结点下面的第三个子结点 
---------------------
这是lz的解释！为啥不能解释为3a.字符串string113表示的是第一子节点下面的第十三个子结点？！
或
3b.字符串string113表示的是第十一子节点下面的第三个子结点？！为啥偏偏解释为lz滴说法？！俺很笨，请lz明示！

Answer 2

哈哈，楼上果然达人，终于找出第一个问题了！~结贴了给你额外+分。现在题目重新发一遍：
目的：由字符串生成树结构，树结构包。含在一个div内，该div能独立放置。禁止treeview控件，禁止ActiveX，XP上自带的IE6顺利浏览就可以了。 字符串命名规则： 
1.符号“&”为节点分隔符，符号“.”为标识分隔符 
2.无须根节点，从第一子节点开始遍历，用字符串+数字+标识分隔符表示不同的节点，其中字符串是任意的，字符串最后一位不可以包含数字。第i层子节点就有i个数字，同一父节点下的子结点最后一位用数字从小到大标识 
3.字符串string1.1.3表示的是第一子节点下面的第一个子结点下面的第三个子结点 
4.字符串书写顺序为：越是前面的数字越小越优先。如：string1.2.3   string1.2.2.1   string2.1.3.4   则次序因为   string1.2.2.1&string1.2.3&string2.1.3.4 例：var   treestring 
=   "book1&history1.1&historytt1.1.1&historygy1.1.2&historygypp1.1.2.1&historygr1.1.3&math1.2&mathadd1.2.1&mathplus1.2.2&english1.3&englishds1.3.1&englishdsgh1.3.1.1&plan2e2&do456g3" 通过达人您的手做出的tree.js，我只需调用函数tree(treestring)就可以生成下面的树结构（其中黑色方块为图片，请在您做的js中预留）： 
      ■book 
              ■history 
                      ■historytt 
                      ■historygy 
                              ■historygypp 
                      ■historygr   
              ■math 
                      ■mathadd 
                      ■mathplus 
              ■english 
                      ■englishds 
                              ■englishdsgh 
      ■plan2e 
      ■do456g       

Answer 3

阿弥陀佛，还有问题，节点值与节点层次之间最好加入分隔符，
否则一旦节点值末尾掺杂数字时就比较麻烦了，这时就不能直接判断，
而需要根据上下文才能判断！例如：string1.1.3最好写为string[1.1.3]，
一旦节点文本值变化为string110[1.1.3]
甚至string[110][1.1.3]均可快速解析节点层次！

Answer 4

题目上说了，字符串末尾不能带数字的。
这个就有点说不通了
string1.1.3
这个他本身来讲就是一个字符串，你又如何能多次一举
不如就13楼的建议！

Answer 5

由于大家强烈要求，虽然这个不是这个题目的bug,但还是把题目重新发一遍： 
目的：由字符串生成树结构，树结构包含在一个div内，该div能独立放置。禁止treeview控件，禁止ActiveX，XP上自带的IE6顺利浏览就可以了。   字符串命名规则：   
1.符号“&”为节点分隔符，符号“[.]”为标识分隔符   
2.无须根节点，从第一子节点开始遍历，用字符串+数字+标识分隔符表示不同的节点，其中字符串是任意的，字符串最后一位不可以包含数字。第i层子节点就有i个数字，同一父节点下的子结点最后一位用数字从小到大标识   
3.字符串string1.1.3表示的是第一子节点下面的第一个子结点下面的第三个子结点   
4.字符串书写顺序为：越是前面的数字越小越优先。如：string[1.2.3] string[1.2.2.1] string[2.1.3.4] 则次序因为 string[1.2.2.1]&string[1.2.3]&string[2.1.3.4]   例：var treestring = "book1&history[1.1]&historytt[1.1.1]&historygy[1.1.2]&historygypp[1.1.2.1]&historygr[1.1.3]&math[1.2]&mathadd[1.2.1]&mathplus[1.2.2]&english[1.3]&englishds[1.3.1]&englishdsgh[1.3.1.1]&plan2e[2]&do456g[3]"   通过达人您的手做出的tree.js，我只需调用函数tree(treestring)就可以生成下面的树结构（其中黑色方块为图片，请在您做的js中预留）：   
            ■book   
                            ■history   
                                            ■historytt   
                                            ■historygy   
                                                            ■historygypp   
                                            ■historygr       
                            ■math   
                                            ■mathadd   
                                            ■mathplus   
                            ■english   
                                            ■englishds   
                                                            ■englishdsgh   
            ■plan2e   
            ■do456g               

Answer 6

tree就懒的做了  ul凑合着用<script>
var treestring="book[1]&history[1.1]&historytt[1.1.1]&historygy[1.1.2]&historygypp[1.1.2.1]&historygr[1.1.3]&math[1.2]&mathadd[1.2.1]&mathplus[1.2.2]&english[1.3]&englishds[1.3.1]&englishdsgh[1.3.1.1]&plan2e[2]&do456g[3]";
var nodeStrings=treestring.split("&");
var allNodes=[];
for(var i=0;i<nodeStrings.length;i++){
    allNodes.push(new Node(nodeStrings[i]));
}
function Node(nodeString){
    var m=nodeString.match(/^(.+)\[([^\[\]]+)\]$/);
    this.name=m[1];
    this.idString=m[2];
    this.toString=function(){
var sb=[];
sb.push("<ul>");
sb.push(this.name);
for(var i=0;i<this.nodes.length;i++){
sb.push(this.nodes[i].toString());
}
sb.push("</ul>");
return sb.join("");
    }
    this.nodes=[];
    this.parent=null;
    this.add=function(node){
        this.nodes.push(node);
        node.parent=this;
    }
}
/* 排序,排序完就容易搞了 */
allNodes.sort(function(a,b){return a.idString.localeCompare(b.idString)});
var root=new Node("root[0]");
root.add(allNodes[0]);for(var i=1;i<allNodes.length;i++){
var lastOne=allNodes[i-1];
var thisOne=allNodes[i];
if(thisOne.idString.length>lastOne.idString.length){
lastOne.add(thisOne);
}else{
while(lastOne.parent!=null){
lastOne=lastOne.parent;
if((thisOne.idString.length>lastOne.idString.length&&thisOne.idString.indexOf(lastOne.idString)==0)||lastOne==root){
lastOne.add(thisOne);
break;
}
}
}
}
document.write(root);
</script>

Answer 7

既然都用"."了不如直接写成 historygypp[1,1,2,1] 这样[]就是一个json数组了

Answer 8

修改一下tostring,就可以屏蔽掉根节点的输出,和加上图片了...    this.toString=function(){
var sb=[];
if(this.parent!=null){
sb.push("<ul>");
sb.push("<img />");
sb.push(this.name);
}
for(var i=0;i<this.nodes.length;i++){
sb.push(this.nodes[i].toString());
}
if(this.parent!=null){
sb.push("</ul>");
}
return sb.join("");
    }

Answer 9

加上点击事件..可以收缩了~~~完整代码~~~<script>
window.onload=function(){
var treeString="book[1]&history[1.1]&historytt[1.1.1]&historygy[1.1.2]&historygypp[1.1.2.1]&historygr[1.1.3]&math[1.2]&mathadd[1.2.1]&mathplus[1.2.2]&english[1.3]&englishds[1.3.1]&englishdsgh[1.3.1.1]&plan2e[2]&do456g[3]";
document.getElementById("div").innerHTML=buildTree(treeString);
}
function buildTree(treeString){
var nodeStrings=treeString.split("&");
var allNodes=[];
for(var i=0;i<nodeStrings.length;i++){
     allNodes.push(new Node(nodeStrings[i]));
}
/* 排序,排序完就容易搞了 */
allNodes.sort(function(a,b){return a.idString.localeCompare(b.idString)});
var root=new Node("root[0]");
root.add(allNodes[0]);
for(var i=1;i<allNodes.length;i++){
var lastOne=allNodes[i-1];
var thisOne=allNodes[i];
if(thisOne.idString.length>lastOne.idString.length){
lastOne.add(thisOne);
}else{
while(lastOne.parent!=null){
lastOne=lastOne.parent;
if((thisOne.idString.length>lastOne.idString.length&&thisOne.idString.indexOf(lastOne.idString)==0)||lastOne==root){
lastOne.add(thisOne);
break;
}
}
}
}
return root.toString();
}
function Node(nodeString){
    var m=nodeString.match(/^(.+)\[([^\[\]]+)\]$/);
    this.name=m[1];
    this.idString=m[2];
    this.toString=function(){
var sb=[];
if(this.parent!=null){
sb.push("<ul>");
sb.push("<img onclick='nodeClick(this.parentNode)'/>");
sb.push(this.name);
}
for(var i=0;i<this.nodes.length;i++){
sb.push(this.nodes[i].toString());
}
if(this.parent!=null){
sb.push("</ul>");
}
return sb.join("");
    }
    this.nodes=[];
    this.parent=null;
    this.add=function(node){
        this.nodes.push(node);
        node.parent=this;
    }
}
function nodeClick(node){
var children=node.getElementsByTagName("ul");
for(var i=0;i<children.length;i++){
var display=children[i].style.display;
children[i].style.display=display=="none"?"":"none";
}
}
</script>
<div id="div"></div>

Answer 10

修改了比较算法..可以应变节点超过10的情况...<script>
window.onload=function(){
var treeString="book[1]&history[1.1]&historytt[1.1.1]&historygy[1.1.2]&historygypp[1.1.2.1]&historygr[1.1.3]&math[1.2]&mathadd[1.2.1]&mathplus[1.2.2]&english[1.3]&englishds[1.3.1]&englishdsgh[1.3.1.1]&plan2e[2]&do456g[3]";
document.getElementById("div").innerHTML=buildTree(treeString);
}
function buildTree(treeString){
var nodeStrings=treeString.split("&");
var allNodes=[];
for(var i=0;i<nodeStrings.length;i++){
     allNodes.push(new Node(nodeStrings[i]));
}
/* 排序,排序完就容易搞了 */
allNodes.sort(function(a,b){return compareIdString(a.idString,b.idString)}); var root=new Node("root[0]");
root.add(allNodes[0]);
for(var i=1;i<allNodes.length;i++){
var lastOne=allNodes[i-1];
var thisOne=allNodes[i];
if(isParent(lastOne,thisOne)){
lastOne.add(thisOne);
}else{
while(lastOne.parent!=null){
lastOne=lastOne.parent;
if(isParent(lastOne,thisOne)||lastOne==root){
lastOne.add(thisOne);
break;
}
}
}
}
return root.toString();
}
function Node(nodeString){
    var m=nodeString.match(/^(.+)\[([^\[\]]+)\]$/);
    this.name=m[1];
    this.idString=m[2];
    this.toString=function(){
var sb=[];
if(this.parent!=null){
sb.push("<ul>");
sb.push("<img onclick='nodeClick(this.parentNode)'/>");
sb.push(this.name);
}
for(var i=0;i<this.nodes.length;i++){
sb.push(this.nodes[i].toString());
}
if(this.parent!=null){
sb.push("</ul>");
}
return sb.join("");
    }
    this.nodes=[];
    this.parent=null;
    this.add=function(node){
        this.nodes.push(node);
        node.parent=this;
    }
}
function isParent(p,c){
if(c.idString.length>p.idString.length&&c.idString.indexOf(p.idString+".")==0)return true;
return false;
}
function compareIdString(s1,s2){
var arr1=s1.split(".");
var arr2=s2.split(".");
for(var i=0;i<arr1.length;i++){
if(i>arr2.length-1)return 1;
var n=parseInt(arr1[i])-parseInt(arr2[i]);
if(n!=0)return n;
}
return 0;
}
function nodeClick(node){
var children=node.getElementsByTagName("ul");
for(var i=0;i<children.length;i++){
var display=children[i].style.display;
children[i].style.display=display=="none"?"":"none";
}
}
</script>
<div id="div"></div>

Answer 11

简单点的：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style>
      div { border-left:10px solid #ddd; padding-left : 10px; }
    </style>
  </head>
  <body>
    <script src="tree.js">
      var t = "book1&history11&historytt111&historygy112&historygypp1121&historygr113&math12&mathadd121&mathplus122&english13&englishds131&englishdsgh1311&plan2e2&do456g3";      function tree(s){
var ar = s.split(/&/);
var cur = 1;
for (var i= 0; i < ar.length; ++i){
  var e = ar[i];
  e.replace(/(\w+?)\d+$/g, function (s, w){
    for (var j=-1; j<cur - w.length; ++j){
      document.write("<\/div>");
    }
    document.write("<div>" + w );
      cur = w.length;
    });
}
      }
      tree(t);
    </script>
  </body>
</html>

Answer 12

楼主，不如把你的字符串想办法变成一个json或xml数据，再转成树，不是更简单么？
为什么非要再画一个树呢？

Answer 13

为啥不用XML?
--------------
同问

Answer 14

就是 为什么不用XML呢按你这样的设想 每个节点已经完全包含了位置信息 还有必要有节点次序吗?你这个思路做为一个存在树的节点添加到还不错

Answer 15

直接字符串的方式也有好处。直接用正则就可以解析了，但xml没办法用正则。

Answer 16

汗,都有xml了你还用啥正则啊,用dom不好啊

Answer 17

加一个相似的问题：谢谢楼主我想把一个TreeView中的节点都用1.1.1   1.1.2  1.2.1 等这样子表示出来。并把它们放在数据表中。
怎么样用代码在添加节点时就把这个数字表示的结果生成。
谢谢了。最好给你写出代码。告诉我用什么方法大体思路也行。谢谢大家。谢谢楼主。