zoukankan      html  css  js  c++  java
  • zTree实现多选树

    zTree实现多选树


    1、实现源码

    <!DOCTYPE html>
    <html>
    <head>
    	<title>多选树</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<link rel="stylesheet" type="text/css" href="../../../css/demo.css">
    	<link rel="stylesheet" type="text/css" href="../../../css/zTreeStyle/zTreeStyle.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">
    		<!--
    		var setting = {
    			check: {
    				enable: true,
    				chkStyle: "checkbox",
    				chkboxType: { "Y": "s", "N": "ps" }
    			},
    			data: {
    				simpleData: {
    					enable: true
    				}
    			}
    		};
    
    		var zNodes =[
    			{ id:1, pId:0, name:"湖北省", open:true},
    			{ id:11, pId:1, name:"武汉市", open:true},
    			{ id:111, pId:11, name:"汉口"},
    			{ id:112, pId:11, name:"武昌"},
    			{ id:12, pId:1, name:"黄石市", open:true},
    			{ id:121, pId:12, name:"黄石港区"},
    			{ id:122, pId:12, name:"西塞山区"},
    			{ id:2, pId:0, name:"湖南省", open:true},
    			{ id:21, pId:2, name:"长沙市"},
    			{ id:22, pId:2, name:"株洲市", open:true},
    			{ id:221, pId:22, name:"天元区"},
    			{ id:222, pId:22, name:"荷塘区"},
    			{ id:23, pId:2, name:"湘潭市"}
    		];
    		
    		$(document).ready(function(){
    			$.fn.zTree.init($("#treeMultiple"), setting, zNodes);
    		});
    		//-->
    	</script>
    </head>
    
    <body>
    <div class="content_wrap" style="text-align: center;">
    	<div class="zTreeDemoBackground left">
    		<ul id="treeMultiple" class="ztree" style="height: 300px; 150px; overflow-y: auto"></ul>
    	</div>
    </div>
    </body>
    </html>

    2、实现结果



    3、源码说明

    (1)Y、N、"p"和“s”说明

    Y 属性定义 checkbox 被勾选后的情况; 
    N 属性定义 checkbox 取消勾选后的情况; 
    "p" 表示操作会影响父级节点; 
    "s" 表示操作会影响子级节点。


    (2)chkboxType: { "Y": "s", "N": "ps" }

            表示checkbox勾选操作,只影响子节点;取消勾选操作,影响父子节点

  • 相关阅读:
    Axis,axis2,Xfire以及cxf对比 (转)
    客户端调用服务器端三种方式
    webservice发送数据,取数据的方式
    强制关闭myeclipse出现的问题
    取当前系统的上月时间
    oracle 报Ora-01008错误:oracle 并非所有变量都已绑定的原因.TO_number();动态执行select..into..语句时
    ResultSetMetaData rsmd = rs.getMetaData()是什么意思?
    概率质量函数:怀孕周期的PMF
    Python 正则表达式
    TF-IDF
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315111.html
Copyright © 2011-2022 走看看