效果：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>树状图</title>

        <link rel="stylesheet" href="css/amazeui.css">

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script src="js/amazeui.min.js"></script>

        <script src="js/app.js"></script>

        <script src="js/jquery.ztree.core-3.5.js"></script>

        <script src="js/jquery.ztree.excheck-3.5.js"></script>

        <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">

    </head>

    <body>

        <div class="am-modal-no-btn" tabindex="-1" id="myModal1" style="text-align:center;margin-top:20px;">

            <div class="am-modal-dialog am-panel am-panel-default" style="border-radius: 10px;overflow: hidden;">

                <div class="am-panel-bd">

                    <ul id="treeDemo" class="ztree"></ul>

                </div>

                <div class="am-panel-footer">

                    <p style="text-align:left;">选中的目标：<span id="chooseItem">当前未选中目标</span></p>

                </div>

            </div>

        </div>

        <script type="text/javascript">

            $(function() {

                //此例为简单数据格式,标准的数据格式需要嵌套表示节点的父子包含关系

                var dept = {

                    "datajson": "[{\"id\":\"m1\",\"pId\":\"0\",\"name\":\"父级菜单1\",\"nocheck\":true,\"open\":true},{\"id\":\"m101\",\"pId\":\"m1\",\"name\":\"父级菜单11\",\"nocheck\":true,\"open\":true},{\"id\":\"m10101\",\"pId\":\"m101\",\"name\":\"父级菜单111\",\"nocheck\":true,\"open\":true},{\"id\":\"m1010101\",\"pId\":\"m10101\",\"name\":\"子级111-1\"},{\"id\":\"m10102\",\"pId\":\"m101\",\"name\":\"父级菜单222\",\"nocheck\":true,\"open\":true},{\"id\":\"m1010202\",\"pId\":\"m10102\",\"name\":\"子级222-1\"},{\"id\":\"m1010203\",\"pId\":\"m10102\",\"name\":\"子级222-2\"},{\"id\":\"m10103\",\"pId\":\"m101\",\"name\":\"父级菜单333\",\"nocheck\":true,\"open\":true},{\"id\":\"m1010301\",\"pId\":\"m10103\",\"name\":\"子级333-1\"},{\"id\":\"m1010302\",\"pId\":\"m10103\",\"name\":\"子级333-2\"},{\"id\":\"m1010303\",\"pId\":\"m10103\",\"name\":\"子级333-3\"},{\"id\":\"m102\",\"pId\":\"m1\",\"name\":\"父级菜单22\",\"nocheck\":true,\"open\":true},{\"id\":\"m10201\",\"pId\":\"m102\",\"name\":\"父级菜单222\",\"nocheck\":true,\"open\":true},{\"id\":\"m1020101\",\"pId\":\"m10201\",\"name\":\"子级222-1\"},{\"id\":\"m105\",\"pId\":\"m1\",\"name\":\"子级22-1\"}]"

                };

                //加载部门树

                var setting = {

                    //check属性放在data属性之后，复选框不起作用

                    check: {

                        enable: true,

                        chkStyle: "radio", //选择方式,默认为复选框

                        radioType: "all"

                    },

                    data: {

                        simpleData: {

                            enable: true //使用简单数据格式,不配置或配置为false则为标准数据格式.

                        }

                    },

                    callback: {

                        onCheck: onCheck

                    }

                };

                var zNodes;

                zNodes = $.parseJSON(dept.datajson);

                $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化ztree生成树

                //第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.

            });

            function onCheck(e, treeId, treeNode) {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                nodes = zTree.getCheckedNodes(true);

                if (nodes[0] != undefined) {

                    $('#chooseItem').html(nodes[0].id + '--' + nodes[0].name)

                } else {

                    $('#chooseItem').html('当前未选中目标')

                }

            }

        </script>

    </body>

</html>

注意在 zTreeStyle.css中会用到 zTreeStandard.png  和  zTreeStandard.gif，其位置参考css，如下：

.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;

    border:0 none; cursor: pointer;outline:none;

    background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;

    background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;

    background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;

    background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
zTreeStandard.png：



zTreeStandard.gif：（在下面左边，因为颜色太相近，请摸索点右键另存）




												


											
ztree 树状图——例的更多相关文章
	

    
								
  1. ztree 文件夹类型的 树状图
		
    未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...
    
		
    2. 
						
  2. D3树状图给指定特性的边特别显示颜色
		
    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...
    
		
    3. 
						
  3. ArcGIS教程：树状图
		
    摘要 构造可显示特征文件里连续合并类之间的属性距离的树示意图(树状图). 使用方法 · 输入特征文件必须採用预定的特征文件格式. 特征文件可使用 Iso 聚类或创建特征工具来创建.该文件必须至少包括两 ...
    
		
    4. 
						
  4. 用D3.js画树状图
		
    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
    
		
    5. 
						
  5. python爬取股票最新数据并用excel绘制树状图
		
    大家好,最近大A的白马股们简直 跌妈不认,作为重仓了抱团白马股基金的养鸡少年,每日那是一个以泪洗面啊. 不过从金融界最近一个交易日的大盘云图来看,其实很多中小股还是红色滴,绿的都是白马股们. 以下截图 ...
    
		
    6. 
						
  6. SqlServer-无限递归树状图结构设计和查询
		
    在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...
    
		
    7. 
						
  7. Android开源图表之树状图和饼状图的官方示例的整理
		
    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
    
		
    8. 
						
  8. D3树状图异步按需加载数据
		
    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...
    
		
    9. 
						
  9. [整理] ES5 词法约定文档树状图
		
    将ES5 词法说明整理为了树状图,方便查阅,请自行点开小图看大图:
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C++11中的技术剖析(萃取技术)
			
    从C++98开始萃取在泛型编程中用的特别多,最经典的莫过于STL.STL中的拷贝首先通过萃取技术识别是否是已知并且支持memcpy类型,如果是则直接通过内存拷贝提高效率,否则就通过类的重载=运算符,相 ...
    
			
    2. 
						
  2. clipboard.js实现页面内容复制到剪贴板
			
    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...
    
			
    3. 
						
  3. spring其他配置  (3)
			
    目录 一.自动装配 Autowired 二.bean的作用于singleton,prototype 三.引入外部资源properties文件 四.SpEL表达式 (可以为属性进行动态的赋值) 五.通过 ...
    
			
    4. 
						
  4. CSS3：CSS3 渐变（Gradients）
			
    ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...
    
			
    5. 
						
  5. （转）python常用模块(模块和包的解释，time模块，sys模块，random模块，os模块，json和pickle序列化模块)
			
    阅读目录 1.1.1导入模块 1.1.2__name__ 1.1模块 什么是模块: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代 ...
    
			
    6. 
						
  6. beaglebone black 与电脑互传文件(夹）
			
    1. PSCP方法 PSCP,是putty的一个组件. 1.1 下载PSCP 先给连接http://www.chiark.greenend.org.uk/~sgtatham/putty/downloa ...
    
			
    7. 
						
  7. Function Run Fun-递归+细节处理
			
    We all love recursion! Don't we? Consider a three-parameter recursive function w(a, b, c): if a < ...
    
			
    8. 
						
  8. DNS隧道--dnscat2
			
    安装 服务端 git clone https://github.com/iagox86/dnscat2.git cd dnscat2 cd server sudo gem install bundle ...
    
			
    9. 
						
  9. Redis基于主从复制的RCE(redis4.x 5.x)复现
			
    使用docker建立redis 拉取镜像 运行 查看 可以连接,存在未授权 https://github.com/Ridter/redis-rce 发送poc i:正向连接 r:反弹 反弹成功
    
			
    10. 
						
  10. Linux下core文件调试
			
    1,ulimit -a查看默认参数 2,ulimit -c 1024 设置core文件大小,如果超过1024个blocks,则不会产生core文件 注:tune2fs -l /dev/sda8 输出分 ...
    
			
    11.