Content Table

zTree 修改 Awesome Style

zTree 默认的皮肤很不好看,还是 XP 的风格,例子中的 Awesome Style 很不错:

上面红色的 Awesome Style 风格并不适合所有情况,这里就对它进行简单的修改,下面是效果图:

  • 需要引入 font-awesome.css 和 awesome.css,并且不要引入 zTreeStyle.css
  • 注册函数 addHoverDom 和 removeHoverDom
  • 覆盖 Awesome Style 需要修改的 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>zTree</title>

<!-- [1] 需要引入 font-awesome.css 和 awesome.css,并且不要引入 zTreeStyle.css -->
<link rel="stylesheet" href="http://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.staticfile.org/zTree.v3/3.5.28/css/awesomeStyle/awesome.min.css">
<style media="screen">
.node_name {
font-size: 14px;
margin-left: 2px;
}

.ztree li a {
margin-bottom: 3px;
}

.ztree, .ztree * {
background: white;
}

.ztree, .ztree li a,
.ztree li span.button::before,
.ztree li span.button.ico_open::before,
.ztree li span.button.ico_close::before,
.ztree li span.button.ico_docu::before,
span.tmpzTreeMove_arrow::before {
color: #444;
}
.ztree li a.curSelectedNode {
background-color: white;
color: darkred;
}
</style>
</head>

<body>
<ul id="treeDemo" class="ztree"></ul>

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/zTree.v3/3.5.28/js/jquery.ztree.all.min.js"></script>
<script>
var setting = {
data: {
simpleData: {
enable: true, // 启用数组结构的数据创建 zTree
idKey: 'id', // 定义 node id 的 key,可自定义
pIdKey: 'parentId', // 定义 parent id 的 key,可自定义
rootPId: 0 // 根节点的 parentId,这个节点是看不到的,因为不存在
}
},
edit: {
enable: true // [*] 启用拖拽,重命名和删除等编辑操作
},
view: {
selectedMulti: false, // [*] 为 true 时可选择多个节点,为 false 只能选择一个,默认为 true
addHoverDom: addHoverDom, // [2] 注册函数 addHoverDom 和 removeHoverDom
removeHoverDom: removeHoverDom
}
};

var nodes = [
{ 'id': 1, 'parentId': 0, 'name': '试卷', open: true },
{ 'id': 2, 'parentId': 1, 'name': '数学' },
{ 'id': 3, 'parentId': 1, 'name': '历史' },
{ 'id': 4, 'parentId': 2, 'name': '参数方程' },
{ 'id': 5, 'parentId': 2, 'name': '贝塞尔曲线' },
{ 'id': 6, 'parentId': 3, 'name': '玄武门事变' },
{ 'id': 7, 'parentId': 3, 'name': '桃园三结义' }
];

var tree = $.fn.zTree.init($('#treeDemo'), setting, nodes);

var newCount = 10000000;

// [2.1] 鼠标移动到节点上时创建一个新建子节点的按钮
function addHoverDom(treeId, treeNode) {
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

var $nodeName = $("#"+treeNode.tId+"_span");
$nodeName.after('<span class="button add" id="addBtn_'+treeNode.tId+'" title="新建子节点" onfocus="this.blur();"></span>');

var btn = $("#addBtn_"+treeNode.tId);
if (btn) {
btn.bind("click", function() {
tree.addNodes(treeNode, 0, {id: newCount++, parentId: treeNode.id, name: "请重命名..."});
return false;
});
}
};

// [2.2] 鼠标从节点上离开时删除新建子节点的按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
</script>
</body>

</html>