This repository has been archived by the owner on Jun 9, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (111 loc) · 3.19 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FlexTable Example</title>
<link rel="stylesheet" type="text/css" href="../dist/flex-table.css">
</head>
<body>
<!-- Open DevTools(F12) to Checkout Console. -->
<div id="app"></div>
</body>
<script type="text/javascript" src="../dist/flex-table.js"></script>
<script type="text/javascript" src="./mock-min.js"></script>
<!-- makeData and getColumns -->
<script type="text/javascript" src="./utils.js"></script>
<script type="text/javascript">
const columns = getColumns()
const data = makeData(30)
console.time('render')
const table = new FlexTable({
container: '#app',
data,
columns,
className: 'my-flex-table',
id: 'myTable',
rowClassName: data => 'my-table-row',
stripe: false,
dangerous: false,
deepClone: true,
observeData: true,
plugins: {
selector: {}, // 暂无独立配置项, 只需指定一个空对象
editor: {
trigger: 'action', // or 'click'
// verifier: data => data, // 顶层验证方法
columnWidth: 142,
columnName: 'Action',
labels: {
edit: 'Edit',
save: 'Save',
cancel: 'Cancel'
}
},
resizer: {
force: true
}, // 暂无独立配置项, 只需指定一个空对象
sorter: {
multiple: true, // 开启多列排序功能
multipleKey: 'shift' // 启动多列排序的按键, 可选 ctrl, alt, shift
},
extender: {
renderer: data => {
const ul = document.createElement('ul')
ul.style.cssText = `
padding: 10px 50px;
list-style: none
`
const nameLi = document.createElement('li')
nameLi.textContent = `Full Name: ${data.firstName} ${data.lastName}`
const ageLi = nameLi.cloneNode()
ageLi.textContent = `Age: ${data.age}`
ul.appendChild(nameLi)
ul.appendChild(ageLi)
return ul
},
accordion: false,
transition: true
},
// pager: {
// useOptions: true,
// pageOptions: [10, 15, 20, 25, 30],
// currentPage: 1,
// pageSize: 15,
// labels: {
// prev: '上一页',
// next: '下一页',
// row: '行'
// }
// },
filter: {
filterAll: true, // 所有类均过滤 (如有列单独设置, 则优先使用列设置, 否则使用默认过滤设置)
highlight: true // 设置对符合过滤条件的结果进行高亮
},
// layer: {
// loading: true,
// notFound: false,
// delay: 500
// },
scroller: {
height: 450,
mouse: false,
wheel: true,
wheelDistance: 20,
// pullup: (instance, finish) => {
// const { data } = instance
// const newData = [...data, ...makeData(10)]
// setTimeout(() => {
// instance.data = newData
// // instance.refresh({ data: true, struct: true })
// finish(true)
// }, 1000)
// },
// pullupThreshold: 10,
// pullupTip: '加载中...'
}
}
// theme: 'blue',
})
console.timeEnd('render')
</script>
</html>