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

目的:由字符串生成树结构,树结构包含在一个div内,该div能独立放置。禁止treeview控件,禁止ActiveX,XP上自带的IE6顺利浏览就可以了。 字符串命名规则: 1.符号“&”为节点分隔符 2.无须根节点,从第一子节点开始遍历,用字符串+数字表示不同的节点,其中字符串是任意的,字符串最后一位不可以包含数字。第i层子节点就有i个数字,同一父节点下的子结点最后一位用数字从小到大标识
摘要由CSDN通过智能技术生成



目的:由字符串生成树结构,树结构包含在一个div内,该div能独立放置。禁止treeview控件,禁止ActiveX,XP上自带的IE6顺利浏览就可以了。

字符串命名规则:
1.符号“&”为节点分隔符
2.无须根节点,从第一子节点开始遍历,用字符串+数字表示不同的节点,其中字符串是任意的,字符串最后一位不可以包含数字。第i层子节点就有i个数字,同一父节点下的子结点最后一位用数字从小到大标识
3.字符串string113表示的是第一子节点下面的第一个子结点下面的第三个子结点
4.字符串书写顺序为:越是前面的数字越小越优先。如:string123   string1221   string2134   则次序因为   string1221&string123&string2134

例:var   treestring
=   "book1&history11&historytt111&historygy112&historygypp1121&historygr113&math12&mathadd121&mathplus122&english13&englishds131&englishdsgh1311&plan2e2&do456g3"

通过达人您的手做出的tree.js,我只需调用函数tree(treestring)就可以生成下面的树结构(其中黑色方块为图片,请在您做的js中预留):
      ■book
              ■history
                      ■historytt
                      ■historygy
                              ■historygypp
                      ■historygr  
              ■math
                      ■mathadd
                      ■mathplus
              ■english
                      ■englishds
                              ■englishdsgh
      ■plan2e
      ■do456g     

< 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]));
    }

    
/* 排序,排序完就容易搞了 */<
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值