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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
| <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
| <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
| <html lang="en">
|
| <head>
| <meta charset="utf-8">
| <meta http-equiv="X-UA-Compatible" content="IE=edge">
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
| <title>即时通信</title>
| <link rel="stylesheet" href="/hxzkoa/hxzk/warning/css/index.css">
| <style>
| </style>
| </head>
|
| <body>
| <div class="to__block">
| <div class="to__left">
| <div class="to__split"><span>←</span><span>→</span></div>
| <div class="to__title">选择组织架构</div>
| <div class="to__content">
| <div class="to__search">
| <input id="searchInput" oninput="search(this)" type="text" placeholder="请输入需要搜索的名称" />
| </div>
| <div id="leftCont"></div>
| </div>
| </div>
| <div class="to__right">
| <div class="to__title">已选择（<span id="selectNum">0</span>）人</div>
| <div class="to__content" id="rightCont"></div>
| </div>
| </div>
| <script type="text/javascript" src="./js/libs.js"></script>
| <script type="text/javascript" src="./js/index.js"></script>
| <script>
| // 页面初始化
| window.onload = function () {
|
| let baseData = [
| {
| name: 'xx公司',
| children: [
| {
| name: '综合部',
| children: [
| {
| name: '小明爸爸',
| children: [
| {
| name: '小白',
| active: true,
| children: [],
| },
| {
| name: '小明1',
| children: [],
| },
| {
| name: '小明2',
| children: [],
| },
| {
| name: '小明3',
| children: [],
| },
| {
| name: '小明4',
| children: [],
| },
| {
| name: '小明5',
| children: [],
| },
| {
| name: '小明6',
| children: [],
| },
| {
| name: '小明7',
| children: [],
| },
| {
| name: '小明8',
| children: [],
| },
| {
| name: '小明9',
| children: [],
| },
| {
| name: '小明10',
| children: [],
| },
| {
| name: '小明11',
| children: [],
| },
| ],
| },
| {
| name: '小红',
| children: [],
| },
| ],
| },
| {
| name: '技术部',
| children: [
| {
| name: '小白',
| children: [],
| },
| {
| name: '小黑',
| children: [],
| },
| ],
| },
| {
| name: 'UI部',
| children: [],
| isCatalog: true,
| },
| ],
| },
| ];
|
| window.group = new Group(baseData);
| group.render();
| }
|
| // 箭头点击事件
| function arrowClick(e) {
| group.reveal(e);
| }
|
| // 选中事件
| function checkboxClick(e, type) {
| group.choose(e, type);
| }
|
| // 移除选中事件
| function nodeCencel(e) {
| group.nodeCencel(e);
| }
|
| // 搜索事件
| function search(e) {
| group.search(e);
| }
| </script>
| </body>
|
| </html>
|
|
