jQuery ztree

最新推荐文章于 2019-09-04 12:54:20 发布

毋十三

最新推荐文章于 2019-09-04 12:54:20 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34117624/article/details/83584299

本文介绍如何使用ZTree插件与EasyUI框架结合，实现动态创建树形结构，并展示三种通过JSON数据初始化ZTree的方法。同时，文章还演示了如何通过点击事件绑定左侧树与中间Tab面板，实现内容的动态切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过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>

案例：zTree

	$(function(){
		// 授权树初始化
		var setting = {
			data : {
				key : {
					title : "t"
				},
				simpleData : {
					enable : true
				}
			},
			check : {
				enable : true,
			}
		};
		
		$.ajax({
			url : '${pageContext.request.contextPath}/functionAction_listajax.action',
			type : 'POST',
			dataType : 'json',
			success : function(data) {
				$.fn.zTree.init($("#functionTree"), setting, data);
			},
			error : function(msg) {
				alert('树加载异常!');
			}
		});
-----------------------------------------------------------------
<ul id="functionTree" class="ztree"></ul>

怎么获取选中的节点

		// 点击保存
		$('#save').click(function(){
			var result=$('#roleForm').form("validate");	
			if(result){
				//隐藏于数据封装
				var treeObj=$.fn.zTree.getZTreeObj("functionTree");
				var nodes=treeObj.getCheckedNodes(true);
				var arr=new Array();
				for(var i=0;i<nodes.length;i++){
					var id=nodes[i].id;
					arr.push(id);
				}
				var functionIds=arr.join(",");
				$("input[name='functionIds']").val(functionIds);
				$('#roleForm').submit();
			}
		});

案例：左边初始化ztree，点击之后可以对右边的tab进行切换

首先看一下json的格式，注意这里的pId的格式。是固定的，hibernate关联查询的时候一定要提供get方法

[
		{ "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的代码，原理参不透，jQuery不熟。。。用到时在细研究吧

	$(function() {
		var setting = {
			data : {
				simpleData : { // 简单数据 
					enable : true
				}
			},
			callback : {
				onClick : onClick
			}
		};
		
		// 基本功能菜单加载
		$.ajax({
			url : '${pageContext.request.contextPath}/functionAction_findMenu.action',
			type : 'POST',
			dataType : 'text',
			success : function(data) {
				var zNodes = eval("(" + data + ")");
				$.fn.zTree.init($("#treeMenu"), setting, zNodes);
			},
			error : function(msg) {
				alert('菜单加载异常!');
			}
		});