ztree 树状图—

效果：

<!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 树状图——例的更多相关文章

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

随机推荐

判断访问浏览器客户端类型(pc,mac,ipad,iphone,android)
<script type="text/javascript"> //平台.设备和操作系统 var system = { win: false, mac: false, ...
jQuery 遍历 - eq() 方法
<!DOCTYPE html> <html> <head> <style> div { width:60px; height:60px; margin: ...
1 visual studio code 配置C++开发环境（windows 开发环境）
0 引言最近帮GF(不幸变成ex了)配置C++开发环境,一开始想给她装个visual studio13完事,但是一想到自己安装以及使用时的诸多麻烦,就有点退却,觉得没有这个必要.正好了解到vscod ...
eclipse如何实现智能提示功能
一直时候用idea很久没有使用eclipse了,idead的ctrl+鼠标滚轮是可以调节字体大小,这项功能是我的最爱. 早就忘记eclipse的智能助手设置,今天翻下以前的笔记,觉得还是做个博客方便今 ...
NX二次开发-重命名装配组件
在GC工具里面是有一个重命名装配组件的命令的,除了这个外,好像没看到NX里还有其他可以重命名装配组件的命令,本来以为在UFUN ASSEM装配的头文件里会有更改装配部件名字的函数,但是没有找到,可能没 ...
LeetCode 627. Swap Salary (交换工资)
题目标签: 题目给了我们一个工资表格,让我们把男女性别对换. 这里可以利用IF, IF(condition, value_if_true, value_if_false). Java Soluti ...
剑指offer——30包含min函数的栈
题目描述定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 题解: 借助辅助栈,新的数据<=f辅助栈顶时,就压入辅助栈,这样,就能保证辅 ...
sklearn参数优化
学习器模型中一般有两个参数:一类参数可以从数据中学习估计得到,还有一类参数无法从数据中估计,只能靠人的经验进行指定,后一类参数就叫超参数比如,支持向量机里的C,Kernel,gama,朴素贝叶斯里的 ...
配置Spring Security 错误：Property or field 'ROLE_USER' cannot be found
在学习http://www.mkyong.com/spring-security/spring-security-hello-world-example/时,出现以下错误: Property or f ...
docker ps -a
1 pwd 2 mkdir data 3 ll 4 uname -n 5 cd data/ 6 ll 7 pwd 8 ll 9 wget -N --no-check-certificate https ...

ztree 树状图——例

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

随机推荐

热门专题