ZTree修改最前面的加减号、图标及大小、字体及大小、以及间距

最新推荐文章于 2024-07-14 03:35:34 发布
最新推荐文章于 2024-07-14 03:35:34 发布
阅读量5k 收藏 9
点赞数 5
分类专栏： 前端 文章标签： java css html jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzyw525942/article/details/115894911
版权

效果如下，最前面的加减号、图标及大小、字体及大小、以及间距都可以更改：

 

具体如下：

1、首先，把Ztree官方给的Demo中的如下红框中的样式文件复制到自己项目的css目录中：

其中蓝色部分是我自己添加的自定义图标。

2、新建Ztree.html如下：[其中MUI部分可以不用管，与ZTree无关]
 

<!DOCTYPE html>
<HTML>
	<HEAD>
		<TITLE> ZTREE DEMO - noLine </TITLE>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
		<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<SCRIPT type="text/javascript">
			var setting = {
				view: {
					showLine: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: zTreeOnClick
				}
			};

			var zNodes = [{
					id: 1,
					pId: 0,
					name: "电器股份有限公司",
					iconOpen: "../css/zTreeStyle/img/customer/a1.png",
					iconClose: "../css/zTreeStyle/img/customer/a2.png"
				},
				{
					id: 11,
					pId: 1,
					name: "新能源技术部",
					iconOpen: "../css/zTreeStyle/img/customer/b1.png",
					iconClose: "../css/zTreeStyle/img/customer/b2.png"

				},
				{
					id: 111,
					pId: 11,
					name: "焊接技术组",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 112,
					pId: 11,
					name: "化学表面一组",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 113,
					pId: 11,
					name: "测试组",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 114,
					pId: 11,
					name: "市场组",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 12,
					pId: 1,
					name: "测试公司",
					iconOpen: "../css/zTreeStyle/img/customer/a1.png",
					iconClose: "../css/zTreeStyle/img/customer/a2.png"
				},
				{
					id: 121,
					pId: 12,
					name: "测试A公司",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 122,
					pId: 12,
					name: "测试B公司",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 123,
					pId: 12,
					name: "测试C公司",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 124,
					pId: 12,
					name: "测试D公司",
					icon: "../css/zTreeStyle/img/customer/c1.png"
				},
				{
					id: 13,
					pId: 1,
					name: "外包公司",
					isParent: true,
					iconOpen: "../css/zTreeStyle/img/customer/a1.png",
					iconClose: "../css/zTreeStyle/img/customer/a2.png"
				}
			];

			$(function() {
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			});

			/**
			 * @param {Object} event ： 标准的 js event 对象
			 * @param {Object} treeId ： 对应 zTree 的 treeId，便于用户操控
			 * @param {Object} treeNode ：被点击的节点 JSON 数据对象
			 */
			function zTreeOnClick(event, treeId, treeNode) {
				alert(JSON.stringify(treeNode));
			};
		</SCRIPT> 
	</HEAD>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">树形组件</h1>
		</header>
		<div class="mui-content">
			<div style="position: absolute;width: 100%;height: 500px;background-color: #1dff5d;">
			</div>
			<div class="content_wrap" style="position: relative;background-color: #ffddfe;margin: 15px;">
				<div class="zTreeDemoBackground left">
					<ul id="treeDemo" class="ztree"></ul>
				</div>
			</div>
		</div>
	</body>
</HTML>

3、最重要的是修改zTreeStyle.css中的样式，具体说明如下注释部分：

/*-------------------------------------
zTree Style

version:	3.5.19
author:		Hunter.z
email:		hunter.z@263.net
website:	http://code.google.com/p/jquerytree/

-------------------------------------*/

.ztree * { 
	padding: 0;
	margin: 0;
	font-size: 18px;/* 每个节点的字体大小 */
	font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif
}

.ztree {
	margin: 0;
	padding: 5px;
	color: #333
}

.ztree li {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height:28px;/* 每个节点的行间距 */
	text-align: left;
	white-space: nowrap;
	outline: 0
}

.ztree li ul {
	margin: 0;
	padding: 0 0 0 18px
}

.ztree li ul.line {
	background: url(./img/line_conn.gif) 0 0 repeat-y;
}

.ztree li a {
	padding: 1px 3px 0 0;
	margin: 0;
	cursor: pointer;
	height: 17px;
	color: #333;
	background-color: transparent;
	text-decoration: none;
	vertical-align: top;
	display: inline-block
}

.ztree li a:hover {
	text-decoration: underline
}

.ztree li a.curSelectedNode { /* 选中节点的背景色*/
	padding-top: 0px;
	background-color: #FFE6B0;
	color: black;
	height: 36px;
	border: 1px #FFB951 solid;
	opacity: 0.8;
}

.ztree li a.curSelectedNode_Edit {
	padding-top: 0px;
	background-color: #FFE6B0;
	color: black;
	height: 16px;
	border: 1px #FFB951 solid;
	opacity: 0.8;
}

.ztree li a.tmpTargetNode_inner {
	padding-top: 0px;
	background-color: #316AC5;
	color: white;
	height: 16px;
	border: 1px #316AC5 solid;
	opacity: 0.8;
	filter: alpha(opacity=80)
}

.ztree li a.tmpTargetNode_prev {}

.ztree li a.tmpTargetNode_next {}

.ztree li a input.rename {
	height: 14px;
	width: 80px;
	padding: 0;
	margin: 0;
	font-size: 12px;
	border: 1px #7EC4CC solid;
	*border: 0px
}

.ztree li span {
	line-height: 16px;
	margin-right: 2px
}

.ztree li span.button {
	line-height: 0;
	margin: 0;
	width: 26px;/* 图标大小*/
	height: 26px;
	display: inline-block;
	vertical-align: middle;
	border: 0 none;
	cursor: pointer;
	outline: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-image: url("./img/zTreeStandard.png");
	*background-image: url("./img/zTreeStandard.gif")
}

.ztree li span.button.chk {
	width: 13px;
	height: 13px;
	margin: 0 3px 0 0;
	cursor: auto
}

.ztree li span.button.chk.checkbox_false_full {
	background-position: 0 0
}

.ztree li span.button.chk.checkbox_false_full_focus {
	background-position: 0 -14px
}

.ztree li span.button.chk.checkbox_false_part {
	background-position: 0 -28px
}

.ztree li span.button.chk.checkbox_false_part_focus {
	background-position: 0 -42px
}

.ztree li span.button.chk.checkbox_false_disable {
	background-position: 0 -56px
}

.ztree li span.button.chk.checkbox_true_full {
	background-position: -14px 0
}

.ztree li span.button.chk.checkbox_true_full_focus {
	background-position: -14px -14px
}

.ztree li span.button.chk.checkbox_true_part {
	background-position: -14px -28px
}

.ztree li span.button.chk.checkbox_true_part_focus {
	background-position: -14px -42px
}

.ztree li span.button.chk.checkbox_true_disable {
	background-position: -14px -56px
}

.ztree li span.button.chk.radio_false_full {
	background-position: -28px 0
}

.ztree li span.button.chk.radio_false_full_focus {
	background-position: -28px -14px
}

.ztree li span.button.chk.radio_false_part {
	background-position: -28px -28px
}

.ztree li span.button.chk.radio_false_part_focus {
	background-position: -28px -42px
}

.ztree li span.button.chk.radio_false_disable {
	background-position: -28px -56px
}

.ztree li span.button.chk.radio_true_full {
	background-position: -42px 0
}

.ztree li span.button.chk.radio_true_full_focus {
	background-position: -42px -14px
}

.ztree li span.button.chk.radio_true_part {
	background-position: -42px -28px
}

.ztree li span.button.chk.radio_true_part_focus {
	background-position: -42px -42px
}

.ztree li span.button.chk.radio_true_disable {
	background-position: -42px -56px
}

.ztree li span.button.switch {
	width: 18px;
	height: 18px
}

.ztree li span.button.root_open {
	background-position: -92px -54px
}

.ztree li span.button.root_close {
	background-position: -74px -54px
}

.ztree li span.button.roots_open {
	background-position: -92px 0
}

.ztree li span.button.roots_close {
	background-position: -74px 0
}

.ztree li span.button.center_open {
	background-position: -92px -18px
}

.ztree li span.button.center_close {
	background-position: -74px -18px
}

.ztree li span.button.bottom_open {
	background-position: -92px -36px
}

.ztree li span.button.bottom_close {
	background-position: -74px -36px
}

.ztree li span.button.noline_open {
	background-position: -92px -72px
}

.ztree li span.button.noline_close {
	background-position: -74px -72px
}

.ztree li span.button.root_docu {
	background: none;
}

.ztree li span.button.roots_docu {
	background-position: -56px 0
}

.ztree li span.button.center_docu {
	background-position: -56px -18px
}

.ztree li span.button.bottom_docu {
	background-position: -56px -36px
}

.ztree li span.button.noline_docu {
	background: none;
}

.ztree li span.button.ico_open {
	margin-right: 10px; /* 图标和节点名字之间的距离*/
	background-position: -110px -16px;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.ico_close {
	margin-right: 10px; /* 图标和节点名字之间的距离*/
	background-position: -110px 0;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.ico_docu {
	margin-right: 10px;/* 图标和节点名字之间的距离*/
	background-position: -110px -32px;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.edit {
	margin-right: 2px;/* 图标和节点名字之间的距离*/
	background-position: -110px -48px;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.remove {
	margin-right: 2px;/* 图标和节点名字之间的距离*/
	background-position: -110px -64px;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.ico_loading {
	margin-right: 2px; /* 图标和节点名字之间的距离*/
	background: url(./img/loading.gif) no-repeat scroll 0 0 transparent;
	vertical-align: top;
	*vertical-align: middle
}

ul.tmpTargetzTree {
	background-color: #FFE6B0;
	opacity: 0.8;
	filter: alpha(opacity=80)
}

span.tmpzTreeMove_arrow {
	width: 16px;
	height: 16px;
	display: inline-block;
	padding: 0;
	margin: 2px 0 0 1px;
	border: 0 none;
	position: absolute;
	background-color: transparent;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: -110px -80px;
	background-image: url("./img/zTreeStandard.png");
	*background-image: url("./img/zTreeStandard.gif")
}

ul.ztree.zTreeDragUL {
	margin: 0;
	padding: 0;
	position: absolute;
	width: auto;
	height: auto;
	overflow: hidden;
	background-color: #cfcfcf;
	border: 1px #00B83F dotted;
	opacity: 0.8;
	filter: alpha(opacity=80)
}

.zTreeMask {
	z-index: 10000;
	background-color: #cfcfcf;
	opacity: 0.0;
	filter: alpha(opacity=0);
	position: absolute
}

/* level style*/
/*.ztree li span.button.level0 {
	display:none;
}
.ztree li ul.level0 {
	padding:0;
	background:none;
}*/


/*更改最前面的加减号： */
.ztree li span.button.noline_open {
	background-image: url("img/customer/d2.png");
	background-position: center;
	margin-right: 10px;/* 距离右边的距离 */
}

.ztree li span.button.noline_close {
	background-image: url("img/customer/d1.png");
	background-position: center;
	margin-right: 10px;/* 距离右边的距离 */
}
/* 显示叶子节点的收起三角形图标: 即最深的那一级别的图表 */
/* .ztree span.button.level2.noline_docu {
	background-image: url("img/customer/d1.png");
	background-position: center;
	background-repeat: no-repeat;
} */

 

晓梦轻寒
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Z-tree实例（六）——连接线、图标、字体样式
总有一天，你的日积月累，会成为别人的望尘莫及
08-16 2680
主要琢磨ztree的基本属性，如连接线的显示、title的显示、以及icon和font等的设置。 页面结构如下： &lt;BODY&gt; &lt;div class="content_wrap"&gt; &lt;div class="zTreeDemoBackground left"&gt; &lt;ul id="treeDemo" class="ztree&quot
Ztree bootstrap风格样式
03-20
Ztree bootstrap风格样式，下载文件，在页面引入CSS文件，即可展示。
zTree自定义状态图标实现
10-17
本实例详细讲述了如何通过zTree实现满足项目需求Tree数据分层显示要求，通过zTree灵活的自定义属性，轻松完成Tree的改造
zTree修改样式（例如修改字体大小，和各种图标）
热门推荐
CHL博客
06-06 3万+
找到zTree_v3/css/ zTreeStyle/zTreeStyle.css文件找到ztree*｛｝在里面修改样式需要修改其他，找到相应css修改即可
jquery Ztree 设置图标
最新发布
weixin_35949435的博客
07-14 64
在网页开发中，使用jQuery Ztree插件可以方便地实现树形结构的展示与操作，而其中设置图标是一个常见的需求。通过设置不同的图标，可以让树形结构更加清晰、美观。下面我们一起来看看如何在jQuery Ztree中设置节点的图标。 首先，我们需要引入jQuery和Ztree的相关文件。在HTML文件中添加以下代码： 登录后...
z-tree插件更换父节点的加减图标为小三角
qq_45164516的博客
03-24 504
z-tree插件更换父节点的加减图标为小三角
zTree样式修改
weixin_34185320的博客
03-30 5584
ztree挺好用的，不过公司美工设计的行政树图稿一般都比ztree原生的样式要好看的多，所以只能自己单独对样式进行修改。目前样式倒是修改好了，只能不能根据层级动态匹配样式，每个层级的被选中样式需要对两个属性单独设置，具体修改地方下面代码中有描述 /**************行政树菜单样式**************************/ .left-content .leftleve...
【zTree】将zTree节点前的展开收起图标（加减号）改为三角形图标
qq_32886245的博客
12-17 6114
zTree是jQuery 树插件，官网地址。 新需求：把树节点前的加减号图标，改为三角形图标；去掉图标；去掉连接线； 修改前与修改后对比 去掉图标；去掉连接线 参考地址：http://www.treejs.cn/v3/demo.php#_103 按照官网文档在setting里配置就行，代码如下： var setting = { view: { selectedMulti: ...
【zTree】修改节点图标
暂七师师长常乃超
07-05 2万+
【需求】                                                                如图所示：在一个页面里，左右两棵树，要求右侧的树正常用“文件夹”和“纸张”图标显示树的父子节点，左侧的树由于只有子节点，用其他样式图标来替换“纸张”样式图标。          【实现】        思路一：        由于该项目前端使用ea
ztree_ztree修改版_
10-01
《zTree修改版：构建灵活的数据树结构》 在IT领域，数据的组织和呈现方式至关重要，尤其是在处理具有层级关系的数据时。zTree是一款广泛应用于Web开发中的JavaScript库，专门用于构建树状结构，如地区、组织架构或...
ztree根据文本内筛选叶子节，并改变叶子节点字体颜色
11-17
本主题聚焦于如何利用ZTree实现基于文本内容筛选并改变叶子节点的字体颜色。这个功能在数据展示和用户交互中具有较高的实用价值，比如在搜索或过滤功能中。 首先，我们需要理解ZTree的核心概念。ZTree是由JSON数据...
bootstrap风格的ztree样式
07-29
bootstrap风格的ztree样式使用引入步骤：下载下来是一个html页面，有demo例子已经写好，只要项目引入了zTreeStyle.css、jquery.js、ztree.js即可使用
漂亮的ztree样式主题
03-29
非常好看的ztree样式，可以使用不同图标，可以兼容IE6，Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 兼容 IE6 check 演示 CheckBox演示 Radio演示 异步加载演示 事件演示 编辑演示 默认编辑 编辑 & 异步加载 共存 JS操作 大数据量演示 普通加载 高级异步加载 高级应用演示 两棵树的数据交换 添加自定义控件 checkbox & radio 共存 右键菜单 下拉菜单 皮肤演示
ztree_bootstrap样式风格
04-08
ztree可以使用bootstrap风格，压缩包中有使用说明和对应的文件
zTree主题 bootstrapStyle、metroStyle等
11-20
zTree主题打包，包含三个主题：bootstrap主题 扁平化主题 原版主题，资源均来自网络，打包方便使用
Ztree各种样式的js树菜单，超好用！（看评论酌情下载）
02-24
Ztree各种样式的js树菜单，超好用！
ztree官网参考文档及demo
01-17
《zTree全方位解析与实战应用》 zTree是一款在Web前端广泛应用的JavaScript树形插件，以其丰富的功能、良好的性能和灵活的定制性受到了开发者的青睐。本文将深入解析zTree的核心概念，介绍其基本使用方法，并通过...
ztree设置字体大小
07-28
1. 在 zTree 初始化之前，可以通过设置 zTree 的全局配置来修改字体大小。例如： ```javascript $.fn.zTree.init($("#treeDemo"), { fontCss: { fontSize: "16px" } }); ``` 2. 如果需要针对特定的节点设置不同的...
ztree调整节点间距及一般使用
haiyangyiba的专栏
11-02 336
距离上次使用ztree的功能已经有许多年了，现在再来看它的效果，总是感觉菜单之间的间距比较的小，所以本次分享一下将它的间距给调大一些，同时也稍微的做一个功能稍微全面的简单示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值