显示效果如下：

代码如下：

<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. IPicture总结

    1.利用IPicture接口加载.显示图片 IPicture接口管理一个图片对象和它的属性.图片对象提供对Bitmap Icon Metafile的语言不相关的抽象支持.图像对象的主要接口是IPict ...

  2. How ASP.NET MVC Works?

    原文地址:http://www.cnblogs.com/artech/archive/2012/04/10/how-mvc-works.html?ADUIN=7783008&ADSESSION ...

  3. 带有OUTPUT的INSERT,DELETE,UPDATE

    原文地址:http://blog.sina.com.cn/s/blog_71460d950100nld2.html OUTPUT是SQL SERVER2005的新特性.可以从数据修改语句中返回输出.可 ...

  4. JIRA官方：JIRA定制工作流

    定制适合项目的工作流 JIRA提供了一个缺省工作流和一系列问题类型,非常适合缺陷追踪和软件开发.在使用中你可以随时根据实际情况对流程进行调整,确保流程能够快速的适应坏境变化. 使你的工作流图形化 使用 ...

  5. eclipse 中的凝视 快捷键

    (1)Ctrl+Space 说明:内容助理. 提供对方法,变量,參数,javadoc等得提示, 应运在多种场合,总之须要提示的时候可先按此快捷键. 注:避免输入法的切换设置与此设置冲突 (2)Ctrl ...

  6. 解决初学者学不懂android，不理解android的设计

    最近在忙着搞一个小项目,所以没有来得及写一些原创性的东西,好容易今天中秋节,就趁现在写一些吧,今天仍然看了些老马的视频,尽管这些东西以前都用过,但是感觉仍然学到了不少东西,说给大家听希望大家也要不要不 ...

  7. leetcode_question_102 Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  8. 【C#】开发可以可视化操作的windows服务

    使用C#开发自定义windows服务是一件十分简单的事.那么什么时候,我们需要自己开发windows服务呢,就是当我们需要计算机定期或者一直执行我们开发的某些程序的时候.这里我以一个WCF的监听服务为 ...

  9. hey

    <div style="height:547px;"> <!--用来保留原来的位置,如果不加的话会脱离流媒体--> <div class=" ...

  10. yii2 安装过程中的问题及解决方法

    一.php版本要求5.4+,如果使用wamp组合包,建议更换 二.各种模块的支持,一般只要修改php.ini文件,去掉相应模块前的注释即可. 注意,Intl extension模块的支持需要将     ...