专栏首页编程微刊ztree取消节点操作

ztree取消节点操作

jQuery取消checkbox选中状态,一般是这样解决的

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery取消checkbox选中状态</title>
    </head>

    <body>
        <input type="button" value="取消" onclick="box();" />
        
        <input type="checkbox" checked="checked" id="box" />
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function box() { 
            $("#box").attr("checked", false); 
        }
    </script>

</html>

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

主要代码

zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)

一个demo:

<!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" />
        <style>
            li {
                list-style-type: none;
            }
            
            .ztree {
                margin: 0;
                padding: 5px;
                color: #333;
                width: 232px;
                height: 259px;
                border: 1px solid #000;
            }
            
            #boxRight {
                border: 1px solid #000000;
                width: 200px;
                height: 259px;
                position: absolute;
                top: -7px;
                left: 308px;
            }
            
            #toRight {
                position: absolute;
                top: 120px;
                left: 256px;
            }
            
            .del {
                color: red;
            }
            
            .group {
                color: red;
            }
        </style>

        <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 id="toRight">></button>
        <li class="shuttleBox near">
            <ul id="boxRight">
                <!--<span  class="del">删除</span>马可波罗<span  class="group">设为组长</span>-->
            </ul>
        </li>
        <button id="btn" type="submit">提交</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);
            });
        }

        //删除按钮和设为组长函数
        function del() {
            $('.del').click(function() {
                debugger;
                $(this).closest('li').remove();
                var delId = '#' + $(this).closest('li').attr('id')
                zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)

            })

            $('.group').click(function() {

                if($('.group:contains("取消组长")').length > 0 && $(this).text() === '设为组长') {
                    alert("只能设一个组长")
                    return;
                }
                if($(this).text() === '设为组长') {
                    $(this).text('取消组长').parent().css('color', '#E44F4F')
                } else {
                    $(this).text(
                        '设为组长').parent().css('color', '#000')
                }
            })
        }
        del();
        //穿梭框左侧选中
        $("#zTree").on('click', 'li.level1', function() {
            //treenode_check
            if($(this).hasClass('shuttleAct')) {
                $(this).removeClass('shuttleAct');
            } else {
                $(this).addClass('shuttleAct');
            }
        });

        //向右移动
        $("#toRight").click(function() {
            $('#boxRight').html("")
            var arr = [] //循环找到右边已存在的id,把右边所有的id放在数组里面
            $("#boxRight li").each(function(i, e) {
                arr.push($(e).attr('id'))
            })
            var html = '';

            $('span.checkbox_true_full').closest('li').each(function() {
                if($(this).find('ul').length !== 0) {
                    return;
                }
                if(arr.indexOf($(this).attr('id')) > -1) {
                    return; //右侧有重复的id
                } //在右边的数组里面寻找左边括号里面选中的id
                html += '<li id="' + $(this).attr('id') + '">';
                html += '<span  class="del" ><img src="img/dateDel.png" /></span><span class="name">' +
                    $(this).text() +
                    '</span><span  class="group">设为组长</span>';
                html += '</li>';
            })

            $('#boxRight').append(html)
            //执行删除按钮和设为组长函数
            del();
            $("#boxRight li").removeClass('shuttleAct');
        });

        //提交所选中的状态,提交给后端
        $("#btn").click(function() {
            if($("#boxRight li").length < 3) {
                alert("互监组至少三人");
                return;
            }

            if($('.group:contains("取消组长")').length < 1) {
                alert("必须设置互监组长")
                return;
            }
            var params = {
                groupName: $(".group:contains('取消组长')").prev('.name').text(),
                criminals: 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 + "," + nodes[i].name + "," + nodes[i].tId + "," + 0;
                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
    }
]

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    前面写过,ztree实现一棵树的文章,https://www.jianshu.com/p/c2b919e91e91 现在要用ajax+json模拟交互效果

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

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

    祈澈菇凉
  • input输入框内阴影效果

    作为一个合格的前端开发工程师,是能够将UI的设计图百分百还原的,不管设计图有多么的炫酷,都能够做到,当然也是从细节上一点点的实现的。今天继续记录简单的input...

    祈澈菇凉
  • 再论Android的事件分发机制

    Touch事件分发中只有两个主角:ViewGroup和View。Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接...

    提莫队长
  • 死磕 java集合之ConcurrentHashMap源码分析(一)

    ConcurrentHashMap是HashMap的线程安全版本,内部也是使用(数组 + 链表 + 红黑树)的结构来存储元素。

    彤哥
  • HashMap扩容机制

    HashMap的扩容机制 上一期已经讲到了添加元素的put方法了,现在回顾一下put方法,主要讲解扩容方法:

    用户6055494
  • Android-UI布局---RecyclerView学习(二)利用它做的相册集效果

    这个布局下面是高度120dp 宽度填充父窗体,然后整个手机屏幕多余的空间都给了上面的imageview 视图

    wust小吴
  • 1-AI--Activity生命周期

    张风捷特烈
  • Fragment生命周期及实现点击导航图片切换fragment,Demo

    PS:Fragment简介     Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板...

    cMusketeer
  • Android中使用ViewStub提高布局性能

    在Android开发中,View是我们必须要接触的用来展示的技术.通常情况下随着View视图的越来越复杂,整体布局的性能也会随之下降.这里介绍一个在某些场景下提...

    技术小黑屋

扫码关注云+社区

领取腾讯云代金券