树结构数据的展示和编辑-zTree树插件的简单使用

最近在项目当中遇到一个需求，需要以树结构的方式展示一些数据，并可对每一个树节点做内容的编辑以及树节点的添加和删除，刚好听说有zTree这个插件可以实现这样的需求，所以在项目的这个需求完成之后，在博客里用一个小demo的形式记录一下zTree的简单实用方法。

1、下载zTree插件

zTree的官网地址是：http://www.treejs.cn/v3/main.php#_zTreeInfo

下载地址是：https://gitee.com/zTree/zTree_v3

2、引入相应的css和js文件

　zTreeStyle.css
    jquery.min.js
jquery.ztree.core.min.js
    jquery.ztree.excheck.min.js
    jquery.ztree.exedit.min.js

3、不说废话，直接代码，简洁明了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>zTree的简单实用</title>

    <link rel="stylesheet" href="zTreeStyle.css">

    <script src="jquery.min.js"></script>

    <script src="jquery.ztree.core-3.5.min.js"></script>

    <script src="jquery.ztree.excheck-3.5.min.js"></script>

    <script src="jquery.ztree.exedit-3.5.min.js"></script>

    <style>

        .ztree li {line-height: 25px;}

        .ztree li span.button.switch {height: 20px;margin-top: -7px;}

        .ztree li span.button.ico_open,

        .ztree li span.button.ico_close {background-image: none; width: 0px;margin-left: -2px;}

        .ztree li span.button.ico_docu {background-image: none; width: 0px;}

        .ztree li a {height: 25px;}

        .ztree li span {font-size: 14px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL"}

        .ztree li a.curSelectedNode {height: 18px;}

        .ztree li a.curSelectedNode_Edit{height: 18px;}

        .ztree li a.curSelectedNode_Edit span {display: inline-block;height: 18px;}

        .ztree li a.curSelectedNode_Edit input {display: inline-block;height: 18px;font-size: 14px;width: 100%;min-width: 150px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL"}

        .ztree li a.curSelectedNode {max-width: 260px;overflow: hidden;}

        .ztree li span {max-width: 185px;display: inline-block;overflow: hidden;}

        .ztree li span input{width: 150px;}

        .ztree li span.button.add {margin-left: 2px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -278px;background-position-y: -237px;}

        .ztree li span.button.edit {margin-left: 3px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: 2px;background-position-y: 3px;}

        .ztree li span.button.remove {background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -138px;background-position-y: -137px;}

        .ztree li span.button.roots_close, .ztree li span.button.root_close, .ztree li span.button.center_close, .ztree li span.button.bottom_close

         {background-image: url(imgs/jui.png);background-position-x: -77px;background-position-y: -196px;}

        .ztree li span.button.roots_open, .ztree li span.button.root_open, .ztree li span.button.center_open, .ztree li span.button.bottom_open

         {background-image: url(imgs/jui.png);background-position-x: -117px;background-position-y: -196px;}

    </style>

</head>

<body>

    <div>

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

    </div>

</body>

<script>

    //zTree的配置

    var setting = {

        view: {

            addHoverDom: addHoverDom,

            removeHoverDom: removeHoverDom,

            selectedMulti: false

        },

        edit: {

            enable: true,

            editNameSelectAll: true,

            showRemoveBtn: showRemoveBtn,

            showRenameBtn: showRenameBtn

        },

        data: {

            simpleData: {

                enable: true

            }

        },

        callback: {

            onClick:zTreeOnClick, //点击选中事件　　

            beforeDrag: beforeDrag,    // 可设置是否允许拖拽功能   
            beforeEditName: beforeEditName,

            beforeRemove: beforeRemove,

            beforeRename: beforeRename,

            onRemove: onRemove,

            onRename: onRename

        }

    };

    //zTree初始化加载的节点树

    var zNodes =[

        { id:1, pId:0, name:"父节点 1", open:true},  //open属性的值true和false，表示是否在初始化加载后展开子节点

        { id:11, pId:1, name:"子节点 1-1"},

        { id:12, pId:1, name:"子节点 1-2"},

        { id:13, pId:1, name:"子节点 1-3"},

        { id:2, pId:0, name:"父节点 2", open:true},

        { id:21, pId:2, name:"子节点 2-1"},

        { id:22, pId:2, name:"子节点 2-2"},

        { id:23, pId:2, name:"子节点 2-3"},

        { id:3, pId:0, name:"父节点 3", open:false},

        { id:31, pId:3, name:"子节点 3-1"},

        { id:32, pId:3, name:"子节点 3-2"},

        { id:33, pId:3, name:"子节点 3-3"},

    ];

    var log, className = "dark";

    function zTreeOnClick(event, treeId, treeNode) {

        console.log('zTreeOnClick');

        console.log(treeNode)

        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),

            nodes = treeObj.getCheckedNodes(true),

            v = "";

        for (var i = 0; i < nodes.length; i++) {

            v += nodes[i].name + ",";

            console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值

        }

    }
    function beforeDrag(treeId, treeNode) { 
　　     return false; //false=禁用拖拽功能， true=开启
    }

    function beforeEditName(treeId, treeNode) {

        console.log('beforeEditName');

        console.log(treeNode)

        className = (className === "dark" ? "":"dark");

        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        zTree.selectNode(treeNode);

        zTree.editName(treeNode);

    }

    function beforeRemove(treeId, treeNode) {

        console.log('beforeRemove');

        className = (className === "dark" ? "":"dark");

        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        zTree.selectNode(treeNode);

        return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");

    }

    function onRemove(e, treeId, treeNode) { //确定删除节点

        console.log('onRemove');

        console.log(treeNode)

    }

    function beforeRename(treeId, treeNode, newName, isCancel) {

        console.log('beforeRename');

        className = (className === "dark" ? "":"dark");

        if (newName.length == 0) {

            setTimeout(function() {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                zTree.cancelEditName();

                alert("节点名称不能为空。");

            }, 0);

            return false;

        }

        return true;

    }

    function onRename(e, treeId, treeNode, isCancel) {

        console.log('onRename')

        console.log(treeNode)

    }

    function showRemoveBtn(treeId, treeNode) {

        return true;

    }

    function showRenameBtn(treeId, treeNode) {

        return true;

    }

    var newCount = 1;

    function addHoverDom(treeId, treeNode) {

        var sObj = $("#" + treeNode.tId + "_span");

        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId

            + "' title='添加子节点' onfocus='this.blur();'></span>";

        sObj.after(addStr);

        $('.edit').attr('title', '编辑');

        $('.remove').attr('title', '删除');

        var btn = $("#addBtn_"+treeNode.tId);

        if (btn) btn.bind("click", function(){

            var zTree = $.fn.zTree.getZTreeObj("treeDemo");

            var obj = {id:(100 + newCount), pId:treeNode.id, name:"新增子节点 " + (newCount++)};

            zTree.addNodes(treeNode, obj);

            console.log(obj)

            console.log('添加成功')

            return false;

        });

    };

    function removeHoverDom(treeId, treeNode) {

        $("#addBtn_"+treeNode.tId).unbind().remove();

    };

    $(document).ready(function(){

        console.log('ready');

        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    });

</script>

</html>

其中的<style></style>部分是自定义的样式，主要用来更换插件默认的添加、删除、编辑、展开和收缩的小图标的

4、效果图

1、初始化加载页面后：

2、选中某个节点后，会出现添加、编辑、删除的操作图标：

3、在第一个父节点新增了一个子节点：

4、在某一个节点点击删除按钮后的确认提示：

5、点击了某一个节点的编辑按钮后，呈现可编辑状态：

6、编辑完成后点击空白处，即可完成编辑：

7、每个子节点下还可以再无限新增子节点

注：以上代码部分的操作，只是针对DOM做了增删改的操作，如果在具体项目业务中使用的话，还是要另外自己编写相应代码，来保存操作的数据，这里不再一一写出。

需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07