w-table-vue 1.0.21 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/w-table-vue.umd.js +3 -3
- package/dist/w-table-vue.umd.js.map +1 -1
- package/docs/examples/app.html +1 -1
- package/docs/examples/app.umd.js +2 -2
- package/docs/examples/app.umd.js.map +1 -1
- package/docs/examples/w-table-edit_default.html +18 -1
- package/docs/examples/w-table-edit_editable.html +18 -1
- package/docs/examples/w-table-edit_editable_checkId.html +18 -1
- package/docs/examples/w-table-edit_editable_checkId_opt.modifyDataWhenSave_save(call cmp. method).html +18 -1
- package/docs/examples/w-table-edit_editable_checkId_successMsgFromAddRow_errorMsgFromAddRow.html +18 -1
- package/docs/examples/w-table-edit_editable_enableDownloadWhenNoRows_tooltipDownloadExcelFileForHead_useHeadWhenDownload.html +570 -0
- package/docs/examples/w-table-edit_editable_inforPaddingStyle_menuBackgroundColor.html +18 -1
- package/docs/examples/w-table-edit_editable_language_checkId_tooltipAddRow.html +18 -1
- package/docs/examples/w-table-edit_editable_language_textLabelDataName_textPlaceholderDataName.html +18 -1
- package/docs/examples/w-table-edit_editable_no enableInfor.html +18 -1
- package/docs/examples/w-table-edit_editable_no enableMenu.html +18 -1
- package/docs/examples/w-table-edit_editable_opt.beforeAddRow.html +18 -1
- package/docs/examples/w-table-edit_editable_opt.kpCellFormat_no useCellFormatWhenDownload.html +18 -1
- package/docs/examples/w-table-edit_editable_opt.kpConvertKeysWhenUploadData.html +18 -1
- package/docs/examples/w-table-edit_editable_opt.optForUploadData.html +18 -1
- package/docs/examples/w-table-edit_editable_opt.optForUploadData.uploadMode (append, no popup).html +18 -1
- package/docs/examples/w-table-edit_editable_slot btns-right.html +18 -1
- package/docs/examples/w-table-edit_fixIds (fix id).html +18 -1
- package/docs/examples/w-table-edit_hideIds (hide mappingId).html +18 -1
- package/docs/examples/w-table-edit_name_description.html +18 -1
- package/docs/examples/w-table-edit_no enableInfor.html +18 -1
- package/docs/examples/w-table-edit_no enableMenu.html +18 -1
- package/docs/examples/w-table-edit_opt.kpCellFormat.html +18 -1
- package/docs/examples/w-table-edit_opt.kpHead.html +18 -1
- package/docs/examples/w-table-edit_removeIdsWhenDownload (remove id, mappingId, order, isActive).html +18 -1
- package/docs/examples/w-table-edit_slot btns-left.html +18 -1
- package/docs/examples/w-table-edit_slot btns-right.html +18 -1
- package/docs/examples/w-table-edit_slot cell-render.html +18 -1
- package/docs/examples/w-table-edit_slot cell-tooltip.html +18 -1
- package/docs/examples/w-table-edit_slot head-render.html +18 -1
- package/docs/examples/w-table-edit_slot head-tooltip.html +18 -1
- package/docs/examples/w-table-edit_slot infor (name_description).html +18 -1
- package/docs/examples/w-table-edit_sortColIds (sort by order).html +18 -1
- package/docs/index.html +1 -1
- package/docs/module-WTableEdit.html +33 -9
- package/package.json +4 -4
- package/src/AppZoneWTableEdit.vue +38 -0
- package/src/components/WTableEdit.vue +70 -10
|
@@ -0,0 +1,570 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
5
|
+
<meta
|
|
6
|
+
name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
|
|
8
|
+
/>
|
|
9
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
10
|
+
<title>w-table-vue</title>
|
|
11
|
+
|
|
12
|
+
<!-- @babel/polyfill -->
|
|
13
|
+
<script
|
|
14
|
+
nomodule
|
|
15
|
+
src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
|
|
16
|
+
></script>
|
|
17
|
+
|
|
18
|
+
<!-- vue -->
|
|
19
|
+
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
|
|
20
|
+
|
|
21
|
+
<!-- extractHtml已自動添加@babel/polyfill與vue -->
|
|
22
|
+
|
|
23
|
+
<!-- fontawesome -->
|
|
24
|
+
<link
|
|
25
|
+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
|
|
26
|
+
rel="stylesheet"
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
|
|
30
|
+
<link
|
|
31
|
+
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
|
|
32
|
+
rel="stylesheet"
|
|
33
|
+
/>
|
|
34
|
+
|
|
35
|
+
<!-- google, 各組件使用mdi/js故不需引用 -->
|
|
36
|
+
<link
|
|
37
|
+
_href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
|
|
38
|
+
rel="stylesheet"
|
|
39
|
+
/>
|
|
40
|
+
<link
|
|
41
|
+
_href="https://fonts.googleapis.com/css?family=Material+Icons"
|
|
42
|
+
rel="stylesheet"
|
|
43
|
+
/>
|
|
44
|
+
|
|
45
|
+
<!-- w-table-vue -->
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
|
|
47
|
+
|
|
48
|
+
<style>
|
|
49
|
+
.item {
|
|
50
|
+
/* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
|
|
51
|
+
border-left: 3px solid #ffba75;
|
|
52
|
+
margin: 5px 5px 8px 0px;
|
|
53
|
+
padding: 3px 3px 5px 10px;
|
|
54
|
+
font-size: 0.9rem;
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: flex-start;
|
|
57
|
+
align-items: center;
|
|
58
|
+
}
|
|
59
|
+
.head1 {
|
|
60
|
+
padding: 0px 0px 20px 0px;
|
|
61
|
+
font-size: 2.5rem;
|
|
62
|
+
}
|
|
63
|
+
.bkh {
|
|
64
|
+
/* 寬 */
|
|
65
|
+
padding: 20px;
|
|
66
|
+
}
|
|
67
|
+
@media screen and (max-width: 800px) {
|
|
68
|
+
/* 中 */
|
|
69
|
+
.bkh {
|
|
70
|
+
padding: 10px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
@media screen and (max-width: 400px) {
|
|
74
|
+
/* 窄 */
|
|
75
|
+
.bkh {
|
|
76
|
+
padding: 5px;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
.bk {
|
|
80
|
+
/* 寬 */
|
|
81
|
+
display: inline-block;
|
|
82
|
+
vertical-align: top;
|
|
83
|
+
padding: 0px 80px 60px 0px;
|
|
84
|
+
}
|
|
85
|
+
@media screen and (max-width: 1000px) {
|
|
86
|
+
/* 中窄 */
|
|
87
|
+
.bk {
|
|
88
|
+
display: block;
|
|
89
|
+
padding: 0px 0px 50px 0px;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
93
|
+
</head>
|
|
94
|
+
<body
|
|
95
|
+
style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
|
|
96
|
+
>
|
|
97
|
+
<div id="app" class="bkh" style>
|
|
98
|
+
<div class="head1">
|
|
99
|
+
<span
|
|
100
|
+
style="cursor:pointer;"
|
|
101
|
+
title="open for copy link to view component"
|
|
102
|
+
onclick="window.open('//yuda-lyu.github.io/w-table-vue/examples/app.html?cmp='+this.innerText,'_blank')"
|
|
103
|
+
>w-table-edit</span>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="bk">
|
|
106
|
+
<div
|
|
107
|
+
class="item"
|
|
108
|
+
>editable & enableDownloadWhenNoRows & tooltipDownloadExcelFileForHead & useHeadWhenDownload & opt.kpConvertKeysWhenUploadData</div>
|
|
109
|
+
|
|
110
|
+
<w-table-edit
|
|
111
|
+
style="width:600px; height:400px;"
|
|
112
|
+
:name="WTableEdit.name"
|
|
113
|
+
:description="WTableEdit.description"
|
|
114
|
+
:opt="WTableEdit.opt10"
|
|
115
|
+
:editable="true"
|
|
116
|
+
:enable-download-when-no-rows="true"
|
|
117
|
+
:tooltip-download-excel-file-for-head="'下載表頭範本'"
|
|
118
|
+
:use-head-when-download="true"
|
|
119
|
+
@success="evSuccess"
|
|
120
|
+
@error="evError"
|
|
121
|
+
></w-table-edit>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<script>
|
|
126
|
+
//install
|
|
127
|
+
Vue.use(window["w-table-vue"]);
|
|
128
|
+
|
|
129
|
+
//initialize
|
|
130
|
+
new Vue({
|
|
131
|
+
el: "#app",
|
|
132
|
+
|
|
133
|
+
data: function() {
|
|
134
|
+
let keys1 = ["make", "model", "price"];
|
|
135
|
+
let kpHeadFilterType1 = {
|
|
136
|
+
//default: num (num,text,time,set)
|
|
137
|
+
make: "text",
|
|
138
|
+
model: "text",
|
|
139
|
+
price: "num"
|
|
140
|
+
};
|
|
141
|
+
let rows1 = [
|
|
142
|
+
{ make: "Toyota", model: "Celica", price: 35000 },
|
|
143
|
+
{ make: "Ford", model: "Mondeo", price: 32000 },
|
|
144
|
+
{ make: "Porsche", model: "Boxter", price: 72000 },
|
|
145
|
+
{ make: "BMW", model: "Sedan", price: 66000 },
|
|
146
|
+
{ make: "Nissan", model: "March", price: 61000 },
|
|
147
|
+
{ make: "Lexus", model: "RX", price: 56000 },
|
|
148
|
+
{ make: "Audi", model: "A6 Allroad", price: 45000 },
|
|
149
|
+
{ make: "Mazda", model: "MX-5", price: 36000 },
|
|
150
|
+
{ make: "Mercedes-Benz", model: "Cabriolet", price: 86000 },
|
|
151
|
+
{ make: "Volkswagen", model: "Beetle", price: 68000 },
|
|
152
|
+
{ make: "Honda", model: "City", price: 69000 },
|
|
153
|
+
{ make: "Volvo", model: "S60", price: 71000 },
|
|
154
|
+
{ make: "Subaru", model: "BRZ", price: 48000 }
|
|
155
|
+
];
|
|
156
|
+
let keys2 = [
|
|
157
|
+
"id",
|
|
158
|
+
"mappingId",
|
|
159
|
+
"order",
|
|
160
|
+
"make",
|
|
161
|
+
"model",
|
|
162
|
+
"price",
|
|
163
|
+
"isActive"
|
|
164
|
+
];
|
|
165
|
+
let kpHeadFilterType2 = {
|
|
166
|
+
//default: num (num,text,time,set)
|
|
167
|
+
id: "text",
|
|
168
|
+
mappingId: "text",
|
|
169
|
+
order: "num",
|
|
170
|
+
make: "text",
|
|
171
|
+
model: "text",
|
|
172
|
+
price: "num",
|
|
173
|
+
isActive: "text"
|
|
174
|
+
};
|
|
175
|
+
let rows2 = [
|
|
176
|
+
{
|
|
177
|
+
id: "id-Toyota",
|
|
178
|
+
mappingId: "car_table",
|
|
179
|
+
order: 0,
|
|
180
|
+
make: "Toyota",
|
|
181
|
+
model: "Celica",
|
|
182
|
+
price: 35000,
|
|
183
|
+
isActive: "y"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
id: "id-Ford",
|
|
187
|
+
mappingId: "car_table",
|
|
188
|
+
order: 1,
|
|
189
|
+
make: "Ford",
|
|
190
|
+
model: "Mondeo",
|
|
191
|
+
price: 32000,
|
|
192
|
+
isActive: "y"
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
id: "id-Porsche",
|
|
196
|
+
mappingId: "car_table",
|
|
197
|
+
order: 2,
|
|
198
|
+
make: "Porsche",
|
|
199
|
+
model: "Boxter",
|
|
200
|
+
price: 72000,
|
|
201
|
+
isActive: "y"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
id: "id-BMW",
|
|
205
|
+
mappingId: "car_table",
|
|
206
|
+
order: 11,
|
|
207
|
+
make: "BMW",
|
|
208
|
+
model: "Sedan",
|
|
209
|
+
price: 66000,
|
|
210
|
+
isActive: "y"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
id: "id-Nissan",
|
|
214
|
+
mappingId: "car_table",
|
|
215
|
+
order: 8,
|
|
216
|
+
make: "Nissan",
|
|
217
|
+
model: "March",
|
|
218
|
+
price: 61000,
|
|
219
|
+
isActive: "y"
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
id: "id-Lexus",
|
|
223
|
+
mappingId: "car_table",
|
|
224
|
+
order: 4,
|
|
225
|
+
make: "Lexus",
|
|
226
|
+
model: "RX",
|
|
227
|
+
price: 56000,
|
|
228
|
+
isActive: "y"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
id: "id-Audi",
|
|
232
|
+
mappingId: "car_table",
|
|
233
|
+
order: 5,
|
|
234
|
+
make: "Audi",
|
|
235
|
+
model: "A6 Allroad",
|
|
236
|
+
price: 45000,
|
|
237
|
+
isActive: "y"
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
id: "id-Mazda",
|
|
241
|
+
mappingId: "car_table",
|
|
242
|
+
order: 6,
|
|
243
|
+
make: "Mazda",
|
|
244
|
+
model: "MX-5",
|
|
245
|
+
price: 36000,
|
|
246
|
+
isActive: "y"
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
id: "id-Mercedes",
|
|
250
|
+
mappingId: "car_table",
|
|
251
|
+
order: 7,
|
|
252
|
+
make: "Mercedes-Benz",
|
|
253
|
+
model: "Cabriolet",
|
|
254
|
+
price: 86000,
|
|
255
|
+
isActive: "y"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
id: "id-Volkswagen",
|
|
259
|
+
mappingId: "car_table",
|
|
260
|
+
order: 9,
|
|
261
|
+
make: "Volkswagen",
|
|
262
|
+
model: "Beetle",
|
|
263
|
+
price: 68000,
|
|
264
|
+
isActive: "y"
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
id: "id-Honda",
|
|
268
|
+
mappingId: "car_table",
|
|
269
|
+
order: 10,
|
|
270
|
+
make: "Honda",
|
|
271
|
+
model: "City",
|
|
272
|
+
price: 69000,
|
|
273
|
+
isActive: "y"
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
id: "id-Volvo",
|
|
277
|
+
mappingId: "car_table",
|
|
278
|
+
order: 12,
|
|
279
|
+
make: "Volvo",
|
|
280
|
+
model: "S60",
|
|
281
|
+
price: 71000,
|
|
282
|
+
isActive: "y"
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
id: "id-Subaru",
|
|
286
|
+
mappingId: "car_table",
|
|
287
|
+
order: 3,
|
|
288
|
+
make: "Subaru",
|
|
289
|
+
model: "BRZ",
|
|
290
|
+
price: 48000,
|
|
291
|
+
isActive: "y"
|
|
292
|
+
}
|
|
293
|
+
];
|
|
294
|
+
let keys3 = [
|
|
295
|
+
"id",
|
|
296
|
+
"mappingId",
|
|
297
|
+
"order",
|
|
298
|
+
"make",
|
|
299
|
+
"model",
|
|
300
|
+
"price",
|
|
301
|
+
"isActive"
|
|
302
|
+
];
|
|
303
|
+
let kpHeadFilterType3 = {
|
|
304
|
+
//default: num (num,text,time,set)
|
|
305
|
+
id: "text",
|
|
306
|
+
mappingId: "text",
|
|
307
|
+
order: "num",
|
|
308
|
+
make: "text",
|
|
309
|
+
model: "text",
|
|
310
|
+
price: "num",
|
|
311
|
+
isActive: "text"
|
|
312
|
+
};
|
|
313
|
+
let rows3 = [
|
|
314
|
+
{
|
|
315
|
+
id: "",
|
|
316
|
+
mappingId: "",
|
|
317
|
+
order: 0,
|
|
318
|
+
make: "Toyota",
|
|
319
|
+
model: "Celica",
|
|
320
|
+
price: 35000
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
id: "",
|
|
324
|
+
mappingId: "",
|
|
325
|
+
order: 1,
|
|
326
|
+
make: "Ford",
|
|
327
|
+
model: "Mondeo",
|
|
328
|
+
price: 32000
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
id: "",
|
|
332
|
+
mappingId: "",
|
|
333
|
+
order: 2,
|
|
334
|
+
make: "Porsche",
|
|
335
|
+
model: "Boxter",
|
|
336
|
+
price: 72000
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
id: "",
|
|
340
|
+
mappingId: "",
|
|
341
|
+
order: 11,
|
|
342
|
+
make: "BMW",
|
|
343
|
+
model: "Sedan",
|
|
344
|
+
price: 66000
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
id: "",
|
|
348
|
+
mappingId: "",
|
|
349
|
+
order: 8,
|
|
350
|
+
make: "Nissan",
|
|
351
|
+
model: "March",
|
|
352
|
+
price: 61000
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
id: "",
|
|
356
|
+
mappingId: "",
|
|
357
|
+
order: 4,
|
|
358
|
+
make: "Lexus",
|
|
359
|
+
model: "RX",
|
|
360
|
+
price: 56000
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
id: "",
|
|
364
|
+
mappingId: "",
|
|
365
|
+
order: 5,
|
|
366
|
+
make: "Audi",
|
|
367
|
+
model: "A6 Allroad",
|
|
368
|
+
price: 45000
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
id: "",
|
|
372
|
+
mappingId: "",
|
|
373
|
+
order: 6,
|
|
374
|
+
make: "Mazda",
|
|
375
|
+
model: "MX-5",
|
|
376
|
+
price: 36000
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
id: "",
|
|
380
|
+
mappingId: "",
|
|
381
|
+
order: 7,
|
|
382
|
+
make: "Mercedes-Benz",
|
|
383
|
+
model: "Cabriolet",
|
|
384
|
+
price: 86000
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
id: "",
|
|
388
|
+
mappingId: "",
|
|
389
|
+
order: 9,
|
|
390
|
+
make: "Volkswagen",
|
|
391
|
+
model: "Beetle",
|
|
392
|
+
price: 68000
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
id: "",
|
|
396
|
+
mappingId: "",
|
|
397
|
+
order: 10,
|
|
398
|
+
make: "Honda",
|
|
399
|
+
model: "City",
|
|
400
|
+
price: 69000
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
id: "",
|
|
404
|
+
mappingId: "",
|
|
405
|
+
order: 12,
|
|
406
|
+
make: "Volvo",
|
|
407
|
+
model: "S60",
|
|
408
|
+
price: 71000
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
id: "",
|
|
412
|
+
mappingId: "",
|
|
413
|
+
order: 3,
|
|
414
|
+
make: "Subaru",
|
|
415
|
+
model: "BRZ",
|
|
416
|
+
price: 48000
|
|
417
|
+
}
|
|
418
|
+
];
|
|
419
|
+
return {
|
|
420
|
+
WTableEdit: {
|
|
421
|
+
name: "Car Price",
|
|
422
|
+
description:
|
|
423
|
+
"The relationship between different car types and prices",
|
|
424
|
+
opt1: {
|
|
425
|
+
keys: keys1,
|
|
426
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
427
|
+
rows: rows1
|
|
428
|
+
},
|
|
429
|
+
opt2: {
|
|
430
|
+
keys: keys2,
|
|
431
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
432
|
+
rows: rows2
|
|
433
|
+
},
|
|
434
|
+
opt3: {
|
|
435
|
+
keys: keys2,
|
|
436
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
437
|
+
rows: rows2,
|
|
438
|
+
kpHead: {
|
|
439
|
+
id: "主鍵",
|
|
440
|
+
mappingId: "所屬主鍵",
|
|
441
|
+
order: "順序",
|
|
442
|
+
make: "Ecirp",
|
|
443
|
+
model: "Ledom",
|
|
444
|
+
price: "Ecirp",
|
|
445
|
+
isActive: "有效"
|
|
446
|
+
}
|
|
447
|
+
},
|
|
448
|
+
opt4: {
|
|
449
|
+
keys: keys2,
|
|
450
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
451
|
+
rows: rows2,
|
|
452
|
+
beforeAddRow: function(newRow) {
|
|
453
|
+
newRow.id = "id-random-" + Math.random();
|
|
454
|
+
return newRow;
|
|
455
|
+
}
|
|
456
|
+
},
|
|
457
|
+
opt5: {
|
|
458
|
+
keys: keys2,
|
|
459
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
460
|
+
rows: rows2,
|
|
461
|
+
kpConvertKeysWhenUploadData: {
|
|
462
|
+
makeTemp: "make",
|
|
463
|
+
modelTemp: "model",
|
|
464
|
+
priceTemp: "price"
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
opt6: {
|
|
468
|
+
keys: keys2,
|
|
469
|
+
rows: rows2,
|
|
470
|
+
optForUploadData: {
|
|
471
|
+
//input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
|
|
472
|
+
beforeUpload: null,
|
|
473
|
+
parseSheetInd: 1 //取第2個sheet, 預設0(取第1個sheet)
|
|
474
|
+
}
|
|
475
|
+
},
|
|
476
|
+
opt7: {
|
|
477
|
+
keys: keys3,
|
|
478
|
+
kpHeadFilterType: kpHeadFilterType3,
|
|
479
|
+
rows: rows3,
|
|
480
|
+
modifyDataWhenSave: function(rows) {
|
|
481
|
+
console.log("modifyDataWhenSave", rows);
|
|
482
|
+
for (let k = 0; k < rows.length; k++) {
|
|
483
|
+
let v = rows[k];
|
|
484
|
+
v.id = "id-random-" + Math.random();
|
|
485
|
+
v.mappingId = "auto_car_table";
|
|
486
|
+
v.order = k;
|
|
487
|
+
v.isActive = "y";
|
|
488
|
+
}
|
|
489
|
+
return rows;
|
|
490
|
+
}
|
|
491
|
+
},
|
|
492
|
+
opt8: {
|
|
493
|
+
keys: keys1,
|
|
494
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
495
|
+
rows: rows1,
|
|
496
|
+
kpCellFormat: {
|
|
497
|
+
//格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
|
|
498
|
+
make: function(value, key, row, params) {
|
|
499
|
+
//空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
|
|
500
|
+
if (value === null || value === undefined || value === "") {
|
|
501
|
+
return null;
|
|
502
|
+
}
|
|
503
|
+
return String(value).toUpperCase();
|
|
504
|
+
},
|
|
505
|
+
price: function(value, key, row, params) {
|
|
506
|
+
//空值不可直接Number(), 否則''與null會變成0.00
|
|
507
|
+
if (value === null || value === undefined || value === "") {
|
|
508
|
+
return null;
|
|
509
|
+
}
|
|
510
|
+
return Number(value).toLocaleString("en-US", {
|
|
511
|
+
minimumFractionDigits: 2,
|
|
512
|
+
maximumFractionDigits: 2
|
|
513
|
+
});
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
},
|
|
517
|
+
opt9: {
|
|
518
|
+
keys: keys1,
|
|
519
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
520
|
+
rows: rows1,
|
|
521
|
+
optForUploadData: {
|
|
522
|
+
uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
|
|
523
|
+
}
|
|
524
|
+
},
|
|
525
|
+
opt10: {
|
|
526
|
+
keys: keys1,
|
|
527
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
528
|
+
kpHead: {
|
|
529
|
+
//表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
|
|
530
|
+
make: "製造商",
|
|
531
|
+
model: "型號",
|
|
532
|
+
price: "價格"
|
|
533
|
+
},
|
|
534
|
+
kpConvertKeysWhenUploadData: {
|
|
535
|
+
//kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
|
|
536
|
+
製造商: "make",
|
|
537
|
+
型號: "model",
|
|
538
|
+
價格: "price"
|
|
539
|
+
},
|
|
540
|
+
rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
actions: []
|
|
544
|
+
};
|
|
545
|
+
},
|
|
546
|
+
mounted: function() {
|
|
547
|
+
return {};
|
|
548
|
+
},
|
|
549
|
+
computed: {},
|
|
550
|
+
methods: {
|
|
551
|
+
evSuccess: function(msg) {
|
|
552
|
+
console.log("evSuccess:", msg);
|
|
553
|
+
},
|
|
554
|
+
evError: function(msg) {
|
|
555
|
+
console.log("evError:", msg);
|
|
556
|
+
},
|
|
557
|
+
saveData: function() {
|
|
558
|
+
let data = this.$refs.table.save();
|
|
559
|
+
document.querySelector("#disp-save-data").innerHTML = JSON.stringify(
|
|
560
|
+
data,
|
|
561
|
+
null,
|
|
562
|
+
2
|
|
563
|
+
);
|
|
564
|
+
console.log("saveData:", data);
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
});
|
|
568
|
+
</script>
|
|
569
|
+
</body>
|
|
570
|
+
</html>
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
/>
|
|
44
44
|
|
|
45
45
|
<!-- w-table-vue -->
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -522,6 +522,23 @@
|
|
|
522
522
|
optForUploadData: {
|
|
523
523
|
uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
|
|
524
524
|
}
|
|
525
|
+
},
|
|
526
|
+
opt10: {
|
|
527
|
+
keys: keys1,
|
|
528
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
529
|
+
kpHead: {
|
|
530
|
+
//表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
|
|
531
|
+
make: "製造商",
|
|
532
|
+
model: "型號",
|
|
533
|
+
price: "價格"
|
|
534
|
+
},
|
|
535
|
+
kpConvertKeysWhenUploadData: {
|
|
536
|
+
//kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
|
|
537
|
+
製造商: "make",
|
|
538
|
+
型號: "model",
|
|
539
|
+
價格: "price"
|
|
540
|
+
},
|
|
541
|
+
rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
|
|
525
542
|
}
|
|
526
543
|
},
|
|
527
544
|
actions: []
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
/>
|
|
44
44
|
|
|
45
45
|
<!-- w-table-vue -->
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -528,6 +528,23 @@
|
|
|
528
528
|
optForUploadData: {
|
|
529
529
|
uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
|
|
530
530
|
}
|
|
531
|
+
},
|
|
532
|
+
opt10: {
|
|
533
|
+
keys: keys1,
|
|
534
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
535
|
+
kpHead: {
|
|
536
|
+
//表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
|
|
537
|
+
make: "製造商",
|
|
538
|
+
model: "型號",
|
|
539
|
+
price: "價格"
|
|
540
|
+
},
|
|
541
|
+
kpConvertKeysWhenUploadData: {
|
|
542
|
+
//kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
|
|
543
|
+
製造商: "make",
|
|
544
|
+
型號: "model",
|
|
545
|
+
價格: "price"
|
|
546
|
+
},
|
|
547
|
+
rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
|
|
531
548
|
}
|
|
532
549
|
},
|
|
533
550
|
actions: []
|
package/docs/examples/w-table-edit_editable_language_textLabelDataName_textPlaceholderDataName.html
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
/>
|
|
44
44
|
|
|
45
45
|
<!-- w-table-vue -->
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -523,6 +523,23 @@
|
|
|
523
523
|
optForUploadData: {
|
|
524
524
|
uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
|
|
525
525
|
}
|
|
526
|
+
},
|
|
527
|
+
opt10: {
|
|
528
|
+
keys: keys1,
|
|
529
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
530
|
+
kpHead: {
|
|
531
|
+
//表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
|
|
532
|
+
make: "製造商",
|
|
533
|
+
model: "型號",
|
|
534
|
+
price: "價格"
|
|
535
|
+
},
|
|
536
|
+
kpConvertKeysWhenUploadData: {
|
|
537
|
+
//kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
|
|
538
|
+
製造商: "make",
|
|
539
|
+
型號: "model",
|
|
540
|
+
價格: "price"
|
|
541
|
+
},
|
|
542
|
+
rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
|
|
526
543
|
}
|
|
527
544
|
},
|
|
528
545
|
actions: []
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
/>
|
|
44
44
|
|
|
45
45
|
<!-- w-table-vue -->
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -517,6 +517,23 @@
|
|
|
517
517
|
optForUploadData: {
|
|
518
518
|
uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
|
|
519
519
|
}
|
|
520
|
+
},
|
|
521
|
+
opt10: {
|
|
522
|
+
keys: keys1,
|
|
523
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
524
|
+
kpHead: {
|
|
525
|
+
//表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
|
|
526
|
+
make: "製造商",
|
|
527
|
+
model: "型號",
|
|
528
|
+
price: "價格"
|
|
529
|
+
},
|
|
530
|
+
kpConvertKeysWhenUploadData: {
|
|
531
|
+
//kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
|
|
532
|
+
製造商: "make",
|
|
533
|
+
型號: "model",
|
|
534
|
+
價格: "price"
|
|
535
|
+
},
|
|
536
|
+
rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
|
|
520
537
|
}
|
|
521
538
|
},
|
|
522
539
|
actions: []
|