当前位置:编程学习 > JAVA >>

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

 
效果如下:
 
代码如下:
<!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: {
                易做图Data: {
                    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 select
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,