（入门使用）zTree

最新推荐文章于 2024-09-08 13:51:16 发布

ud_All

最新推荐文章于 2024-09-08 13:51:16 发布

阅读量339

点赞数

本文链接：https://blog.csdn.net/ud_All/article/details/103522081

版权

注：

这里只是小白记录zTree的最基本用法，怕日后忘记，且部分API已过时，zTreeAPI实属太多，请自行参考官方文档

前端

HTML

引入zTree.js

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="../../../assets/js/jquery-1.7.2.js"></script>
	<link type="text/css" rel="stylesheet" href="../../../plugins/zTree/2.6/zTreeStyle.css"/>
	<script type="text/javascript" src="../../../plugins/zTree/2.6/jquery.ztree-2.6.min.js"></script>
	
	<!-- vue -->
	<script src="../../../assets/js-vue/vue.js"></script>
    <!--全局配置-->
    <script src="../../../assets/js-v/config.js"></script>
		<!--element-->
		<script src="../../../assets/plugins/element-ui/element-ui.js"></script>
		<link type="text/css" href="../../../assets/plugins/element-ui/element-ui.css" rel="stylesheet"/>
		<link rel="stylesheet" href="../../../assets/css/element-custom.css"/>

	
<body>

<div style="width:100%;" id="app">

<table style="width:100%;">
	<tr>
		<!--其他页面数据 ↓-->
		<div id="subject" v-for="(data,index) in subjectList" @click="checkSubject(index,data.BIANMA)">
			<el-tag :effect="checkIndex==index? 'dark' : 'plain'" style="cursor: pointer">{{data.NAME}}</el-tag>
		</div>

		<!--ztree ↓-->
		<td style="width:15%;" valign="top">
			<div style="width:15%;">
				<ul id="leftTree" class="tree" style="width: 170px;height:630px;overflow: auto">
					<li><img src="../../../assets/images/loading.gif" /></li>
				</ul>
			</div>
		</td>

		<!--使用iframe嵌套页面  ↓-->
		<td style="width:85%;" valign="top" >
			<iframe name="treeFrame" id="treeFrame" frameborder="0" src="b_jxpc_zsd_list.html" style="margin:0 auto;width:100%;height:100%;"></iframe>
		</td>
	</tr>
</table>

</div>
		
<!-- 本页面js -->
<script type="text/javascript" src="xxx.js"></script>
	
</body>
</html>

注：页面可以使用 iframe标签嵌套主页面，效果如下
在这里插入图片描述

JS文件

var zTree;
var vm = new Vue({
    el: '#app',

    data: {
       ...
    },

    methods: {
        //初始执行
        init() {
            this.getSubject();
            this.treeFrameT();
            console.log("默认：",this.SSXK);
        },

        //获取zTree数据列表 ssxk:主键
        getData: function (ssxk) {
            //发送 post 请求
            $.ajax({
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                url: httpurl + 'xxx/xxx',
                data: {
                    ssxk: ssxk
                },
                dataType: "json",
                success: function (data) {
                    if ("success" == data.result) {
                        var setting = {
                            showLine: true,     //是否显示节点之间的连线
                            checkable: false    //每个节点上是否显示 CheckBox
                        };
                        //接收后端拼接的json字符串 eval自行百度
                        var zTreeNodes = eval(data.zTreeNodes);
                        //获取页面的dom设置树状
                        zTree = $("#leftTree").zTree(setting, zTreeNodes);
                        //获取ztree的所有节点
                        var nodes = zTree.getNodes();
                        //转为节点数组
                        nodes = zTree.transformToArray(nodes);
                        //默认选择第一个节点
                        zTree.selectNode(nodes[0]);
                        //默认打开第一个节点
                        zTree.expandNode(nodes[0], true, false, true);
                        //默认跳转到第一个节点的URL
                        document.getElementById("treeFrame").src = nodes[0].url;
                    } else if ("exception" == data.result) {
                        alert("知识点模块" + data.exception);//显示异常
                    }
                }
            })
        },

        ...
        //设置高度样式
        treeFrameT: function () {
            var hmainT = document.getElementById("treeFrame");
            var bheightT = document.documentElement.clientHeight;
            hmainT.style.width = '100%';
            hmainT.style.height = (bheightT - 26) + 'px';
        }

    },

    mounted() {
        this.init();
    }
})

//onresize 事件会在窗口或框架被调整大小时发生
window.onresize = function () {
    vm.treeFrameT();
};

后端

controller

/**
	 * 显示列表ztree
	 * @return
	 */
	@RequestMapping(value="/listAllZSD")
	@ResponseBody
	public Object listAllZSD(String ssxk)throws Exception{
		Map<String,String> map = new HashMap<String,String>();
		String errInfo = "success";

		//根据业务获取数据
		List<Map<String, Object>> list = b_jxpc_zsdService.gradeList("0", ssxk);
		//转为Json数组
		JSONArray arr = JSONArray.fromObject(list);
		/**
		 * 替换字符串
		 * id 		节点ID
		 * pId 		父ID
		 * name 	节点名称
		 * nodes 	下级节点
		 * checked  是否选中
		 */
		String json = arr.toString();
		json = json.replaceAll("SYSTEMID", "id")
				.replaceAll("fzzsdid", "pId")
				.replaceAll("NR", "name")
				.replaceAll("subDict", "nodes")
				.replaceAll("hasDict", "checked");
		//返回数据
		map.put("zTreeNodes", json);
		map.put("result", errInfo);
		return map;
	}

serviceImpl

 /**
     * 获取所有的学段
     * 第一次先获取固定顶级'学段',再调用迭代查询子孙级'知识点'
     */
    @Override
    public List<Map<String, Object>> gradeList(String parentId,String ssxk) throws Exception {
        /**
         * 根据业务查询数据
         * 此处第一级分类和子孙级不同
         */
        List<Map<String, Object>> gradeList = b_jxpc_zsdMapper.gradeList();
        //迭代数据
        for (Map<String, Object> grade : gradeList) {
            /**
             * 设置值
             * url              点击节点访问的URL
             * subDict/nodes    子节点
             * target           设置点击节点后在何处打开 url。[treeNode.url 存在时有效]
             * hasDict/checked  是否选中
             */
            grade.put("url", "b_jxpc_zsd_list.html?zSSXK=" +ssxk + "&DICTIONARIES_ID=" + parentId + "&zND=" + grade.get("BIANMA"));
            //迭代查询子分级
            grade.put("subDict", iterationSon(grade.get("BIANMA").toString(), parentId,ssxk));
            grade.put("target", "treeFrame");		//前端ul id="treeFrame"
            grade.put("hasDict", false);

        }
        
        return gradeList;
    }

迭代查询子孙节点

 @Override
    public List<Map<String, Object>> iterationSon(String grade,String fzzsdid,String ssxk) throws Exception {
        List<Map<String, Object>> list = this.sonList(grade, fzzsdid,ssxk);
        //迭代list
        for (Map<String, Object> map : list) {
            map.put("url", "b_jxpc_zsd_list.html?zSSXK=" +ssxk + "&DICTIONARIES_ID=" + map.get("SYSTEMID") + "&zND=" + map.get("NDID"));
            map.put("subDict", this.iterationSon(map.get("NDID").toString(),map.get("SYSTEMID").toString(),map.get("SSXK").toString()));
            map.put("target", "treeFrame");
            map.put("hasDict", false);
        }
        return list;
    }

    /**
     * 根据ID查询子集体
     */
    public List<Map<String, Object>> sonList(String grade,String fzzsdid,String ssxk) throws Exception {
        return b_jxpc_zsdMapper.sonList(grade,fzzsdid,ssxk);
    }