显示效果如下：

代码如下：

<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. retire

    retire 本来抱着进队的决心迎战,结果在第一试就失利,是能力不足,还是命中注定我不是竞赛的料,一切关于OI的事随着GDOI2016的闭幕而消散-- 今后也许再也不搞OI了,或许会玩一下ACM,现在 ...

  2. hdu 4521 线段树改点求点的应用

    小明系列问题——小明序列 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Tot ...

  3. 响应式流布局插件DyLay

    jQuery插件-Dylay,流布局我们前面介绍过很多,但这个流布局jQuery插件不同的是它的动画效果很不错,大家可以尝试使用下.另外<有用的jQuery布局插件推荐>这篇文章中有好几个 ...

  4. OS Kernel Parameter.semopm

    安装Oracle11g内核参数semopm未校验通过,点击Fix&Check Again后,会提示执行修改脚本,在/tmp/CVU_11.2.0.1.0_oracle下,找到并执行该脚本run ...

  5. .NET 创建并写CSV文件

    /// <summary> /// 创建并写日志 /// </summary> /// <param name="SuccessA100">&l ...

  6. button属性值

    AccessibilityObject 取得指定給控制項的 AccessibleObject. (繼承自 Control). AccessibleDefaultActionDescription 取得 ...

  7. String常用方法总结

    字符串的截取: 1. slice(start,end) 返回一个新的字符串,不会改变原来引用值.end省略的时候,截取的是start到字符串结尾.传入start=0或者不传入start,就是复制了整个 ...

  8. Java Math的 floor,round和ceil的总结

    floor 返回不大于的最大整数 round 则是4舍5入的计算,入的时候是到大于它的整数round方法,它表示“四舍五入”,算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下 ...

  9. Oracle 归档路径

    Oracle 的归档路径设置,这里主要按照官网说明记录 LOG_ARCHIVE_DEST_n 与 LOG_ARCHIVE_DEST_STATE_n 这两个参数. 我使用的数据库是11.2版本,这两个参 ...

  10. C 各种数据类型介绍

    1.各种数据类型介绍: 基本数据类型最主要的特点是,其值不可以再分解为其它类型.也就是说,基本数据类型是自我说明的. 1.1整型 整形包括短整型.整形和长整形. 1.1.1短整形 short a=1; ...