专栏首页编程微刊获取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
    }
]

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ztree取消节点操作

    但是在Ztree的组件里面,我们看到的勾选框并不是checkbox完成,而是使用了图片精灵,选中和未选中的状态里面是一张背景图片里面不同的定位~

    祈澈菇凉
  • 基于ztree树的穿梭框

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

    祈澈菇凉
  • Echarts去掉中间的网格线

    有些很炫酷的界面上,为了适应整体的风格,Echarts统计图上的很多属性都要做响应的修改,以更好的状态呈现数据,今天记录Echarts去掉中间的网格线的代码。

    祈澈菇凉
  • 使用Optional来减少null检查

    平常我们使用null检查在项目中简直太常见了,从数据库中查询到的数据可能不存在返回null,service中处理中发现不存在返回一个null,在互相调用的时候每...

    Dylan Liu
  • Java函数式开发——优雅的Optional空指针处理

    空闲时会抽空学习同在jvm上运行的Groovy和Scala,发现他们对null的处理比早期版本Java慎重很多。在Java8中,Optional为函数式编程的n...

    哲洛不闹
  • Java中有关Null的9问题

    Java中有关Null的9问题 对于Java程序员来说,null是令人头痛的东西。时常会受到空指针异常(NPE)的骚扰。连Java的发明者都承认...

    用户1289394
  • JTable常见用法细则+设置某列可编辑+滚动表格

    JTable常见用法细则 JTable是Swing编程中很常用的控件,这里总结了一些常用方法以备查阅.欢迎补充,转载请注明作者与出处. 一. 创建表...

    YGingko
  • 99%的高级程序员都这样使用null

    如果使用某个对象或对象里属性前先判断是否为null,那就需要思考一下你的代码是否已经烂掉了。 null是什么意思,你能说清楚它的意图吗?方法返回了null,是出...

    JavaQ
  • SQL,想说爱你并不是太容易的事

    不少人留言和留消息,只有一位差不多触及到了问题在哪里。公布一下答案之前先把题目贴一下。 ? ? ? 这道题目里面的坑主要在null这个东西。我们都知道SQL是基...

    用户1564362
  • Mysql中的Null值

    在大对数编程语言中,逻辑表达式的值只有两种:True,False。但是在关系型数据库中的逻辑表达式并非两种,而是三值逻辑的表达式(True、False、Unkn...

    DH镔

扫码关注云+社区

领取腾讯云代金券