改變頭部原理：刪除原來表格, 重新建立DOM元素, 重新加載table,實現表頭改變
明白了原理, 我相信大家都能寫出來了, table.reload(ID, options)目前好像還不支持cons的基礎函數變動,只能使用其他方式了,簡單暴力,哈哈哈哈哈哈哈哈嗝！！
下面是示例：
|
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<link rel=
"stylesheet"
href=
"static/layui/css/layui.css"
rel=
"external nofollow"
>
</head>
<body>
<div id=
"myTable"
>
<table id=
"demo"
lay-filter=
"test"
></table>
</div>
<button id=
"buttonChangeTitle"
class=
"layui-btn "
>點擊改變表頭</button>
<script type=
"text/javascript"
src=
"static/layui/layui.js"
charset=
"utf-8"
></script>
<script>
layui.use([
'element'
,
'jquery'
,
'table'
],
function
() {
var
$ = layui.jquery
, table = layui.table
, element = layui.element;
//Tab的切換功能，切換事件監聽等，需要依賴element模塊
var
data = [
{
"id"
: 10000,
"username"
:
"user-0"
,
"sex"
:
"女"
,
"city"
:
"城市-0"
,
"sign"
:
"簽名-0"
,
"experience"
: 255,
"logins"
: 24,
"wealth"
: 82830700,
"classify"
:
"作家"
,
"score"
: 57
}, {
"id"
: 10001,
"username"
:
"user-1"
,
"sex"
:
"男"
,
"city"
:
"城市-1"
,
"sign"
:
"簽名-1"
,
"experience"
: 884,
"logins"
: 58,
"wealth"
: 64928690,
"classify"
:
"詞人"
,
"score"
: 27
}, {
"id"
: 10002,
"username"
:
"user-2"
,
"sex"
:
"女"
,
"city"
:
"城市-2"
,
"sign"
:
"簽名-2"
,
"experience"
: 650,
"logins"
: 77,
"wealth"
: 6298078,
"classify"
:
"醬油"
,
"score"
: 31
}, {
"id"
: 10003,
"username"
:
"user-3"
,
"sex"
:
"女"
,
"city"
:
"城市-3"
,
"sign"
:
"簽名-3"
,
"experience"
: 362,
"logins"
: 157,
"wealth"
: 37117017,
"classify"
:
"詩人"
,
"score"
: 68
}, {
"id"
: 10004,
"username"
:
"user-4"
,
"sex"
:
"男"
,
"city"
:
"城市-4"
,
"sign"
:
"簽名-4"
,
"experience"
: 807,
"logins"
: 51,
"wealth"
: 76263262,
"classify"
:
"作家"
,
"score"
: 6
}, {
"id"
: 10005,
"username"
:
"user-5"
,
"sex"
:
"女"
,
"city"
:
"城市-5"
,
"sign"
:
"簽名-5"
,
"experience"
: 173,
"logins"
: 68,
"wealth"
: 60344147,
"classify"
:
"作家"
,
"score"
: 87
}, {
"id"
: 10006,
"username"
:
"user-6"
,
"sex"
:
"女"
,
"city"
:
"城市-6"
,
"sign"
:
"簽名-6"
,
"experience"
: 982,
"logins"
: 37,
"wealth"
: 57768166,
"classify"
:
"作家"
,
"score"
: 34
}, {
"id"
: 10007,
"username"
:
"user-7"
,
"sex"
:
"男"
,
"city"
:
"城市-7"
,
"sign"
:
"簽名-7"
,
"experience"
: 727,
"logins"
: 150,
"wealth"
: 82030578,
"classify"
:
"作家"
,
"score"
: 28
}, {
"id"
: 10008,
"username"
:
"user-8"
,
"sex"
:
"男"
,
"city"
:
"城市-8"
,
"sign"
:
"簽名-8"
,
"experience"
: 951,
"logins"
: 133,
"wealth"
: 16503371,
"classify"
:
"詞人"
,
"score"
: 14
}, {
"id"
: 10009,
"username"
:
"user-9"
,
"sex"
:
"女"
,
"city"
:
"城市-9"
,
"sign"
:
"簽名-9"
,
"experience"
: 484,
"logins"
: 25,
"wealth"
: 86801934,
"classify"
:
"詞人"
,
"score"
: 75
}]
var
title =
[
//表頭
{field:
'id'
, title:
'ID'
, width: 80, sort:
true
, fixed:
'left'
}
, {field:
'username'
, title:
'用戶名'
, width: 80}
, {field:
'sex'
, title:
'性別'
, width: 80, sort:
true
}
, {field:
'city'
, title:
'城市'
, width: 80}
, {field:
'sign'
, title:
'簽名'
, width: 177}
, {field:
'experience'
, title:
'積分'
, width: 80, sort:
true
}
, {field:
'score'
, title:
'評分'
, width: 80, sort:
true
}
, {field:
'classify'
, title:
'職業'
, width: 80}
, {field:
'wealth'
, title:
'財富'
, sort:
true
}
]
var
title2 =
[
//表頭
{field:
'id'
, title:
'ID'
, width: 80, sort:
true
, fixed:
'left'
}
, {field:
'username'
, title:
'用戶名'
, width: 80}
, {field:
'wealth'
, title:
'財富'
, sort:
true
}
]
//第一個實例
var
tableIns = table.render({
elem:
'#demo'
, id:
'demoTest'
, height: 312
// ,url: '/demo/table/user/' //數據接口
, data: data
, page:
true
//開啟分頁
, cols: [title]
});
$(
"#buttonChangeTitle"
).on(
"click"
,
function
() {
$(
"#myTable"
).empty();
$(
"#myTable"
).append(
'<table id="demo"></table>'
);
//第一個實例
var
tableIns2 = table.render({
elem:
'#demo'
, id:
'demoTest'
, height: 312
// ,url: '/demo/table/user/' //數據接口
, data: data
, page:
true
//開啟分頁
, cols: [title2]
});
})
})
</script>
</body>
</html>
|
點擊前效果：
點擊后效果：
