Ztree节点后面自定义checkbox

最新推荐文章于 2018-11-28 16:47:00 发布

TByoung

最新推荐文章于 2018-11-28 16:47:00 发布

阅读量1.7k

点赞数 1

分类专栏： JS 文章标签： js ztree checkbox

本文链接：https://blog.csdn.net/qq_19524879/article/details/79238303

版权

JS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1.引用JS，Css文件

<link rel="stylesheet" href="/bower_components/zTree/css/metroStyle/metroStyle.css" type="text/css">
    <script src="/bower_components/zTree/js/jquery.ztree.all.js"></script>

2.html页面

<ul id="treeAuth" class="ztree"></ul>

3.JS代码

    var GroupEdit = function () {
    var o = this;
    $(document).ready(function () {
        o.initialize();
    });
};
var p = GroupEdit.prototype;


   p.initialize = function () {
        p._initMatch();
    };

    //页面隐藏域权限码串
    p.authList = $("#authCodes").val() == null ? "" : $("#authCodes").val();
    p.nameNum = 0;

    //初始化ztree
    p._initMatch = function(){
        $.fn.zTree.init($("#treeAuth"), p.setting, p.zNodes);
    };

    p.zNodes =[
        { id:1, pId:0, name:"首页", open:true,type:"0",},
        { id:11, pId:1, name:"首页",type:"1",operation:"R,W",authName:"AUTHORITY_APP_HOME"},
        { id:2, pId:0, name:"业务",open:true,type:"0"},
        { id:21, pId:2, name:"订单",type:"1",operation:"R,W",authName:"AUTHORITY_APP_ORDER"},
        { id:22, pId:2, name:"维护",type:"1",operation:"R,W",authName:"AUTHORITY_APP_CUSTOMER"},
        { id:23, pId:2, name:"单位",type:"1",operation:"R,W",authName:"AUTHORITY_APP_CONSIGNEE"},
        { id:3, pId:0, name:"管理",open:true,type:"0"},
        { id:31, pId:3, name:"单",type:"1",operation:"R,W",authName:"AUTHORITY_APP_WAYBILL"},
        { id:32, pId:3, name:"商管理",type:"1",operation:"R,W",authName:"AUTHORITY_APP_CARRIER"}
    ];

    //全选取消权限绑定事件
    p.selSubNode = function(obj,treeId, treeNode) {
        var childrenNodes = treeNode.children;
        if (childrenNodes) {
            for (var i = 0; i < childrenNodes.length; i++) {
                $("#cheIdR" + childrenNodes[i].id).prop("checked",obj.checked);
                $("#cheIdW" + childrenNodes[i].id).prop("checked",obj.checked);
            }
        }

    }
    //绑定多选框事件
    p.addDiyDom = function(treeId,treeNode) {
        if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
        var aObj = $("#" + treeNode.tId + "_a");
        var editStr = "";
        if(treeNode.type == "0"){
            editStr += "  <span><input id='selAll"+treeNode.tId+"' type='checkbox'/> 全选</span>";
        }else{
            var value = treeNode.operation.split(",");
            for(var i = 0;i<value.length ;i++){

                var show = "" ,cheName = "",
                    checkId = "id='cheId" + value[i].split("-")[0] + treeNode.id + "'",
                    code = treeNode.authName +"_" + value[i],
                    cheValue = " value='" + code + "'",
                    showCheck = "  <input type='checkbox' "+ checkId  + cheValue ;

                if(value[i] == "R"){
                    show = "只读";
                    cheName = " name='groupAuthorities[" + p.nameNum + "].authority'";
                }else if(value[i]== "W"){
                    show = "操作";
                    cheName = " name='groupAuthorities[" + p.nameNum + "].authority'";
                }

                showCheck += cheName;

                if(p.authList.indexOf(code) != -1){
                    showCheck += " checked='checked'/> " + show;
                }else{
                    showCheck += "/> " + show;
                }

                editStr += showCheck;
                p.nameNum++;
            }
        }

        aObj.after(editStr);
        //全选事件绑定
        $("#selAll" + treeNode.tId).click(function(){
            p.selSubNode(this,treeId,treeNode);
        });
    }
    //ztree绑定事件
    p.setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            addDiyDom:p.addDiyDom
        }
    };