zTree的简单使用

一.基本效果

1.导包

<!--直接导入ztree的all包就可以不用导入其他的包了-->

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">

2.基本效果

<div title="面板二">
                <!-- 展示ztree效果 -->
                <ul id="ztree1" class="ztree">
                <script type="text/javascript">
                    $(function(){
                        //页面加载完后，执行这段代码---动态创建ztree
                        var setting = {};
                        //构造节点数据
                        var zNodes=[
                                    {"name":"节点一"},
                                    {"name":"节点二"},
                                    {"name":"节点三"}
                                    ];
                        //调用SPI初始化ztree   setting为格式  zNodes为节点
                        $.fn.zTree.init($("#ztree1"), setting, zNodes);
                    });
                </script>
                    
                </ul>
            </div>

2.构造子节点

var zNodes=[
                                    {"name":"节点一","children":[
                                                              {"name":"子1"},
                                                              {"name":"子2"},
                                                              {"name":"子3"},
                                                              ]},
                                    {"name":"节点二"},         
                                    {"name":"节点三"}
                                    ];

3.利用ajax和json数据来构造节点

<ul id="ztree1" class="ztree">
                <script type="text/javascript">
                    $(function(){
                        //页面加载完后，执行这段代码---动态创建ztree
                        var setting = {};
                        //发送ajax请求，获取json数据
                        var url = "${pageContext.request.contextPath}/json/menu.json";
                        $.post(url,{},function(data){
                            //调用SPI初始化ztree
                            $.fn.zTree.init($("#ztree1"), setting, data);
                        },"json");
                        
                        
                    });
                </script>
                    
                </ul>

4.使用simple开区分上下级别

                <ul id="ztree2" class="ztree"></ul>
                <script type="text/javascript">
                    $(function(){
                        //页面加载完成后，执行这段代码----动态创建ztree
                        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);
                    });
                </script>
            </div>
            <div title="面板四">

5.结合easyui动态跳转页面

<!-- 展示ztree效果 -->
                <ul id="ztree1" class="ztree">
                <script type="text/javascript">
                //页面加载完后，执行这段代码---动态创建ztree
                    $(function(){
                    
                        var setting = {
                                data: {
                                    simpleData: {
                                        enable: true, //使用简单json数据构造ztree节点
                                        
                                    }
                                },
                                //在页面中配置callback函数用于页面跳转
                                callback: {
                                    onClick: zTreeOnClick
                            }
                        };
                        //发送ajax请求，获取json数据
                        var url = "${pageContext.request.contextPath}/json/menu.json";
                        $.post(url,{},function(data){
                            //调用SPI初始化ztree
                            $.fn.zTree.init($("#ztree1"), setting, data);
                        },"json");
                    });
                
                    //用于点击之后中心区域跳转页面
                    function zTreeOnClick(event, treeId, treeNode) {
                        var ifexist =  $("#mytabs").tabs("exists",treeNode.name);
                        if(ifexist){
                            $("#mytabs").tabs("select",treeNode.name);
                        }else{
                            //调用add来添加一个选项卡
                            $("#mytabs").tabs("add",{
                                title:treeNode.name,
                                closable:true,
                                iconCls:'icon-edit',
                                content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
                            });    
                        };
                    };
                        
                </script>
                </ul>

补充ztree最终数据格式：[
        { "id":"11", "pId":"0", "name":"基础数据"},
        { "id":"112", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},
        { "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
        { "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
        { "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
        { "id":"12", "pId":"0", "name":"受理"},
        { "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
        { "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
        { "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
        { "id":"13", "pId":"0", "name":"调度"},
        { "id":"131", "pId":"13", "name":"查台转单","page":""},
        { "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]

 

ztree展开节点：

           https://www.cnblogs.com/qlqwjy/p/8976969.html