找传奇、传世资源到传世资源站!

js多级树形组织机构图 实例代码

8.5玩家评分(1人评分)
下载后可评
介绍 评论 失效链接反馈

js多级树形组织机构图 实例代码 Ajax框架/RIA-第1张 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分叉图</title> <link rel="stylesheet" href="css/fork.css"> <script src="js/fork.js"></script></head><body> <div id="fork"> </div><script> var fork = new Fork("#fork"); fork.setData({ name: "根节点", fork:[ { label: "YES", label_info: "YES", node:{ name: "正确答案", info:"正确答案_info", fork:[ {label: "YES", node:{name: "正确答案正确答案正确答案",fork:[]}}, {label: "NO", node:{name: "错误答案",fork:[]}} ] } },{ label: "NO", label_info: "", node:{ name: "错误答案", fork:[ {label: "NO", node:{name: "错误答案",fork:[ {label: "YES1", node:{name: "正确答案正确答案正确答案",fork:[]}}, {label: "YES2", node:{name: "正确答案正确答案正确答案", id: "test-leaf",fork:[]}} ]}}, {label: "YES", node:{name: "正确答案正确答案正确答案xx",fork:[]}} ] } } ] }); var test = document.getElementById('test-leaf'); // 增加测试分支 setTimeout(function() { fork.addLabel( test, { label: "测试分支: 是", label_info: "" }); }, 1000); setTimeout(function() { fork.addLabel( test, { label: "测试分支: 否", label_info: "" }); }, 2000); setTimeout(function() { fork.addLabel( test, { label: "测试分支: 晕", label_info: "" }); }, 3000); // 修改分支信息 setTimeout(function() { fork.setNode( test.parentNode.children[1].children[1].children[0], { name: "修改1", info: "修改1有信息" } ); }, 4000); setTimeout(function() { fork.setNode( test.parentNode.children[2].children[1].children[0], { name: "修改2", info: "修改2有信息" } ); }, 5000); setTimeout(function() { fork.setNode( test.parentNode.children[3].children[1].children[0], { name: "修改3", info: "修改3无信息" } ); }, 6000); setTimeout(function() { fork.setNode( test, { name: "setNode", info: "测试结点", fork: [ { label: "修改1", info: "修改1有信息" },{ label: "修改3", info: "修改3无信息" } ] } ); }, 7000); setTimeout(function() { console.log( fork.parse() ); }, 8000);</script></body></html>

评论

发表评论必须先登陆, 您可以 登陆 或者 注册新账号 !


在线咨询: 问题反馈
客服QQ:174666394

有问题请留言,看到后及时答复