ztree自定义的checkbox和radio树,怎么写回调函数?

话别西亭 发布于 2016/10/21 11:45
阅读 320
收藏 0

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zTree</title>
    <link rel="stylesheet" href="ztree-3.5/zTreeStyle.css" type="text/css">
    <script type="text/JavaScript" src="ztree-3.5/jquery-2.2.4.min.js"></script>
    <script type="text/JavaScript" src="ztree-3.5/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="ztree-3.5/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript">
        var zTree;
        var IDMark_A = "_a";
        var setting = {
            view: {
                addDiyDom: addDiyDom
            },
            data: {
             simpleData: {
               enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
                }
            },          
            callback:{
               onCheck:onCheck
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"父节点 1", open:true},
            { id:11, pId:1, name:"叶子节点 1-1"},
            { id:12, pId:1, name:"叶子节点 1-2"},
            { id:13, pId:1, name:"叶子节点 1-3"},
            { id:2, pId:0, name:"父节点 2", },
            { id:21, pId:2, name:"叶子节点 2-1"},
            { id:22, pId:2, name:"叶子节点 2-2"},
            { id:23, pId:2, name:"叶子节点 2-3"},
            { id:3, pId:0, name:"父节点 3", },
            { id:31, pId:3, name:"叶子节点 3-1"},
            { id:32, pId:3, name:"叶子节点 3-2"},
            { id:33, pId:3, name:"叶子节点 3-3"}
        ];
      function onCheck(e,treeId,treeNode){
                     //  var treeObj=$.fn.zTree.getZTreeObj("zd_tree"),
                    var selectedNodes=zTree.getNodesByParam("checked", true, null);
                      // nodes=selectedNodes.getCheckedNodes(true),
                       v=[];            
                       for(var i=0;i<selectedNodes.length;i++){
                           var ym=nodes[i].name;
                            v.push(ym);                      
                       }
                       console.log(v);      
                     }

     //判断节点是否在已选择的节点中,判断重复选择
        function isNodeInChecked(curId){  
            if(zTree==null){  
                return false;  
            }  
            var selectedNodes=zTree.getNodesByParam("checked", true, null);
          
            var selectedNode;  
              
            if(selectedNodes == null || selectedNodes.length==0){  
                return false;  
            }
            for(var i=0; i<selectedNodes.length;i++){  
                selectedNode = selectedNodes[i];                           
                if(selectedNode.id==curId){  
                    return true;  
                }  
            }
            return false;  
        }  
          
        //自定义的树形规则  
        function addDiyDom(treeId, treeNode) {  

            var aObj = $("#" + treeNode.tId + IDMark_A);  
            if (treeNode.level == 0) {  
                var editStr = "<input type='radio' class='radioBtn' id='radio_" +treeNode.id+"_"+treeNode.pId+"' onfocus='this.blur();'></input>";  
                aObj.before(editStr);  
                var btn = $("#radio_"+treeNode.id+"_"+treeNode.pId);  
                if (btn) {  
                    btn.bind("click", function() {checkAccessories(treeNode, btn);});  
                }   
            } else {  
                var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+"_"+treeNode.pId+ "' name='checkbox_"+treeNode.getParentNode().id+"_"+treeNode.pId+ "' onfocus='this.blur();'></input>";  
                aObj.before(editStr);  
                var btn = $("#checkbox_"+treeNode.id+"_"+treeNode.pId);  
                if (btn){  
                    btn.bind("change", function() {checkBrand(treeNode, btn);});  
                    var isNodeInChecked = false;  
                    var selectedNodes=null;  
                    if(zTree!=null){  
                        selectedNodes = zTree.getNodesByParam("checked", true, null);  
                    }                     
                    var selectedNode;  
                    //初始化时判断是否需要选择,这里可以去掉或者通过在zNodes中定义中添加checked:tr//ue来代替  
                    if(selectedNodes != null && selectedNodes.length > 0){  
                        for(var i=0; i<selectedNodes.length;i++){  
                            selectedNode = selectedNodes[i];  
                            if(selectedNode.id==treeNode.pId){  
                                isNodeInChecked = true;  
                                break;  
                            }  
                        }  
                    }  
                    if(isNodeInChecked){  
                        treeNode.checked=true;  
                        btn.prop("checked", true);  
                    }  
                }  
            }  
        }  
          
        function checkAccessories(treeNode, btn) {  
            if (btn.prop("checked")) {  
                //点击的节点是否在已选的根节点中  
                var isRootInChecked = isNodeInChecked(treeNode.id);  
                if(!isRootInChecked){  
                    //去除其余根节点以及下级节点的选择  
                    removeOthers();  
                }  
                treeNode.checked=true;  
                //节点下所有节点都勾选  
                setChildSelected(treeNode, btn,true);  
            } else {  
                treeNode.checked=false;  
                setChildSelected(treeNode, btn,false);  
            }  
        }  
          
        //去除其余根节点以及下级节点的选择  
        function removeOthers() {  
            var selectedNodes=null;  
            if(zTree!=null){  
                selectedNodes = zTree.getNodesByParam("checked", true, null);  
            }  
              
            var selectedNode;  
            if(selectedNodes == null || selectedNodes.length == 0){  
                return;  
            }  
            for(var i=0; i<selectedNodes.length;i++){  
                selectedNode = selectedNodes[i];  
                selectedNode.checked=false;  
                $("#radio_" + selectedNode.id+"_"+selectedNode.pId).prop("checked", false);  
                $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).prop("checked", false);  
            }  
        }  
 
          
        function setChildSelected(treeNode, btn,status){  
            var children;  
            if(treeNode.children==null){  
                return true;  
            }  
            var lenth=treeNode.children.length;  
            if(lenth==0){  
                return true;  
            }  
            for(var i=0;i<lenth;i++){  
                children = treeNode.children[i];  
                $("#checkbox_" + children.id+"_"+children.pId).prop("checked", status);  
                children.checked=status;  
                btn = $("#checkbox_"+children.id+"_"+children.pId);  
                rls = setChildSelected(children, btn,status);
                if(rls){  
                    continue;  
                }  
            }  
                  
        }  
          
        function beforeCheckAccessories(treeNode, btn) {  
            var selectedNodes=null;  
            if(zTree!=null){  
                selectedNodes = zTree.getNodesByParam("checked", true, null);  
            }  
              
            var selectedNode;  
              
            if(selectedNodes == null || selectedNodes.length == 0){  
                return;  
            }             
            for(var i=0; i<selectedNodes.length;i++){  
                selectedNode = selectedNodes[i];
                if (selectedNode.getParentNode() == null) {  
                    if (treeNode.getParentNode() == selectedNode) {  
                        continue ;
                    }  
                } else if (selectedNode != null && treeNode.getParentNode() ==selectedNode.getParentNode()) {  
                    continue;  
                }  
                  
                selectedNode.checked=false;  
                $("#radio_" + selectedNode.id+"_"+selectedNode.pId).prop("checked", false);  
                $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).prop("checked", false);  
            }  
        }  
             
        function getCheckedBox(checkedName) {  
            var r = document.getElementsByName(checkedName);
            for(var i=0; i<r.length; i++)    {  
                if(r[i].checked)    {  
                    return $(r[i]);  
                }  
            }  
            return null;  
        }  
 
        // 当选中某一checkbox时选中其上层radio  
        function checkBrand(treeNode, btn) {  
            if (btn.prop("checked")) {  
                var isRootInChecked = isNodeInChecked(treeNode.rootId);  
                if(!isRootInChecked){  
                    beforeCheckAccessories(treeNode, btn);  
                    treeNode.checked=true;  
                }  
                setParentNodeChecked(treeNode);  
                setChildSelected(treeNode,btn,true);
            }else{  
                treeNode.checked=false;  
                setChildSelected(treeNode,btn,false);  
            }  
              
            // 如果只剩一个被选中项,则取消该被选项  
            var selectedNodes=null;  
            if(zTree!=null){  
                selectedNodes = zTree.getNodesByParam("checked", true, null);  
                if (selectedNodes.length == 1) {  
                    for(var i=0; i<selectedNodes.length;i++){  
                        selectedNode = selectedNodes[i];  
                        $("#radio_" + selectedNode.id+"_"+selectedNode.pId).prop("checked", false);  
                        $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).prop("checked", false);  
                    }  
                }  
            }  
        }  
          
        //复选框勾选时,将上级节点到根节点都勾选  
        function setParentNodeChecked(treeNode) {  
            var parentNode;  
            if(treeNode==null){  
                return true;  
            }  
            if(treeNode.getParentNode()!=null){  
                    parentNode = treeNode.getParentNode();  
                    $("#checkbox_" + parentNode.id+"_"+parentNode.pId).prop("checked", true);  
                    parentNode.checked=true;  
                    return setParentNodeChecked(parentNode);  
            }else{  
                var pObj = $("#radio_" + treeNode.id+"_"+treeNode.pId);  
                if (!pObj.prop("checked")) {  
                    treeNode.checked=true;  
                    pObj.prop("checked", true);  
                }  
                return true;  
            }  
        }  
          
 
 
        $(document).ready(function(){  
            zTree = $.fn.zTree.init($("#zd_tree"), setting, zNodes);  
        });

    </script>
        <style type="text/css">
      .radioBtn {height: 16px;vertical-align: middle;}
      .checkboxBtn {vertical-align: middle;margin-right: 2px;}
      </style>
</head>
<body>
    <h1>radio / checkbox  共存</h1>
<h6>[ 文件路径: super/radio_checkbox.html ]</h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="zd_tree" class="ztree"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>实现方法说明</h2>
                <ul class="list">
                <li>zTree 默认的 radio   checkbox和是无法共存的,但可以利用 自定义控件 的功能实现此需求,具体需求可以参考 "添加 自定义控件" 的详细说明</li>
                <li class="highlight_red">对于radio /checkbox  的联动规则,请根据需求制定自己的规则</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

加载中
返回顶部
顶部