jquery Ztree3.5 radio/checkbox自定义树形

ztree 3.5提供了复选/单选树形,这里补充个单选/复选树形,在ztree3.5 demo上加到页面,纯属交流,废话结束,DEMO下载后打开dmo/cn下的index.html,在组合功能演示/radio_checkbox共存下看效果,下载地址:

http://dl5.csdn.net/fd.php?i=603350980625868&s=826a4a285474d2372196962791a5fb45

效果如下:

Ztree3

代码如下:

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - radio&checkbox  </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
    <SCRIPT type="text/javascript">
        <!--
        //定义全局zTree,用于使用zTree.getNodesByParam("checked", true, null);取得选择节点
        var zTree;
        var IDMark_A = "_a";
        var setting = {
            view: {
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        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", open:true},
            { 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", open:true},
            { id:31, pId:3, name:"叶子节点 3-1"},
            { id:32, pId:3, name:"叶子节点 3-2"},
            { id:33, pId:3, name:"叶子节点 3-3"}
        ];
        //判断节点是否在已选择的节点中,判断重复选择
    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:true来代替
                    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.attr("checked", true);
                    }
                }

            }
        }
        function checkAccessories(treeNode, btn) {
            if (btn.attr("checked")) {
                //点击的节点是否在已选的根节点中
                var isRootInChecked = isNodeInChecked(treeNode.id);
                if(!isRootInChecked){
                    //去除其余根节点以及下级节点的选择
                    beforeCheckAccessories();
                }
                treeNode.checked=true;
                //节点下所有节点都勾选
                setChildSelected(treeNode, btn,true);
            } else {
                treeNode.checked=false;
                setChildSelected(treeNode, btn,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).attr("checked", status);
                children.checked=status;
                btn = $("#checkbox_"+children.id+"_"+children.pId);
                rls = setChildSelected(children, btn,status);
                if(rls){
                    continue;
                }
            }
                
        }
        function beforeCheckAccessories() {
            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).attr("checked", false);
                $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("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;
        }

        function checkBrand(treeNode, btn) {
            if (btn.attr("checked")) {
                var isRootInChecked = isNodeInChecked(treeNode.rootId);
                if(!isRootInChecked){
                    beforeCheckAccessories();
                    treeNode.checked=true;
                }
                setParentNodeChecked(treeNode);
                setChildSelected(treeNode,btn,true);
            }else{
                treeNode.checked=false;
                setChildSelected(treeNode,btn,false);
            }
        }
        //复选框勾选时,将上级节点到根节点都勾选
        function setParentNodeChecked(treeNode) {
            var parentNode;
            if(treeNode==null){
                return true;
            }
            if(treeNode.getParentNode()!=null){
                    parentNode = treeNode.getParentNode();
                    $("#checkbox_" + parentNode.id+"_"+parentNode.pId).attr("checked", true);
                    parentNode.checked=true;
                    return setParentNodeChecked(parentNode);
            }else{
                var pObj = $("#radio_" + treeNode.id+"_"+treeNode.pId);
                if (!pObj.attr("checked")) {
                    treeNode.checked=true;
                    pObj.attr("checked", true);
                }
                return true;
            }
        }
        


        $(document).ready(function(){
            zTree = $.fn.zTree.init($("#treeDemo"), 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="treeDemo" 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>


结束语:ztree 3.5比以前的版本的响应速度快了很多,自定义的树形功能也很方便,很容易集成到现有框架中,好东东呀

您的回应...

相关话题

查看全部

也许你感兴趣

换一批

热门标签

更多