效果如下,最前面的加减号、图标及大小、字体及大小、以及间距都可以更改:
具体如下:
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;
} */