树结构数据的展示和编辑-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, //点击选中事件
            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 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、编辑完成后点击空白处,即可完成编辑:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老安的博客

原创:用zabbix api批量添加web监控

26540
来自专栏杨建荣的学习笔记

通过shell和sql结合查找性能sql(r2笔记68天)

在生产系统中,会发现一些潜在的sql问题,为了能够及时和准确的定位,我们可以借助sql_monitor来做性能sql的查找。可以在后台启用一个job不定时的去查...

35570
来自专栏北京马哥教育

如何快速截取某段时间内的日志

在排除故障时,需要分析发生故障的原因,避免再次出现同样的问题,需要对日志进行分析,截取故障前后时间段的日志。通常用正则表达式来获取某段时间的内的日志,比较繁琐。...

29360
来自专栏kangvcar

关于Linux上SAMBA服务的权限问题(普通挂载)

18930
来自专栏乐沙弥的世界

Temporary failure in name resolution

    最近在使用yum方式安装perl-DBD-MySQL时碰到了Temporary failure in name resolution,Trying o...

32320
来自专栏腾讯云容器服务团队的专栏

腾讯云容器服务的滚动升级使用简介

滚动升级是一种多副本服务的升级方式,其特点是能够保证升级过程中服务不中断,对外界无感知。其原理大致为循环的执行以下步奏直至所有容器都被更新,本文将对其使用步骤进...

90500
来自专栏散尽浮华

线上图片批量更换脚本记录

需求说明: 线上之前使用的图片没有经过处理,比较大。应产品同事要求,将图片拿出来处理后再替换之前的图片,图片名不变。 /tmp/image目录下存放的修改后的图...

21160
来自专栏菩提树下的杨过

ActiveMQ笔记(1):编译、安装、示例代码

一、编译 虽然ActiveMQ提供了发布版本,但是建议同学们自己下载源代码编译,以后万一有坑,还可以尝试自己改改源码。 1.1 https://github.c...

30750
来自专栏杂烩

ActiveMQ消息队列 原

        下载完成后解压缩apache-activemq-5.5.1-bin.zip,然后双击apache-activemq-5.5.1\bin\acti...

16330
来自专栏帅小子的日常

ActiveMQ消息传递的两种方式

40890

扫码关注云+社区

领取腾讯云代金券