效果：

<!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. bzoj3505: [Cqoi2014]数三角形 [数论][gcd]
			
    Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m和 ...
    
			
    2. 
						
  2. LUOGU P3723 [AH2017/HNOI2017]礼物 (fft)
			
    传送门 解题思路 首先我们设变化量为\(r\),那么最终的答案就可以写成 : \[ ans=min(\sum\limits_{i=1}^n(a_i-b_i+r)^2) \] \[ ans=min(\s ...
    
			
    3. 
						
  3. [JZOJ 5804] 简单的序列
			
    思路: 似乎和某次培训的题很像啊... 将左括号记为1,右括号记为-1,那么最终一定加和为0,然后再求最小前缀和. 用dp解决即可. #include <bits/stdc++.h> us ...
    
			
    4. 
						
  4. CSDN首页> 云计算 孙玄：解析58同城典型技术架构及演变
			
    转:http://www.csdn.net/article/2015-04-09/2824437 在UPYUN主办的“UPYUN Open Talk”第三期北京站上,58同城系统架构师孙玄详细介绍了5 ...
    
			
    5. 
						
  5. 常用的一些 linux 指令
			
    1. mv linux下重命名文件或文件夹使用mv既可实现. 1.1 重命名 a.将一个名为abc.txt的文件重命名为1234.txt #mv abc.txt .txt b. 将目录A重命名为B ( ...
    
			
    6. 
						
  6. PAT_A1053#Path of Equal Weight
			
    Source: PAT A1053 Path of Equal Weight (30 分) Description: Given a non-empty tree with root R, and w ...
    
			
    7. 
						
  7. 解决ios10及以上Safari双击和双指缩放无法禁止的问题
			
    移动端web缩放有两种: 1.双击缩放: 2.双指手势缩放. 在iOS 10以前,iOS和Android都可以通过一行meta标签来禁止页面缩放 <meta content="widt ...
    
			
    8. 
						
  8. python学习7—函数定义、参数、递归、作用域、匿名函数以及函数式编程
			
    python学习7—函数定义.参数.递归.作用域.匿名函数以及函数式编程 1. 函数定义 def test(x) # discription y = 2 * x return y 返回一个值,则返回原 ...
    
			
    9. 
						
  9. sklearn中模型抽取
			
    特征抽取sklearn.feature_extraction 模块提供了从原始数据如文本,图像等众抽取能够被机器学习算法直接处理的特征向量. 1.特征抽取方法之 Loading Features fr ...
    
			
    10. 
						
  10. USACO2012 Haybale stacking /// 区间表示法 oj21556
			
    题目大意:N个方块 标号1~N  K个操作 操作a b 表示标号a~b区间每位多加一个方块 Input * Line 1: Two space-separated integers, N  K. *  ...
    
			
    11.