显示效果如下：

代码如下：

<html>

	<head><title></title></head>

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

	<script type="text/javascript" src="jquery.ztree.all-3.5.min.js"></script>

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

		<style type="text/css">

.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.pIcon02_ico_open, .ztree li span.button.pIcon02_ico_close{margin-right:2px; background: url(img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.icon01_ico_docu{margin-right:2px; background: url(img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.icon02_ico_docu{margin-right:2px; background: url(img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.icon03_ico_docu{margin-right:2px; background: url(img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.icon05_ico_docu{margin-right:2px; background: url(img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.icon06_ico_docu{margin-right:2px; background: url(img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

	</style>

	<script type="text/javascript">

	var setting = {

			data: {

				simpleData: {

					enable: true

				}

			}

		};

	var zNodes =[

			{ id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconSkin:"pIcon01"},

			{ id:11, pId:1, name:"叶子节点1", iconSkin:"icon01"},

			{ id:12, pId:1, name:"叶子节点2", iconSkin:"icon02"},

			{ id:13, pId:1, name:"叶子节点3", iconSkin:"icon03"},

			{ id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, iconSkin:"pIcon02"},

			{ id:21, pId:2, name:"叶子节点1", iconSkin:"icon04"},

			{ id:22, pId:2, name:"叶子节点2", iconSkin:"icon05"},

			{ id:23, pId:2, name:"叶子节点3", iconSkin:"icon06"},

			{ id:3, pId:0, name:"不使用自定义图标", open:true },

			{ id:31, pId:3, name:"叶子节点1"},

			{ id:32, pId:3, name:"叶子节点2"},

			{ id:33, pId:3, name:"叶子节点3"}

		];

	$(document).ready(function(){

			$.fn.zTree.init($("#tree"), setting, zNodes);

		});

	</script>

	<body>

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

	</body>

</html>

jquery Ztree v3.5 实例2 自定义显示在节点前的图片的更多相关文章

  1. jQuery zTree v3.5 实例3 异步树

    最终效果: 点击非叶子节点时,向后台发送请求,获取下级菜单 前台代码如下: <%@ page language="java" contentType="text/h ...

  2. jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗

    一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...

  3. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  4. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

  5. PHP + zTree插件树型文件夹显示

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web显示.权限管理等等. ...

  6. jQuery+zTree

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  7. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  8. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  9. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

随机推荐

  1. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

  2. [Leetcode][Python]45: Jump Game II

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 45: Jump Game IIhttps://oj.leetcode.com ...

  3. OpenStack Block Storage安装配置use LVM

    1,storage systems use LVM Ins and configuration Block Storage; apt-get install lvm2; 创建Physical volu ...

  4. HBase 1、HBase介绍和工作原理

    HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Google文件 ...

  5. 使用Mysql.data.dll文件在服务器上运行访问Mysql

    我使用的这个Mysql.data.dll文件 web.config上面主要需要声明以下代码 <system.data> <DbProviderFactories> <ad ...

  6. K-th Number(第k大数)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 45710   Accepted: 15199 Ca ...

  7. ios 第三方qq授权登陆，第一次登陆后，再次登陆，失效

    这问题找了非常久.最后跟客服联系到.等授权成功后要对 _tencentOAuth 对象释放

  8. 深信服笔试题（网络project师售后）

    总共同拥有3到大题, 1选择 主要有ip地址计算.http协议.vrrp协议. 2.主要是linux填空题 a.linux显示全部系统载入模块____ b.写出linux的两个开机启动程序___.__ ...

  9. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  10. BestCoder Round #3 A,B

    A.预处理出来,0(1)输出. Task schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...