zTree使用小例子

通过json初始化树的几种方式

*这里使用了easyui来进行页面布局，重点在于西边的树的初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="js/easyui/themes/icon.css">
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
    <!--导入zTree-->
    <link rel="stylesheet" href="js/ztree/zTreeStyle.css">
    <script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>

    <title>Title</title>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">北部</div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">南部</div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;">
        <ul id="ztree2" class="ztree"></ul>
    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
        <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加一个面板</a>
        <div id="mytabs" class="easyui-tabs" data-options="fit:true">
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div data-options="closable:true" title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>
    </div>
<script>
    //③通过ajax请求来构建树
    $(function(){
        //页面加载完成后，执行这段代码----动态创建ztree
        var setting3 = {
            data: {
                simpleData: {
                    enable: true//使用简单json数据构造ztree节点
                }
            }
        };

        //发送ajax请求，获取json数据
        //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
        var url = "json/menu.json";
        $.post(url,{},function(data){
            //调用API初始化ztree
            $.fn.zTree.init($("#ztree2"), setting3, data);
        },'json');
    });
    //②通过简单json来构架树
//    $(function(){
//        //页面加载完成后，执行这段代码----动态创建ztree
//        //通过seting来指定节点创建的方式
//        var setting2 = {
//            data: {
//                simpleData: {
//                    enable: true//使用简单json数据构造ztree节点
//                }
//            }
//        };
//        //这种方式的特点就是最后一个节点作为根节点，往前进行层级推进
//        //构造节点数据
//        var zNodes2 = [
//            {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
//            {"id":"2","pId":"3","name":"节点二"},
//            {"id":"3","pId":"0","name":"节点三"}
//        ];
//        //调用API初始化ztree
//        $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
//    });
//①构建树的第一种方式，通过标准json来构建树
    //    $(function(){
//        //根据标准json来创建类似文件夹的结构，过时了
//        var setting = {};
//        //构造节点数据
//        var zNodes = [
//            {"name":"节点一","children":[
//                {"name":"节点一_1"},
//                {"name":"节点一_2"}
//            ]},//每个json对象表示一个节点数据
//            {"name":"节点二"},
//            {"name":"节点三"}
//        ];
//        //调用API初始化ztree，jquery引用插件进行元素的初始化，先清空在
//        $.fn.zTree.init($("#ztree1"), setting, zNodes);
//    });
</script>
<script>
    $(function(){
//        动态创建tab
        $('#btn').bind('click', function(){
            var e = $("#mytabs").tabs("exists","面板四");
            if(e){
                $("#mytabs").tabs("select","面板四");
            }else{
                $("#mytabs").tabs("add",{
                    title:'面板四',
                    iconCls:'icon-edit',
                    closable:true,
                    content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
                });
            }
        });

    });
</script>
</body>
</html>

为节点添加点击事件：可以理解为左边的树和中间的tab进行事件绑定，显示对应的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <!--导入zTree-->
    <link rel="stylesheet" href="js/ztree/zTreeStyle.css">
    <script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>

    <title>Title</title>
</head>
<body>
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，执行这段代码----动态创建ztree
        var setting3 = {
            data: {
                simpleData: {
                    enable: true//使用简单json数据构造ztree节点
                }
            },
            //此时没办法实现添加函数，没有对应的id值，后期链
        callback: {
            //为ztree节点绑定单击事件
            onClick: function(event, treeId, treeNode){
                if(treeNode.page != undefined){
                    var e = $("#mytabs").tabs("exists",treeNode.name);
                    if(e){
                        //已经存在，选中
                        $("#mytabs").tabs("select",treeNode.name);
                    }else{
                        //动态添加一个选项卡
                        $("#mytabs").tabs("add",{
                            title:treeNode.name,
                            closable:true,
                            content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
                        });
                    }
                }
            }
        }

    };

        //发送ajax请求，获取json数据
        //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
        var url = "json/menu.json";
        $.post(url,{},function(data){
            //调用API初始化ztree
            $.fn.zTree.init($("#ztree1"), setting3, data);
        },'json');
    });
</script>
</body>
</html>

猜你喜欢