获取ztree树的选中子菜单信息并且提交给后端

简介: 获取ztree树的选中子菜单信息并且提交给后端

前面写过,ztree实现一棵树的文章,https://www.jianshu.com/p/c2b919e91e91

现在要用ajax+json模拟交互效果

需求:1:请求json数据,渲染在界面,形成一棵树

2:获取选中的子菜单,并且将选中的信息传递给后端


图片.png

代码:(css比较简陋,需要的可自行编写)

<!DOCTYPE html>
<html>
    <head>
        <title>ztree</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" />
        <link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" />
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
        <script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
        <script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>
    </head>
    <body>
        <ul id="zTree" class="ztree">
        </ul>
        <button type="submit" id="addBtn">提交</button>
    </body>
    <script type="text/javascript">
        //树形菜单
        var zTreeObj; //定义ztree对象
        initTree(); //初始化ztree
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: {
                    "Y": "s",
                    "N": "s"
                }
            },
            view: {
                selectedMulti: true,
                showLine: false
            },
            data: {
                key: {
                    name: "name"
                },
                simpleData: {
                    enable: true,
                    pIdKey: "pId",
                }
            },
        };
        //请求数据
        function initTree() {
            $.get("data.json", function(data) {
                console.log(JSON.stringify(data));
                zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);
                zTreeObj.expandAll(true);
            });
        }
        //添加保存  
        $("#addBtn").on("click", function() {
            var params = {
                personIds: checkNode(),
            }
            alert(JSON.stringify(params))
            $.ajax({
                url: basePath + "/patrol",
                contentType: 'application/json',
                data: JSON.stringify(params),
                type: "POST",
                success: function(data) {
                }
            });
        })
        //获取选中的人员
        function checkNode() {
            nodes = zTreeObj.getCheckedNodes(true);
            var permTokens = new Array(); //创建list集合
            var j = 0;
            for(var i = 0; i < nodes.length; i++) {
                if(nodes[i].token == "organ")
                    continue;
                permTokens[j] = nodes[i].token;
                j++;
            }
            return permTokens;
        }
    </script>
</html>

json数据:

[
    {
        "id": null,
        "pId": 1,
        "name": "典韦212",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "D91D0DE952DE",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "马可波罗",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "EAFA6CCF3CDD",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "lkjTest",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "D69C2A3ACB30",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "DDDDD",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "DDDDDD",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "DDDDDF",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "EEEEEEE",
        "type": 1
    }, {
        "id": 1,
        "pId": 0,
        "name": "王小婷",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 134,
        "pId": 1,
        "name": "技术部",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 137,
        "pId": 1,
        "name": "wer",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 138,
        "pId": 1,
        "name": "wer",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 139,
        "pId": 1,
        "name": "wer",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }
]
相关文章
|
4月前
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
|
5月前
|
开发框架 前端开发 JavaScript
ABP框架测试信息---Winform端、动态网站、Vue&Element管理后端等
ABP框架测试信息---Winform端、动态网站、Vue&Element管理后端等
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
|
6月前
|
Java
大事件后端项目04-----yml配置信息书写和获取,邮箱如何设计
大事件后端项目04-----yml配置信息书写和获取,邮箱如何设计
|
7月前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
消息中间件 存储 XML
【易售小程序项目】私聊功能后端实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
【易售小程序项目】私聊功能后端实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
159 0
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
205 0
报错信息 "ResultCode:403" 表示后端服务器返回的错误代码是403
报错信息 "ResultCode:403" 表示后端服务器返回的错误代码是403
315 1
|
存储 小程序 前端开发
【易售小程序项目】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
【易售小程序项目】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
173 0
|
6天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
21 1

热门文章

最新文章

下一篇
无影云桌面