前端框架——树形结构Ztree的使用

官网：http://ztree.me
码云：https://gitee.com/zTree/zTree_v3

可以实现效果

前端框架——树形结构Ztree的使用

使用方式

下载资源文件，引入到自己的项目中

    <head>
        <meta charset="UTF-8">
        <title></title>

        <!--导入样式文件和js文件 jquery要在ztree之前引入-->
        <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script src="js/jquery-1.4.4.min.js"></script>
        <script src="js/jquery.ztree.all.min.js"></script>
    </head>

通过阅读API文档进行编码

API 地址：http://www.treejs.cn/v3/api.php

实现简单的一棵树


    <head>
        <meta charset="UTF-8">
        <title></title>

        <!--导入样式文件和js文件 jquery要在ztree之前引入-->
        <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script src="js/jquery-1.4.4.min.js"></script>
        <script src="js/jquery.ztree.all.min.js"></script>
    </head>

    <body>
        <!--创建放置树的容器-->
        <ul id="ztree1" class="ztree">

        </ul>

    </body>
    <script>
        $(function() {

            //创建ztree的配置对象
            var setting1 = {
                treeId: "ztree1",
                data: {
                    simpleData: {
                        enable: true, //设置使用简单数据格式
                        idKey: "id",//id标识  可以修改为数据库对应字段
                        pIdKey: "pId",//父级id 
                        rootPId: 0,//根节点id
                    }
                }，
                //设置点击事件
                callback:{
                    onClick:function(event,treeId,treeNode,clickFlag){
                        console.log(treeNode.name)
                    }
                }
            }

            //树节点数据
            var zNodes1 = [{
                    "id": 1,
                    "pId": 0,
                    "name": "菜单一"
                },
                {
                    "id": 101,
                    "pId": 1,
                    "name": "菜单一子菜单一"
                },
                {
                    "id": 102,
                    "pId": 1,
                    "name": "菜单一子菜单二"
                },
                {
                    "id": 2,
                    "pId": 0,
                    "name": "菜单二"
                },
                {
                    "id": 201,
                    "pId": 2,
                    "name": "菜单二子菜单一"
                },
                {
                    "id": 202,
                    "pId": 2,
                    "name": "菜单二子菜单二"
                },
                {
                    "id": 3,
                    "pId": 0,
                    "name": "菜单三"
                },
            ];

            //初始化第一个树
            $.fn.zTree.init($("#ztree1"),setting1,zNodes1)

        })


    </script>

实现一个可以勾选的树

            //创建ztree的配置对象
            var setting1 = {
                treeId: "ztree1",
                data: {
                    simpleData: {
                        enable: true, //设置使用简单数据格式
                        idKey: "id", //id标识  可以修改为数据库对应字段
                        pIdKey: "pId", //父级id 
                        rootPId: 0, //根节点id
                    }
                },
                //设置点击事件
                callback: {
                    onClick: function(event, treeId, treeNode, clickFlag) {
                        console.log(treeNode.name)
                    }
                },
                check: {
                    enable: true,//是否显示 checkbox/radio
                    chkStyle: "radio",//设置显示类型 值可选：radio/checkbox
                }
            }

        function getCheckedNode(){
                //获取选中的数据

            //获取指定id的tree对象
            var treeObj = $.fn.zTree.getZTreeObj("ztree1");

            //获取选中的数据
            var checkedNods = treeObj.getCheckedNodes();

            console.log(checkedNods)    
        }

完整代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <!--导入样式文件和js文件 jquery要在ztree之前引入-->
        <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script src="js/jquery-1.4.4.min.js"></script>
        <script src="js/jquery.ztree.all.min.js"></script>
    </head>

    <body>
        <!--创建放置树的容器-->
        <ul id="ztree1" class="ztree">

        </ul>

        <button onclick="getCheckedNode()">获取已选的数据</button>
    </body>

    <script>
        $(function() {

            //树节点数据
            var zNodes1 = [{
                    "id": 1,
                    "pId": 0,
                    "name": "菜单一"
                },
                {
                    "id": 101,
                    "pId": 1,
                    "name": "菜单一子菜单一"
                },
                {
                    "id": 102,
                    "pId": 1,
                    "name": "菜单一子菜单二"
                },
                {
                    "id": 2,
                    "pId": 0,
                    "name": "菜单二"
                },
                {
                    "id": 201,
                    "pId": 2,
                    "name": "菜单二子菜单一"
                },
                {
                    "id": 202,
                    "pId": 2,
                    "name": "菜单二子菜单二"
                },
                {
                    "id": 3,
                    "pId": 0,
                    "name": "菜单三"
                },
            ];

            //创建ztree的配置对象
            var setting1 = {
                treeId: "ztree1",
                data: {
                    simpleData: {
                        enable: true, //设置使用简单数据格式
                        idKey: "id", //id标识  可以修改为数据库对应字段
                        pIdKey: "pId", //父级id 
                        rootPId: 0, //根节点id
                    }
                },
                //设置点击事件
                callback: {
                    onClick: function(event, treeId, treeNode, clickFlag) {
                        console.log(treeNode.name)
                    }
                },
                check: {
                    enable: true, //是否显示 checkbox/radio
                    chkStyle: "radio", //设置显示类型 值可选：radio/checkbox
                }
            }

            //初始化第一个树
            $.fn.zTree.init($("#ztree1"), setting1, zNodes1);

        })

        function getCheckedNode() {
            //获取选中的数据

            //获取指定id的tree对象
            var treeObj = $.fn.zTree.getZTreeObj("ztree1");

            //获取选中的数据
            var checkedNods = treeObj.getCheckedNodes();

            console.log(checkedNods)
        }
    </script>

</html>