效果：

<!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. 2017-3-7html基础
			
    一:<html><!--html文档的开始--> <head><!--头标签,html文档的开头,来描述html文档的信息,head之间的内容不会在浏览器中显 ...
    
			
    2. 
						
  2. 二分图hall定理应用+二分+双指针——cf981F(好题)
			
    /* 二分答案,判mid是否合法 如何判断:如果是在直线上,那么遍历匹配即可 现在在环上,即既可以向前匹配也可以向后匹配,那么将环拆开,扩展成三倍 显然a和b的匹配边是不可能交叉的,因为交叉必定没有不 ...
    
			
    3. 
						
  3. C语言itoa()函数和atoi()函数详解(整数转字符C实现)【转载】
			
    文章转载自https://www.cnblogs.com/bluestorm/p/3168719.html   C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串. ...
    
			
    4. 
						
  4. NX二次开发-UFUN遍历函数UF_OBJ_cycle_objs_in_part
			
    NX11+VS2013 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include < ...
    
			
    5. 
						
  5. NX二次开发-UF_MODL_ask_point_containment获取一个点是在体(面,边)的边界内部,外部,还是边界上
			
    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_curve.h> #include < ...
    
			
    6. 
						
  6. NX二次开发-对话框加锁UF_UI_lock_ug_access
			
    VC/MFC调用UG Dialog要进入加锁状态 加锁 UF_UI_lock_ug_access ( UF_UI_FROM_CUSTOM ); 此处为UF_UI_select的函数 解锁 UF_UI_ ...
    
			
    7. 
						
  7. c#种GetType()和TypeOf()的区别
			
    C#中任何对象都具有GetType()方法,它的作用和typeof()相同,返回Type类型的当前对象的类型. typeof(x)中的x,必须是具体的类名.类型名称等,不可以是变量名称:GetType ...
    
			
    8. 
						
  8. spring boot+vue.js发送post时一直415，swagger却很正常
			
    首先百度说要加header为applicaiton/json,加完后一直400,说json不符合格式,webstorm说要单引号,spring boot那边要双引号...... 后来不知道看了哪里说把 ...
    
			
    9. 
						
  9. mysql key分区,分区数制定
			
    我相信不 太注意的同学肯定会入坑,今天我差点也入坑了,后面自己问自己如果我用key分区,自己问自己 我的分区数应该是多少??? 后面我陷入了沉思......... 我第一次想先随便弄一个分区数,在本地 ...
    
			
    10. 
						
  10. NEO4J中文分词全文索引自动更新解决方案
			
    NEO4J中文分词全文索引自动更新解决方案 一.样例数据 二.英文与中文全文索引差别 1.创建NEO4J默认索引 2.删除索引 3.创建支持中文分词的索引 三.APOC自带英文全文索引过程(可自动更新 ...
    
			
    11.