`

ZTree工具类汇总,包括:新增、编辑和删除节点,并提交后台

阅读更多

相关阅读:

X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作

Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法

X-admin2.2表单提交方式及注意事项

Spring Boot 踩坑系列之Error resolving template

Maven项目中引入net.sf.json.JSONObject依赖jar包

最近在基于Spring Boot+X-admin2.2(LayUi)+framemark开源一个后台管理系统,其中部门管理部分需要使用属性菜单,整理一下ZTree的使用工具类,供大家参考。

有需要功能完整代码的可以添加右侧公众号“十点数据”获取。

代码如下:

var ZTreeUtils = {};
(function(ZTreeUtils) {
    var nodeId = null;// 当前点击节点的ID
    var nodeName = null;// 当前点击节点的名称
    var addNodeUrl = null;// 添加节点时调用的后台URL;
    var delNodeUrl = null;// 删除节点时调用的URL;
    var treeId = null;// 当前操作的树标签的ID属性值;
    var table = null;
    var tableIdValue = null;
    ZTreeUtils.tree = function(nodeUrl, adNodeUrl, deNodeUrl, treeId,
            tableObject, tableId) {
        table = tableObject
        tableIdValue = tableId
        addNodeUrl = adNodeUrl;
        delNodeUrl = deNodeUrl;
        treeId = treeId;
        var setting = {
            view : {
                selectedMulti : false
            },
            check : {
                enable : false
            },
            data : {
                simpleData : {
                    enable : true
                }
            },
            edit : {
                enable : false
            },
            callback : {
                onClick : ZTreeUtils.onClick
            }
        };
        var result = Ajaxget.excute(nodeUrl, false, null, false);
        $(document).ready(function() {
            $.fn.zTree.init($("#" + treeId), setting, result.data);
        });
    }
    //点击节点 
    ZTreeUtils.onClick = function(e, treeId, treeNode) {
        nodeId = treeNode.id;
        nodeName = treeNode.name;
        ("#nodeId").val(nodeId);
        table.reload(tableIdValue, { // 此处是上文提到的 初始化标识id
            where : {
                nodeId : nodeId
            }
        });
    }
    // 添加节点;
    ZTreeUtils.addNode = function() {
        if (ZTreeUtils.isClick()) {
            xadmin.open('新增节点', addNodeUrl + "?id=0" + "&parentId=" + nodeId,
                    700, 305);
        }
    }

    // 编辑节点;
    ZTreeUtils.editNode = function() {
        // addNodeUrl:后台请求URL;
        if (ZTreeUtils.isClick()) {
            xadmin.open('编辑[' + nodeName + ']节点', addNodeUrl + "?id=" + nodeId
                    + "&parentId=0", 700, 305);
        }
    }
    // 删除一个节点;
    ZTreeUtils.delNode = function() {
        // delNodeUrl:后台请求URL;
        var ids = [];
        if (ZTreeUtils.isClick()) {
            ids.push($("#nodeId").val());
            layer.confirm('确认要删除[' + nodeName + ']节点吗?', function(index) {
                data = {};
                data["id"] = ids.join(',');// 数组转为字符串;
                result = Ajaxget.excute(delNodeUrl, false, data, true)// 发同步请求,把数据提交给后台;
                if (result['sucess'] == "true" || result['sucess'] == true) {// 发异步删除数据
                    window.location.reload();// 刷新当前页面
                    layer.msg('已删除[' + nodeName + ']节点!', {
                        icon : 1,
                        time : 2000
                    });
                }
            });
        }
    }
    ZTreeUtils.isClick = function() {
        var nodeId = ("#nodeId").val();
        if (nodeId == null || nodeId == "" || nodeId == undefined) {
            layer.msg("请选择所要处理的部门节点 ", {
                icon : 6,
                time : 2000
            });
            return false;
        } else {
            return true;
        }
    }
})(ZTreeUtils);

Ajax提交工具类代码如下:

var Ajaxget = {};
(function(Ajaxget) {
          Ajaxget.excute = function(url, async, values, toJson) {
        console.log(url);
        console.log(values);
        var data = {};
        $.ajax({
            type : "GET",
            async : async,// 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
            url : url,
            data : values,
            dataType : "json",
            success : function(result) {
                // $('#resText').empty(); // 清空resText里面的所有内容
                data = result;
                console.log(data);
            },
            error : function(result) {
                data = result;
                console.log(data);
            }
        });
        if (toJson == true)// 将json字符串格式化为json对象
            data = JSON.parse(data);
        return data;
    };
})(Ajaxget);

最后效果如下图:

demo.png

具有功能如下:

1:树节点的添加、编辑和删除;
2:点击树节点时,刷新右侧用户列表;
3:右侧用户列表中数据的新增、编辑、删除等;
4:用户的查询、导出、打印等;
分享到:
评论

相关推荐

    zTree工具类

    zTree工具类主要针对zTree进行了一系列的封装和优化,旨在简化开发流程,提高开发效率。在处理大数据量的异步加载场景下,zTree表现尤为出色。 1. **zTree的基本概念** - **节点(Node)**:zTree中的基本单位,每...

    ztree树选中节点弹出层编辑

    在用户选中节点后,可以使用这些组件显示一个包含编辑表单的窗口,用于编辑节点信息。为了与ZTree交互,我们需要在弹出层中嵌入相应的表单控件,并绑定事件处理函数,以便在用户提交更改时更新ZTree的节点数据。 4....

    ztree树,带复选框,右键增加,修改,删除节点可连接后台。

    在本项目中,我们关注的是ZTree的一个特定实现,即带有复选框的树形结构,用户可以通过右键菜单对节点进行增加、修改和删除操作,并且这些操作能够实时与后台服务器进行交互。 一、ZTree简介 ZTree是一个基于...

    使用ztree构建树形菜单,需要引入的js及样式文件

    这个文件是使用ZTree时必不可少的,它包含了节点的添加、删除、修改、展开、折叠等操作,以及事件监听和处理等核心功能。 2. `jquery.ztree.excheck.js` 或 `jquery.ztree.exedit.js`:这两个文件是ZTree的扩展功能...

    ztree-JS-CSS

    1. **节点操作**:添加、删除、编辑、展开与折叠节点,这些操作都可通过API进行控制,实现对树形结构的动态管理。 2. **多级节点**:支持无限层级的节点结构,能够展示复杂的组织关系或层级数据。 3. **节点状态...

    ZTree学习(二):异步加载树结构 - CSDN博客1

    1. 数据格式不匹配:确保服务器返回的数据符合 ZTree 预期的格式,包括 `idKey`, `pIdKey` 和 `name` 等字段。 2. 加载速度慢:优化服务器端的查询效率,或者考虑分页加载,减少一次性获取的数据量。 3. 回调函数未...

    ztree将节点数据提交给Server端

    ztree将节点数据提交给Server端例子: 将页面的节点ID遍历解析成字符串形式提交到后台。 文件分为MyEclipse项目ztest.rar和war包。 war包tomcat下运行,打开http://localhost:8080/ztest测试。 开发环境: MyEclipse...

    ztree工具类

    在这个"ztree工具类应用"中,我们将深入探讨ZTree的核心功能、使用方法以及常见应用场景。 1. **ZTree的基本结构** ZTree的基础是HTML中的`<ul>`和`<li>`元素,通过JavaScript和CSS进行动态渲染,形成具有层级关系...

    ztree实现左右两棵树的节点移动

    - 左移右:当用户选择左侧树的一个节点并将其移动到右侧时,我们需要在后台处理这个动作,将该节点从左侧树的数据源中删除,并在右侧树的数据源中新增这个节点。同时,ZTree提供了事件监听机制,我们可以监听`...

    zTree后台组装树结构java代码

    以上就是关于"zTree后台组装树结构java代码"的主题知识,包括了zTree的使用、Java与MySQL的交互、递归算法构建树、Spring JDBC等内容。理解并掌握这些知识点,能够帮助开发者高效地构建基于zTree的树形界面。

    zTree帮助文档_ztree_

    提供的`.chm`文件是zTree的官方帮助文档,包含了详细的API介绍、示例代码以及常见问题解答,是学习和使用zTree的重要参考资料。通过阅读此文档,开发者可以更好地理解和运用zTree的各种功能,解决实际开发中遇到的...

    zTreeAPI_v2.5

    每个节点都包含一系列属性,如`checked`(是否被选中)、`click`(点击事件)、`icon`(图标)、`isParent`(是否为父节点)、`nodes`(子节点列表)等,这些属性使得树节点具备了丰富的交互性和扩展性。 #### 方法...

    ztree全套的增删改查实例,包括编辑排序子节点操作,源码仅供参考

    3. **修改节点**:通过`editNode()`方法可以编辑节点的属性,如名称、图标等。编辑时可能需要触发异步操作,例如保存修改到服务器。 4. **查找节点**:ZTree提供`searchNode()`方法进行关键字搜索,可以快速定位到...

    jquery ztree自定义编辑的树形菜单插件

    ZTree的编辑功能包括节点文本的修改、拖拽节点调整层级以及添加、删除节点。`setting.edit.drag`和`setting.edit.rename`分别控制拖拽和重命名功能。添加节点通常通过调用`treeObj.addNodes()`实现,删除节点则使用...

    解决ztree添加节点不显示问题

    这段代码定义了一个名为`.ztree li span.button.add`的新CSS类,其中包含了必要的样式属性。这些样式属性包括了`margin`、`background-position`和`vertical-align`等,这些都是控制新添加节点外观的关键因素。 ###...

    ztree树界节点删除,移动

    ztree树界节点删除,移动 利用ztree插件对树节点进行删除,移动

    bootstrap风格的zTree树形菜单代码.zip

    3. **节点操作**:提供了添加、编辑、删除、展开、折叠等丰富的节点操作功能,便于用户进行数据管理。 4. **事件监听**:通过绑定各种事件,如点击、双击、展开/折叠等,可以实现复杂的业务逻辑。 5. **图标支持**:...

    ztree根据文本内筛选叶子节,并改变叶子节点字体颜色

    ZTree是由JSON数据驱动的,每个节点包含了id、name、pId等属性,用于定义节点的层级关系和显示信息。叶子节点通常指的是没有子节点的节点,它们通常是数据的终端。 在"ztree根据文本内筛选叶子节,并改变叶子节点...

    easyui+ztree后台管理系统模板

    EasyUI和ZTree是两个在Web开发中常用的前端框架,尤其在...通过以上知识点的学习和应用,开发者可以快速构建出一个功能完善的后台管理系统,同时也能深入理解EasyUI和ZTree这两个工具的使用,提升自身的Web开发技能。

    jquery ztree 根目录只能够添加一级目录,子节点添加新的节点到当前节点下方

    本文将深入探讨“jQuery ZTree 根目录只能够添加一级目录,子节点添加新的节点到当前节点下方”这一特定问题,并提供相关的解决方案。 首先,ZTree的核心功能是展示和操作树形数据,它支持多级节点、拖拽排序、异步...

Global site tag (gtag.js) - Google Analytics