Skip to content

Commit 0272cc0

Browse files
luo0412luo0412
committed
[layui]adjust
1 parent 5cac59b commit 0272cc0

File tree

3 files changed

+169
-84
lines changed

3 files changed

+169
-84
lines changed

‎_misc/layui/treeTable.ejs‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,21 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link rel="icon" href="/favicon.png" type="image/x-icon" />
8-
<title><%= htmlWebpackPlugin.options.title %></title>
9-
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
10-
<link href="https://cdn.bootcss.com/tailwindcss/0.7.3/utilities.min.css" rel="stylesheet">
11-
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css">
127
<link rel="/plugins/treeTable/treeTable.css">
8+
<!-- <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css">-->
9+
<link rel="stylesheet" href="/plugins/layui/css/layui.css">
10+
1311

1412
</head>
1513
<body>
1614

1715

18-
<div id="root" class="p-5"></div>
16+
<div id="root"></div>
1917

20-
<script>
21-
// 用于挂载
22-
var mountNode = document.getElementById('root')
23-
</script>
2418

19+
<!--<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>-->
2520
<script src="/plugins/layui/layui.js"></script>
26-
<script>
27-
// 自定义模块，这里只需要开放soulTable即可
28-
layui.config({
29-
base: '/plugins/', // 模块所在目录
30-
version: 'v1.5.2' // 插件版本号
31-
}).extend({
32-
treeTable: 'treeTable/treeTable',
33-
});
34-
</script>
21+
<!--<script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script>-->
3522

3623
</body>
3724
</html>

‎_misc/layui/treeTable.js‎

Lines changed: 161 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,18 @@ const data = [
1919
"name": "xxx",
2020
"state": 0,
2121
"createTime": "2019/11/18 10:44:00",
22-
"children": []
2322
},
2423
{
2524
"id": "1_1_2",
2625
"name": "xxx",
2726
"state": 0,
2827
"createTime": "2019/11/18 10:44:00",
29-
"children": []
3028
},
3129
{
3230
"id": "1_1_3",
3331
"name": "xxx",
3432
"state": 0,
3533
"createTime": "2019/11/18 10:44:00",
36-
"children": []
3734
}
3835
]
3936
},
@@ -48,21 +45,18 @@ const data = [
4845
"name": "xxx",
4946
"state": 0,
5047
"createTime": "2019/11/18 10:44:00",
51-
"children": []
5248
},
5349
{
5450
"id": "1_2_2",
5551
"name": "xxx",
5652
"state": 0,
5753
"createTime": "2019/11/18 10:44:00",
58-
"children": []
5954
},
6055
{
6156
"id": "1_2_3",
6257
"name": "xxx",
6358
"state": 0,
6459
"createTime": "2019/11/18 10:44:00",
65-
"children": []
6660
}
6761
]
6862
},
@@ -71,7 +65,6 @@ const data = [
7165
"name": "xxx",
7266
"state": 0,
7367
"createTime": "2019/11/18 10:44:00",
74-
"children": []
7568
}
7669
]
7770
},
@@ -92,21 +85,18 @@ const data = [
9285
"name": "xxx",
9386
"state": 0,
9487
"createTime": "2019/11/18 10:44:00",
95-
"children": []
9688
},
9789
{
9890
"id": "2_1_2",
9991
"name": "xxx",
10092
"state": 0,
10193
"createTime": "2019/11/18 10:44:00",
102-
"children": []
10394
},
10495
{
10596
"id": "2_1_3",
10697
"name": "xxx",
10798
"state": 0,
10899
"createTime": "2019/11/18 10:44:00",
109-
"children": []
110100
}
111101
]
112102
},
@@ -115,14 +105,12 @@ const data = [
115105
"name": "xxx",
116106
"state": 0,
117107
"createTime": "2019/11/18 10:44:00",
118-
"children": []
119108
},
120109
{
121110
"id": "2_3",
122111
"name": "xxx",
123112
"state": 0,
124113
"createTime": "2019/11/18 10:44:00",
125-
"children": []
126114
}
127115
]
128116
},
@@ -137,21 +125,18 @@ const data = [
137125
"name": "xxx",
138126
"state": 0,
139127
"createTime": "2019/11/18 10:44:00",
140-
"children": []
141128
},
142129
{
143130
"id": "3_2",
144131
"name": "xxx",
145132
"state": 0,
146133
"createTime": "2019/11/18 10:44:00",
147-
"children": []
148134
},
149135
{
150136
"id": "3_3",
151137
"name": "xxx",
152138
"state": 0,
153139
"createTime": "2019/11/18 10:44:00",
154-
"children": []
155140
}
156141
]
157142
},
@@ -160,79 +145,191 @@ const data = [
160145
"name": "xxx",
161146
"state": 0,
162147
"createTime": "2019/11/18 10:44:00",
163-
"children": []
164148
},
165149
{
166150
"id": "5",
167151
"name": "xxx",
168152
"state": 0,
169153
"createTime": "2019/11/18 10:44:00",
170-
"children": []
171154
}
172155
]
173156

174-
function App() {
175157

176-
useEffect(() => {
177158

178-
layui.use(['layer', 'util', 'treeTable', 'laytpl'], function () {
179-
var $ = layui.jquery;
180-
var layer = layui.layer;
181-
var util = layui.util;
182-
var treeTable = layui.treeTable;
183-
var laytpl = layui.laytpl
184-
185-
// 渲染表格
186-
var insTb = treeTable.render({
187-
elem: '#myTable',
188-
// url: '/mock/treeTable.json',
189-
data: data,
190-
tree: {
191-
// 折叠图标显示在第几列
192-
iconIndex: 0,
193-
// 自定义id字段的名称
194-
idName: 'id',
195-
// 自定义标识是否还有子节点的字段名称
196-
haveChildName: 'haveChild'
197-
},
198-
cols: [
199-
// {type: 'numbers'},
200-
// {type: 'checkbox'},
201-
{field: 'id', title: 'ID'},
202-
{field: 'name', title: '名称'},
203-
{
204-
field: 'createTime',
205-
title: '创建时间',
206-
templet: function (d) {
207-
return util.toDateString(d.createTime);
208-
},
159+
const initTree = () => {
160+
layui.config({
161+
base: '/plugins/', // 模块所在目录
162+
version: 'v1.5.2' // 插件版本号
163+
}).extend({
164+
treeTable: 'treeTable/treeTable',
165+
}).use(['layer', 'util', 'table', 'treeTable', 'laytpl'], function () {
166+
var $ = layui.jquery;
167+
168+
// var layer = layui.layer;
169+
var util = layui.util;
170+
// var table = layui.table;
171+
var treeTable = layui.treeTable;
172+
// var laytpl = layui.laytpl
173+
174+
// 渲染表格
175+
var insTb = treeTable.render({
176+
elem: '#myTable',
177+
// url: '/mock/treeTable.json',
178+
data: data,
179+
size: 'sm',
180+
tree: {
181+
// 折叠图标显示在第几列
182+
iconIndex: 0,
183+
// 自定义id字段的名称
184+
idName: 'id',
185+
// 自定义标识是否还有子节点的字段名称
186+
// haveChildName: 'haveChild',
187+
// 自定义箭头风格
188+
// arrowType: 'arrow2',
189+
// 自定义图标
190+
getIcon: (d) => {
191+
192+
return ''
193+
// d是当前行的数据
194+
// if (d.children) {
195+
// return '<i class="layui-icon ew-tree-table-arrow" style="visibility: hidden"></i>';
196+
// } else {
197+
// return `<i class="layui-icon ew-tree-table-arrow"></i> `
198+
// }
199+
}
200+
},
201+
cols: [
202+
// { type: 'numbers' },
203+
// { type: 'checkbox' },
204+
{field: 'id', title: 'ID'},
205+
{field: 'name', title: '名称'},
206+
{
207+
field: 'createTime',
208+
title: '创建时间',
209+
templet: (d) => {
210+
return util.toDateString(d.createTime);
209211
},
210-
],
211-
});
212+
},
213+
],
214+
});
215+
216+
insTb.expandAll();
217+
218+
// table.on('row(test)', (obj) => {
219+
// // 得到当前行元素对象
220+
// console.log(obj.tr)
221+
// // 得到当前行数据
222+
// console.log(obj.data)
223+
// });
224+
225+
treeTable.on('row(myTable)', (obj) => {
226+
227+
const flag = 'DATA_HAS_APPEND_TABLE'
228+
var $tr = obj.tr
229+
230+
// 判断当前行是否有可供展开的数据
231+
const info = $tr.data() || {}
232+
if (obj.data && !obj.data.children && info.indent != null) {
233+
234+
$tr.toggleClass('ew-tree-table-open')
212235

213-
insTb.expandAll();
236+
if ($tr.attr(flag)) {
237+
$tr.next('tr').toggleClass('ew-tree-tb-hide')
238+
return
239+
}
214240

215-
treeTable.on('row(test)', function(obj) {
216-
// 得到当前行元素对象
217-
console.log(obj.tr)
218-
// 得到当前行数据
219-
console.log(obj.data)
220-
});
241+
// 标记该行已经追加过表格
242+
$tr.attr(flag, true)
221243

244+
const indent = (info.indent + 1) * 21 + 14
245+
console.log(obj)
246+
// // 得到当前行元素对象
247+
// console.log(obj.tr)
248+
// // 得到当前行数据
249+
// console.log(obj.data)
250+
251+
$tr.after($(`<tr data-pid="${obj.data.pid}" data-indent="${info.indent}"><td colspan="3" style="padding: 5px;padding-left: ${indent}px;">
252+
253+
<table class="layui-table" lay-even="" lay-skin="row">
254+
<colgroup>
255+
<col width="150">
256+
<col width="150">
257+
<col width="200">
258+
<col>
259+
</colgroup>
260+
<thead>
261+
<tr>
262+
<th>人物</th>
263+
<th>民族</th>
264+
<th>出场时间</th>
265+
<th>格言</th>
266+
</tr>
267+
</thead>
268+
<tbody>
269+
<tr>
270+
<td>贤心</td>
271+
<td>汉族</td>
272+
<td>1989-10-14</td>
273+
<td>人生似修行</td>
274+
</tr>
275+
<tr>
276+
<td>张爱玲</td>
277+
<td>汉族</td>
278+
<td>1920-09-30</td>
279+
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
280+
</tr>
281+
<tr>
282+
<td>Helen Keller</td>
283+
<td>拉丁美裔</td>
284+
<td>1880-06-27</td>
285+
<td> Life is either a daring adventure or nothing.</td>
286+
</tr>
287+
<tr>
288+
<td>岳飞</td>
289+
<td>汉族</td>
290+
<td>1103-北宋崇宁二年</td>
291+
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
292+
</tr>
293+
<tr>
294+
<td>孟子</td>
295+
<td>华夏族（汉族）</td>
296+
<td>公元前-372年</td>
297+
<td>猿强，则国强。国强，则猿更强！ </td>
298+
</tr>
299+
</tbody>
300+
</table>
301+
302+
</td></tr>`))
303+
304+
}
222305

223306
});
224307

225-
}, []);
226308

309+
// @fix 允许行冒泡, 修复图标文字的点击问题
310+
// ew-tree-table-td-single
311+
$('[lay-filter="myTable"]').find('.ew-tree-tips,.ew-tree-table-td-single,.ew-tree-pack').click(function () {
312+
const $tr = $(this).parents('tr')
313+
$tr.click()
314+
})
227315

228-
return (
229-
<div>
316+
});
317+
}
230318

231-
<table id="myTable"></table>
232319

320+
function App() {
321+
322+
useEffect(() => {
323+
initTree()
324+
}, []);
325+
326+
return (
327+
<div>
328+
<table id="myTable" lay-filter="myTable"></table>
233329
</div>
234330
);
331+
235332
}
236333

237-
ReactDOM.render(<App/>, mountNode);
334+
ReactDOM.render(<App/>, document.getElementById('root'));
238335

0 commit comments

Comments
 (0)