显示效果如下：

代码如下：

<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. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  2. VS2012编译Snmp++ v3.2.25

    VS2012编译Snmp++ v3.2.25跟用VC6/VC2010等编译方法区别不大. 网上和教程上盛传的方式是把snmp++的cpp源文件和头文件都加到工程里,再编译.我觉得添加所有头文件到工程里 ...

  3. Python中metaclass解释

    Classes as objects 首先,在认识metaclass之前,你需要认识下python中的class.python中class的奇怪特性借鉴了smalltalk语言.大多数语言中,clas ...

  4. PIE(二分） 分类： 二分查找 2015-06-07 15:46 9人阅读 评论(0) 收藏

    Pie Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissio ...

  5. Tengine笔记1：安装Tengine和Tengine说明

    什么是Tengine 官方帮助文档:http://tengine.taobao.org/nginx_docs/cn/   Tengine的安装   新建tengine用户组 groupadd -r n ...

  6. 命名空间“System.Windows.Forms”中不存在类型或命名空间名称“DataVisualization”。是否缺少程序集引用?

    using System.Windows.Forms.DataVisualization.Charting; 编译时报警:命名空间"System.Windows.Forms"中不存 ...

  7. 【Android Training UI】创建自定义Views(Lesson 1 - 创建一个View类)

    发布在我的网站 http://kesenhoo.github.io/blog/2013/06/30/android-training-ui-creating-custom-views-lesson-1 ...

  8. 实现简答LinkedList

    package com.表栈和队列; import java.util.Iterator; /**  * 实现LinkedList  * 60页  * @author zj  *  * @param ...

  9. ORACLE告警日志

    告警日志介绍 告警日志文件是一类特殊的跟踪文件(trace file).告警日志文件命名一般为alert_<SID>.log,其中SID为ORACLE数据库实例名称.数据库告警日志是按时间 ...

  10. 对拍BAT

    :loop makedata.exe K.exe Kture.exe fc a.out b.out if %errorlevel%==0 goto loop pause