jQuery的ztree仿windows文件新建和拖拽效果

简介: jQuery的ztree仿windows文件新建和拖拽效果

前面的话:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。

需要的功能:


1:首先实现一颗jQuery的ztree的树形菜单,这个很简单,直接引用官方文档即可

2:点击新建组的按钮,会出现一个input对话框,填写想要新建的名称,在树形菜单上添加了一个父节点菜单。

3:可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。


下面开始撸代码:

1:首先要引入一些必要的文件,可自己在官方文档里面下载。

<!-- 树形菜单 -->
<link rel="stylesheet"  href="../../common/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="../../js/jquery-1.9.1.js" /></script>   
<script src="../../common/ztree/js/jquery.ztree.all.min.js"></script>

2:html界面,有新建组的按钮和盛放树形菜单的容器,还有填写文件名的input框以及提交按钮。

    <div class="">
                           <div>
                                <button id="add">新建组</button>
                            </div>
                            <div>
                                <ul id="ztree" class="ztree"></ul>
                            </div>
                            <div id="addgroup" style="display: none">
                                <input type="text" id="group" name="group">
                                <button id="submit">提交</button>
                            </div>
                </div>

3:css,这里的css样式是自己对于官方文档的一些修改,放了一些必要的图标,更加的生动形象。

#add{
    width:80px;
    height:30px;
    background:#2299ee;
    color:#ffffff;
    border:none;
    margin-top:10px;
    margin-bottom:10px;
}
.ztree li span.button.icon01_ico_close {
    margin-right: 2px;
    background: url(../../images/ztree/close.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}
.ztree li span.button.icon01_ico_open {
    margin-right: 2px;
    background: url(../../images/ztree/open.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}
.ztree li span.button.icon02_ico_docu {
    margin-right: 2px;
    background: url(../../images/ztree/woman.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}
.ztree li span.button.icon03_ico_docu {
    margin-right: 2px;
    background: url(../../images/ztree/man.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}

4:重点在于js,主要分为初始化ztree功能;添加分组功能;ztree结构设置功能;

$(function() {
    var zTreeObj;
    // 初始化ztree
    initTree();
    function initTree() {
        $.get(path() + "/ztree/init", function(data) {
            for ( var i in data) {
                if (data[i].token == "3")
                    data[i].nocheck = true;
            }
            zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);
        });
    }
    // 点击显示div
    $("#add").click(function() {
        $("#addgroup").show();
    })
    // 添加分组
    $("#submit").click(function() {
        $.ajax({
            url : path() + '/ztree/group/' + $("#group").val(),
            type : 'post',
            success : function(data) {
                $("#addgroup").hide();
                // 重新加载
                initTree();
            },
            error : function(data) {
                alert("添加分组失败!!")
            }
        });
    })
    // ztree结构设置
    var setting = {
        check : {
            enable : true,
            chkStyle : "radio",
            radioType : "all"
        },
        async : {// 异步加载数据操作
            enable : true,
            url : path() + "/ztree",
            autoParam : [ "id" ],
            type : "get",
            // dataFilter : ajaxDataFilter,//用于对 Ajax 返回数据进行预处理的函数
            dataType : "json"
        },
        edit : {
            enable : true,
            showRemoveBtn : false,// 设置是否显示删除按钮
            showRenameBtn : setRenameBtn,// 设置是否显示重新命名按钮
            drag : {
                isCopy : false,
                isMove : true,
                prev : true,
                next : true,
                inner : true
            }
        },
        data : {
            keep : {
                parent : true
            // 保持父节点的状态
            },
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pId"
            }
        },
        callback : {
            beforeDrag : beforeDrag,
            beforeDrop : zTreeBeforeDrop,
            onDrop : onDrop,
            onRename : zTreeOnRename,
        }
    };
    function setRenameBtn(treeId, treeNode) {
        return treeNode.isParent;
    }
    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        if (treeNode.name == '')
            return;
        var params = {
            id : treeNode.id,
            name : treeNode.name,
        }
        $.ajax({
            url : path() + '/ztree/group',
            contentType : 'application/json',
            type : 'post',
            data : JSON.stringify(params),
            error : function(data) {
                alert("操作失败!!")
            }
        });
    }
    function beforeDrag(treeId, treeNodes) {
        for (var i = 0, l = treeNodes.length; i < l; i++) {
            if (treeNodes[i].token == "3") {
                return false;
            }
        }
        return true;
    }
    function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
        if (targetNode.token != '3') {
            return false;
        }
        return true;
    }
    function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
        if (moveType == null)
            return;
        var params = {
            id : treeNodes[0].id,
            pId : targetNode.id,
            token : moveType,
        }
        // 设置父节点
        $.ajax({
            url : path() + '/ztree',
            contentType : 'application/json',
            type : 'put',
            data : JSON.stringify(params),
            error : function(data) {
                alert("操作失败!!")
            }
        });
    }
    // 获取项目路径
    function path() {
        var currentPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = currentPath.indexOf(pathName);
        var localhostPath = currentPath.substring(0, pos);
        var projectName = pathName.substring(0,
                pathName.substr(1).indexOf('/') + 1);
        return (localhostPath + projectName);
    }
})

好了,到此为止,一个可以添加新的节点和拖拽树形菜单的功能就实现了。

相关文章
|
2天前
|
Python Windows
在 Windows 平台下打包 Python 多进程代码为 exe 文件的问题及解决方案
在使用 Python 进行多进程编程时,在 Windows 平台下可能会出现将代码打包为 exe 文件后无法正常运行的问题。这个问题主要是由于在 Windows 下创建新的进程需要复制父进程的内存空间,而 Python 多进程机制需要先完成父进程的初始化阶段后才能启动子进程,所以在这个过程中可能会出现错误。此外,由于没有显式导入 Python 解释器,也会导致 Python 解释器无法正常工作。为了解决这个问题,我们可以使用函数。
11 5
|
3天前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
|
1月前
|
安全 数据安全/隐私保护 Windows
Windows文件搜索神器Everything安装配置结合内网穿透实现公网查询本地文件
Windows文件搜索神器Everything安装配置结合内网穿透实现公网查询本地文件
|
1月前
|
Apache 项目管理 数据安全/隐私保护
Windows安装TortoiseSVN客户端结合Cpolar实现公网提交文件到本地服务器
Windows安装TortoiseSVN客户端结合Cpolar实现公网提交文件到本地服务器
|
1月前
|
Oracle Java 关系型数据库
windows 下 win11 JDK17安装与环境变量的配置(配置简单详细,包含IJ中java文件如何使用命令运行)
本文介绍了Windows 11中安装JDK 17的步骤,包括从官方网站下载JDK、配置环境变量以及验证安装是否成功。首先,下载JDK 17的安装文件,如果没有Oracle账户,可以直接解压缩文件到指定目录。接着,配置系统环境变量,新建`JAVA_HOME`变量指向JDK安装路径,并在`Path`变量中添加。然后,通过命令行(cmd)验证安装,分别输入`java -version`和`javac -version`检查版本信息。最后,作者分享了如何在任意位置运行Java代码,包括在IntelliJ IDEA(IJ)中创建的Java文件,只需去掉包声明,就可以通过命令行直接运行。
567 1
|
1月前
|
网络协议 安全 文件存储
Windows如何使用IIS服务搭建本地WebDAV网站并实现远程管理储存文件
Windows如何使用IIS服务搭建本地WebDAV网站并实现远程管理储存文件
|
1月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
1月前
|
存储 安全 文件存储
Windows系统本地部署HFS并结合内网穿透实现公网访问本地存储文件
Windows系统本地部署HFS并结合内网穿透实现公网访问本地存储文件
Windows系统本地部署HFS并结合内网穿透实现公网访问本地存储文件
|
1月前
|
Java 程序员 Windows
【windows自带exe】使用`findstr.exe`来搜索包含某个字符串的文件
【windows自带exe】使用`findstr.exe`来搜索包含某个字符串的文件
60 0
|
1月前
|
安全 Linux 网络安全
Windows搭建Emby媒体库服务器,无公网IP远程访问本地影音文件
Windows搭建Emby媒体库服务器,无公网IP远程访问本地影音文件
37 0

相关课程

更多