JavaScript之树列表插件实现

JavaScript之树列表插件实现

treeViewPlugin,一个可以生成任意多级树列表的js插件,本人使用jquery事件委托处理跨浏览器添加事件监听及DOM操作实现需求。
查看插件源码点此
效果如图:
treeViewPlugin效果图
树列表插件示例演示点此

API说明

插件定义

1
2
3
4

var treeViewPlugin = (function() { //插件定义、封装
//插件实现
}());

插件API

1
2
3
4
5
6
7
8

return {
initModule: initModule, //初始化树列表
addParents: addParents, //给树列表添加父级菜单
addChild: addChild, //给树列表添加子级菜单
addChildNode: addChildNode, //
setData: setData //给插件树设置值
};

初始化

1
2
3
4
5
6
7
8
9
10

/**
* [initModule 初始化树列表]
* @param {[type]} $append_target [树列表容器]
* $('.treeviewCont')
* @return {[type]} [函数返回值]
*/
initModule = function($append_target) {
//具体实现
};

添加无父级有子级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
* [addParents 添加无父级有子级菜单
* @param {[Array]} _data [菜单数据]
* [{
* id: 菜单id,
* name: 菜单显示值
*
* }]
*/
addParents = function(_data) {
//具体实现
};

添加无父级无子级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
* [addOne 添加无父级无子级菜单
* @param {[Array]} _data [菜单数据]
* [{
* id: 菜单id,
* name: 菜单显示值
*
* }]
*/
addOne = function(_data) {
//具体实现
};

添加有父级有子级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
* [addChild 添加有父级有子级菜单]
* @param {[Array]} _data [菜单数据]
* [{
* id: 菜单id,
* name: 菜单显示值,
* pId: 父级菜单id
* }]
*/
addChild = function(_data) {
//具体实现
};

添加有父级无子级的菜单

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
* [addChildNode 添加有父级无子级菜单]
* @param {[Array]} _data [菜单数据]
* [{
* id: 菜单id,
* name: 菜单显示值,
* pId: 父级菜单id
* }]
*/
addChildNode = function(_data) {
//具体实现
};

setData为树列表填充值

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

/**
* [setData 为树列表填充值]
* @param {[type]} data [Array]
*/
setData = function(data) {
var result = {
self: [], //无父级无子级树菜单集合
parents: [], //无父级有子级树菜单集合
children: [], //填充有父级有子级树菜单集合
members: [] //填充只有父级无子级树菜单集合
};
//具体实现...
for (var i = 0, _len = data.length; i < _len; i++) {
id_arr.push(data[i].id);
data[i]['has-child-here-flag'] = 0; //有无子级标志,默认0为无
data[i]['has-parent-here-flag'] = 0; //有无父级标志,默认0为无
}
//...
addParents(result.parents);//填充无父级有子级树菜单
addOne(result.self);//填充无父级无子级树菜单
addChildren(result.children);//填充有父级有子级树菜单
addChildNode(result.members);//填充只有父级无子级树菜单
return result;
};

demo展示

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Treeview Plugin Demo</title>
<link rel="stylesheet" href="./css/js-treeview-plugin.css">
<style>
.container {
width: 100%;
height: 100%;
text-align: center;
}

.treeviewCont {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
}


</style>

</head>
<body>
<h1>Treeview Plugin Demo</h1>
<div class="container">
<div class="treeviewCont"></div>
</div>
<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/js-treeview-plugin.js"></script>
<script>
$(function() {
var tree = $('.treeviewCont');
var data = [
{
name: '一级菜单1',
id: 'id_01'
},
{
name: '一级菜单2',
id: 'id_02'
},
{
name: '一级菜单3',
id: 'id_03'
},
{
name: '一级菜单4',
id: 'id_04'
},
{
pId: 'id_01',
name: '二级菜单1001',
id: 'id_01_001'
},
{
pId: 'id_01',
name: '二级菜单102',
id: 'id_01_02'
},
{
pId: 'id_03',
name: '二级菜单3001',
id: 'id_03_001'
},
{
pId: 'id_04',
name: '二级菜单4001',
id: 'id_04_001'
},
{
pId: 'id_03',
name: '二级菜单3002',
id: 'id_03_002'
},
{
pId: 'id_04',
name: '二级菜单4002',
id: 'id_04_002'
},
{
pId: 'id_01_02',
name: '三级菜单12001',
id: 'id_01_02_001'
},
{
pId: 'id_00',
name: '一级菜单5',
id: 'id_05'
}
];
treeViewPlugin.initModule(tree);
treeViewPlugin.setData(data);

});
</script>

</body>
</html>

此插件只是初步实现,更多功能待完善,实际使用可根据实际需求做相应修改,欢迎大家一起分享、交流、学习。
查看插件源码点此