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

基本信息

源码名称：js多级树形组织机构图实例代码

源码大小：3.61KB

文件格式：.zip

开发语言：js

更新时间：2016-01-20

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!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>