首頁 > 開發者 > JavaScript

jquery Ztree3.5 radio/checkbox自訂樹形

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 效果如下： 代碼如下：<!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">www.2cto.com            <li class="title"><h2>實現方法說明</h2>                <ul class="list"> checkbox和是無法共存的，但可以利用 自訂控制項 的功能實現此需求，具體需求可以參考 "添加 自訂控制項" 的詳細說明</li>                <li class="highlight_red">對於radio /checkbox  的聯動規則，請根據需求制定自己的規則</li>                </ul>            </li>        </ul>    </div></div></BODY></HTML> 結束語：ztree 3.5比以前的版本的響應速度快了很多，自訂的樹形功能也很方便，很容易整合到現有架構中，好東東呀

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jquery multiselect checkbox jquery create input checkbox exit jquery htmlspecialchars jquery jquery exit jquery uppercase jquery urlencode
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More