史上最简单的树结构 ztree

最新推荐文章于 2024-04-26 15:21:07 发布

taiguolaotu

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量619

点赞数

分类专栏：浅谈前端文章标签：树结构

本文链接：https://blog.csdn.net/taiguolaotu/article/details/107034113

版权

浅谈前端专栏收录该内容

48 篇文章 1 订阅

订阅专栏

我实现的树结构使用的是Jquery中的Ztree技术。不同技术不同对待

首先看一下完整的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../ztree/js/jquery.ztree.core.min.js"></script>
    <link href="../ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">

</head>

<script type="text/javascript">

    var zTreeObj;

    var setting = {
        callback: {
            onClick: zTreeOnClick
        },
        data: {
            key: {
                name:"columnName"
            },
            simpleData: {
                //enable:true   采用简单数据模式 (Array)
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: 0          //父id的值
            }
        }
    };
    //pId:父节点的id

    function zTreeOnClick(event, treeId, treeNode){
        var id=treeNode.id

    }

    $(document).ready(function(){
        $.post(
            "/api/getSysColumnAll",
            function(data){
                console.log(data)
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                zTreeObj.expandAll(true);
            }
        )
    });

</script>
<body>
<div class="container"  >
    <div class="left" style="height:800px; ">
        <h5><span class="icon-pencil-square-o"></span>文章栏目</h5>
        <ul id="treeDemo" class="ztree" ></ul>
    </div>
</div>

</body>
</html>

讲解一下，首先写一个ul标签，id的值自定义

 <ul id="treeDemo" class="ztree" ></ul>

然后在script标签中写

//首先还要定义一个变量，与下面保持一致
var zTreeObj;

 $(document).ready(function(){
        $.post(
            "/api/getSysColumnAll",  	//接口请求路径
            function(data){
                console.log(data)
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                zTreeObj.expandAll(true);
            }
        )
    });

注意 $.fn.zTree.init($("#treeDemo"), setting, data);
括号中的值应与上述我说的自定义的是保持一致
其次在script标签中写

 var setting = {
        callback: {
            onClick: zTreeOnClick
        },
        data: {
            key: {
                name:"columnName"		//实体类中的属性名
            },
            simpleData: {
                //enable:true   采用简单数据模式 (Array)
                enable: true,
                idKey: "id",		//二级id	
                pIdKey: "parentId",	//一级id(父id)
                rootPId: 0          //父id的值
            }
        }
    };

具体有的内容我已经在代码中讲解，请大家仔细观看代码。大家还应当在head标签中引入如下jquery库和 css样式

    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../ztree/js/jquery.ztree.core.min.js"></script>
    <link href="../ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">

这几个文件没办法放在博客中，大家可以加群进行索取。

下面说一下后端的代码，其实后端的代码更加简单，就是一个查询所有的功能返回给前端即可，前端会自动进行树结构的展示。
在这里插入图片描述
直接一个selectAll即可，这里我用的是通用mapper,也没有写sql语句。
这是表中的数据，数据我没有截取全部

这是前端的树结构展示。

这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上！
欢迎加入技术群聊！

在这里插入图片描述

taiguolaotu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
史上最简单的树结构 ztree

我实现的树结构使用的是Jquery中的Ztree技术。不同技术不同对待首先看一下完整的html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/pintuer.css"> <link rel=
复制链接

扫一扫