显示效果如下：

代码如下：

<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. 新 Azure SQL 数据库服务等级的性能

    4 月 24 日,我们发布了 SQL Database 基本级(预览版)和标准级(预览版)新服务等级的预览版以及新的业务连续性功能.在本博客文章中,我们将深入探究 SQL Database 中新等级的 ...

  2. [转]JSOM绘制地图区块及航道路径

    From :http://support.sailstech.com/kb/c73fd2405d79911253e568ccdc69256dc7c8fb5c/josm 步驟一: 使用JOSM繪製地圖區 ...

  3. json概述及python处理json等数据类型

    <一,概念> 序列化(Serialization):将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON.XML等.反序列化(deserialization): ...

  4. 图片拉伸: stretchableImageWithLeftCapWidth

    - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight: (NSInteger)topCa ...

  5. pl/sql查询中文乱码

    1.设置系统环境变量 变量名:NLS_LANG 变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK 2.修改注册表 regedit->hkey_local_machine ...

  6. 两年前实习时的文档——Platform学习总结

    1  概述 驱动程序实际上是硬件与应用程序之间的中间层.在Linux操作系统中,设备驱动程序对各种不同的设备提供了一致的訪问接口,把设备映射成一个特殊的设备文件,用户程序能够像其它文件一样对设备文件进 ...

  7. AS3: Socket 数据包 收 发

    AS3.0中使用Socket使用tcp服务器协议,它是一种流协议,不停的将分片传输给客户端,P作为流,发包是不会整包到达的,而是源源不断的. 它不同于UDP服务器协议,UDP作为数据包协议,整包到达. ...

  8. textarea

    ■ 摘要 项目 说明 形式 <textarea>-</textarea> 支持 H2+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ 标签省略 ...

  9. UVA 1569　Multiple

    题意: 给定m个1位数字,要求用这些数字组成n的倍数的最小数字,如果无法组成就输出0 分析: BFS,由于n最大5000,余数最多5000,利用余数去判重,并记录下路径即可 代码: #include ...

  10. iOS下的实际网络连接状态检测(转)

    序言 网络连接状态检测对于我们的iOS app开发来说是一个非常通用的需求.为了更好的用户体验,我们会在无网络时展现本地或者缓存的内容,并对用户进行合适的提示.对绝大部分iOS开发者来说,从苹果示例代 ...