w-table-vue 1.0.13 → 1.0.14
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 +26 -1
- package/docs/examples/w-table-edit_editable.html +26 -1
- package/docs/examples/w-table-edit_editable_checkId.html +26 -1
- package/docs/examples/w-table-edit_editable_checkId_opt.modifyDataWhenSave_save(call cmp. method).html +26 -1
- package/docs/examples/w-table-edit_editable_checkId_successMsgFromAddRow_errorMsgFromAddRow.html +26 -1
- package/docs/examples/w-table-edit_editable_inforPaddingStyle_menuBackgroundColor.html +26 -1
- package/docs/examples/w-table-edit_editable_language_checkId_tooltipAddRow.html +26 -1
- package/docs/examples/w-table-edit_editable_language_textLabelDataName_textPlaceholderDataName.html +26 -1
- package/docs/examples/w-table-edit_editable_no enableInfor.html +26 -1
- package/docs/examples/w-table-edit_editable_no enableMenu.html +26 -1
- package/docs/examples/w-table-edit_editable_opt.beforeAddRow.html +26 -1
- package/docs/examples/w-table-edit_editable_opt.kpCellFormat_no useCellFormatWhenDownload.html +543 -0
- package/docs/examples/w-table-edit_editable_opt.kpConvertKeysWhenUploadData.html +26 -1
- package/docs/examples/w-table-edit_editable_opt.optForUploadData.html +26 -1
- package/docs/examples/w-table-edit_editable_slot btns-right.html +26 -1
- package/docs/examples/w-table-edit_fixIds (fix id).html +26 -1
- package/docs/examples/w-table-edit_hideIds (hide mappingId).html +26 -1
- package/docs/examples/w-table-edit_name_description.html +26 -1
- package/docs/examples/w-table-edit_no enableInfor.html +26 -1
- package/docs/examples/w-table-edit_no enableMenu.html +26 -1
- package/docs/examples/w-table-edit_opt.kpCellFormat.html +539 -0
- package/docs/examples/w-table-edit_opt.kpHead.html +26 -1
- package/docs/examples/w-table-edit_removeIdsWhenDownload (remove id, mappingId, order, isActive).html +26 -1
- package/docs/examples/w-table-edit_slot btns-left.html +26 -1
- package/docs/examples/w-table-edit_slot btns-right.html +26 -1
- package/docs/examples/w-table-edit_slot cell-render.html +26 -1
- package/docs/examples/w-table-edit_slot cell-tooltip.html +26 -1
- package/docs/examples/w-table-edit_slot head-render.html +26 -1
- package/docs/examples/w-table-edit_slot head-tooltip.html +26 -1
- package/docs/examples/w-table-edit_slot infor (name_description).html +26 -1
- package/docs/examples/w-table-edit_sortColIds (sort by order).html +26 -1
- package/docs/index.html +1 -1
- package/docs/module-WTableEdit.html +27 -3
- package/package.json +2 -2
- package/src/AppZoneWTableEdit.vue +61 -0
- package/src/components/WTableEdit.vue +12 -5
package/docs/examples/w-table-edit_editable_opt.kpCellFormat_no useCellFormatWhenDownload.html
ADDED
|
@@ -0,0 +1,543 @@
|
|
|
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.14/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 & opt.kpCellFormat & no useCellFormatWhenDownload</div>
|
|
109
|
+
|
|
110
|
+
<w-table-edit
|
|
111
|
+
style="width:600px; height:400px;"
|
|
112
|
+
:name="WTableEdit.name"
|
|
113
|
+
:description="WTableEdit.description"
|
|
114
|
+
:opt="WTableEdit.opt8"
|
|
115
|
+
:editable="true"
|
|
116
|
+
:use-cell-format-when-download="false"
|
|
117
|
+
@success="evSuccess"
|
|
118
|
+
@error="evError"
|
|
119
|
+
></w-table-edit>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<script>
|
|
124
|
+
//install
|
|
125
|
+
Vue.use(window["w-table-vue"]);
|
|
126
|
+
|
|
127
|
+
//initialize
|
|
128
|
+
new Vue({
|
|
129
|
+
el: "#app",
|
|
130
|
+
|
|
131
|
+
data: function() {
|
|
132
|
+
let keys1 = ["make", "model", "price"];
|
|
133
|
+
let kpHeadFilterType1 = {
|
|
134
|
+
//default: num (num,text,time,set)
|
|
135
|
+
make: "text",
|
|
136
|
+
model: "text",
|
|
137
|
+
price: "num"
|
|
138
|
+
};
|
|
139
|
+
let rows1 = [
|
|
140
|
+
{ make: "Toyota", model: "Celica", price: 35000 },
|
|
141
|
+
{ make: "Ford", model: "Mondeo", price: 32000 },
|
|
142
|
+
{ make: "Porsche", model: "Boxter", price: 72000 },
|
|
143
|
+
{ make: "BMW", model: "Sedan", price: 66000 },
|
|
144
|
+
{ make: "Nissan", model: "March", price: 61000 },
|
|
145
|
+
{ make: "Lexus", model: "RX", price: 56000 },
|
|
146
|
+
{ make: "Audi", model: "A6 Allroad", price: 45000 },
|
|
147
|
+
{ make: "Mazda", model: "MX-5", price: 36000 },
|
|
148
|
+
{ make: "Mercedes-Benz", model: "Cabriolet", price: 86000 },
|
|
149
|
+
{ make: "Volkswagen", model: "Beetle", price: 68000 },
|
|
150
|
+
{ make: "Honda", model: "City", price: 69000 },
|
|
151
|
+
{ make: "Volvo", model: "S60", price: 71000 },
|
|
152
|
+
{ make: "Subaru", model: "BRZ", price: 48000 }
|
|
153
|
+
];
|
|
154
|
+
let keys2 = [
|
|
155
|
+
"id",
|
|
156
|
+
"mappingId",
|
|
157
|
+
"order",
|
|
158
|
+
"make",
|
|
159
|
+
"model",
|
|
160
|
+
"price",
|
|
161
|
+
"isActive"
|
|
162
|
+
];
|
|
163
|
+
let kpHeadFilterType2 = {
|
|
164
|
+
//default: num (num,text,time,set)
|
|
165
|
+
id: "text",
|
|
166
|
+
mappingId: "text",
|
|
167
|
+
order: "num",
|
|
168
|
+
make: "text",
|
|
169
|
+
model: "text",
|
|
170
|
+
price: "num",
|
|
171
|
+
isActive: "text"
|
|
172
|
+
};
|
|
173
|
+
let rows2 = [
|
|
174
|
+
{
|
|
175
|
+
id: "id-Toyota",
|
|
176
|
+
mappingId: "car_table",
|
|
177
|
+
order: 0,
|
|
178
|
+
make: "Toyota",
|
|
179
|
+
model: "Celica",
|
|
180
|
+
price: 35000,
|
|
181
|
+
isActive: "y"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
id: "id-Ford",
|
|
185
|
+
mappingId: "car_table",
|
|
186
|
+
order: 1,
|
|
187
|
+
make: "Ford",
|
|
188
|
+
model: "Mondeo",
|
|
189
|
+
price: 32000,
|
|
190
|
+
isActive: "y"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
id: "id-Porsche",
|
|
194
|
+
mappingId: "car_table",
|
|
195
|
+
order: 2,
|
|
196
|
+
make: "Porsche",
|
|
197
|
+
model: "Boxter",
|
|
198
|
+
price: 72000,
|
|
199
|
+
isActive: "y"
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
id: "id-BMW",
|
|
203
|
+
mappingId: "car_table",
|
|
204
|
+
order: 11,
|
|
205
|
+
make: "BMW",
|
|
206
|
+
model: "Sedan",
|
|
207
|
+
price: 66000,
|
|
208
|
+
isActive: "y"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
id: "id-Nissan",
|
|
212
|
+
mappingId: "car_table",
|
|
213
|
+
order: 8,
|
|
214
|
+
make: "Nissan",
|
|
215
|
+
model: "March",
|
|
216
|
+
price: 61000,
|
|
217
|
+
isActive: "y"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
id: "id-Lexus",
|
|
221
|
+
mappingId: "car_table",
|
|
222
|
+
order: 4,
|
|
223
|
+
make: "Lexus",
|
|
224
|
+
model: "RX",
|
|
225
|
+
price: 56000,
|
|
226
|
+
isActive: "y"
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
id: "id-Audi",
|
|
230
|
+
mappingId: "car_table",
|
|
231
|
+
order: 5,
|
|
232
|
+
make: "Audi",
|
|
233
|
+
model: "A6 Allroad",
|
|
234
|
+
price: 45000,
|
|
235
|
+
isActive: "y"
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
id: "id-Mazda",
|
|
239
|
+
mappingId: "car_table",
|
|
240
|
+
order: 6,
|
|
241
|
+
make: "Mazda",
|
|
242
|
+
model: "MX-5",
|
|
243
|
+
price: 36000,
|
|
244
|
+
isActive: "y"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
id: "id-Mercedes",
|
|
248
|
+
mappingId: "car_table",
|
|
249
|
+
order: 7,
|
|
250
|
+
make: "Mercedes-Benz",
|
|
251
|
+
model: "Cabriolet",
|
|
252
|
+
price: 86000,
|
|
253
|
+
isActive: "y"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
id: "id-Volkswagen",
|
|
257
|
+
mappingId: "car_table",
|
|
258
|
+
order: 9,
|
|
259
|
+
make: "Volkswagen",
|
|
260
|
+
model: "Beetle",
|
|
261
|
+
price: 68000,
|
|
262
|
+
isActive: "y"
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
id: "id-Honda",
|
|
266
|
+
mappingId: "car_table",
|
|
267
|
+
order: 10,
|
|
268
|
+
make: "Honda",
|
|
269
|
+
model: "City",
|
|
270
|
+
price: 69000,
|
|
271
|
+
isActive: "y"
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
id: "id-Volvo",
|
|
275
|
+
mappingId: "car_table",
|
|
276
|
+
order: 12,
|
|
277
|
+
make: "Volvo",
|
|
278
|
+
model: "S60",
|
|
279
|
+
price: 71000,
|
|
280
|
+
isActive: "y"
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
id: "id-Subaru",
|
|
284
|
+
mappingId: "car_table",
|
|
285
|
+
order: 3,
|
|
286
|
+
make: "Subaru",
|
|
287
|
+
model: "BRZ",
|
|
288
|
+
price: 48000,
|
|
289
|
+
isActive: "y"
|
|
290
|
+
}
|
|
291
|
+
];
|
|
292
|
+
let keys3 = [
|
|
293
|
+
"id",
|
|
294
|
+
"mappingId",
|
|
295
|
+
"order",
|
|
296
|
+
"make",
|
|
297
|
+
"model",
|
|
298
|
+
"price",
|
|
299
|
+
"isActive"
|
|
300
|
+
];
|
|
301
|
+
let kpHeadFilterType3 = {
|
|
302
|
+
//default: num (num,text,time,set)
|
|
303
|
+
id: "text",
|
|
304
|
+
mappingId: "text",
|
|
305
|
+
order: "num",
|
|
306
|
+
make: "text",
|
|
307
|
+
model: "text",
|
|
308
|
+
price: "num",
|
|
309
|
+
isActive: "text"
|
|
310
|
+
};
|
|
311
|
+
let rows3 = [
|
|
312
|
+
{
|
|
313
|
+
id: "",
|
|
314
|
+
mappingId: "",
|
|
315
|
+
order: 0,
|
|
316
|
+
make: "Toyota",
|
|
317
|
+
model: "Celica",
|
|
318
|
+
price: 35000
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
id: "",
|
|
322
|
+
mappingId: "",
|
|
323
|
+
order: 1,
|
|
324
|
+
make: "Ford",
|
|
325
|
+
model: "Mondeo",
|
|
326
|
+
price: 32000
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
id: "",
|
|
330
|
+
mappingId: "",
|
|
331
|
+
order: 2,
|
|
332
|
+
make: "Porsche",
|
|
333
|
+
model: "Boxter",
|
|
334
|
+
price: 72000
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
id: "",
|
|
338
|
+
mappingId: "",
|
|
339
|
+
order: 11,
|
|
340
|
+
make: "BMW",
|
|
341
|
+
model: "Sedan",
|
|
342
|
+
price: 66000
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
id: "",
|
|
346
|
+
mappingId: "",
|
|
347
|
+
order: 8,
|
|
348
|
+
make: "Nissan",
|
|
349
|
+
model: "March",
|
|
350
|
+
price: 61000
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
id: "",
|
|
354
|
+
mappingId: "",
|
|
355
|
+
order: 4,
|
|
356
|
+
make: "Lexus",
|
|
357
|
+
model: "RX",
|
|
358
|
+
price: 56000
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
id: "",
|
|
362
|
+
mappingId: "",
|
|
363
|
+
order: 5,
|
|
364
|
+
make: "Audi",
|
|
365
|
+
model: "A6 Allroad",
|
|
366
|
+
price: 45000
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
id: "",
|
|
370
|
+
mappingId: "",
|
|
371
|
+
order: 6,
|
|
372
|
+
make: "Mazda",
|
|
373
|
+
model: "MX-5",
|
|
374
|
+
price: 36000
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
id: "",
|
|
378
|
+
mappingId: "",
|
|
379
|
+
order: 7,
|
|
380
|
+
make: "Mercedes-Benz",
|
|
381
|
+
model: "Cabriolet",
|
|
382
|
+
price: 86000
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
id: "",
|
|
386
|
+
mappingId: "",
|
|
387
|
+
order: 9,
|
|
388
|
+
make: "Volkswagen",
|
|
389
|
+
model: "Beetle",
|
|
390
|
+
price: 68000
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
id: "",
|
|
394
|
+
mappingId: "",
|
|
395
|
+
order: 10,
|
|
396
|
+
make: "Honda",
|
|
397
|
+
model: "City",
|
|
398
|
+
price: 69000
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
id: "",
|
|
402
|
+
mappingId: "",
|
|
403
|
+
order: 12,
|
|
404
|
+
make: "Volvo",
|
|
405
|
+
model: "S60",
|
|
406
|
+
price: 71000
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
id: "",
|
|
410
|
+
mappingId: "",
|
|
411
|
+
order: 3,
|
|
412
|
+
make: "Subaru",
|
|
413
|
+
model: "BRZ",
|
|
414
|
+
price: 48000
|
|
415
|
+
}
|
|
416
|
+
];
|
|
417
|
+
return {
|
|
418
|
+
WTableEdit: {
|
|
419
|
+
name: "Car Price",
|
|
420
|
+
description:
|
|
421
|
+
"The relationship between different car types and prices",
|
|
422
|
+
opt1: {
|
|
423
|
+
keys: keys1,
|
|
424
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
425
|
+
rows: rows1
|
|
426
|
+
},
|
|
427
|
+
opt2: {
|
|
428
|
+
keys: keys2,
|
|
429
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
430
|
+
rows: rows2
|
|
431
|
+
},
|
|
432
|
+
opt3: {
|
|
433
|
+
keys: keys2,
|
|
434
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
435
|
+
rows: rows2,
|
|
436
|
+
kpHead: {
|
|
437
|
+
id: "主鍵",
|
|
438
|
+
mappingId: "所屬主鍵",
|
|
439
|
+
order: "順序",
|
|
440
|
+
make: "Ecirp",
|
|
441
|
+
model: "Ledom",
|
|
442
|
+
price: "Ecirp",
|
|
443
|
+
isActive: "有效"
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
opt4: {
|
|
447
|
+
keys: keys2,
|
|
448
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
449
|
+
rows: rows2,
|
|
450
|
+
beforeAddRow: function(newRow) {
|
|
451
|
+
newRow.id = "id-random-" + Math.random();
|
|
452
|
+
return newRow;
|
|
453
|
+
}
|
|
454
|
+
},
|
|
455
|
+
opt5: {
|
|
456
|
+
keys: keys2,
|
|
457
|
+
kpHeadFilterType: kpHeadFilterType2,
|
|
458
|
+
rows: rows2,
|
|
459
|
+
kpConvertKeysWhenUploadData: {
|
|
460
|
+
makeTemp: "make",
|
|
461
|
+
modelTemp: "model",
|
|
462
|
+
priceTemp: "price"
|
|
463
|
+
}
|
|
464
|
+
},
|
|
465
|
+
opt6: {
|
|
466
|
+
keys: keys2,
|
|
467
|
+
rows: rows2,
|
|
468
|
+
optForUploadData: {
|
|
469
|
+
//input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
|
|
470
|
+
beforeUpload: null,
|
|
471
|
+
parseSheetInd: 1 //取第2個sheet, 預設0(取第1個sheet)
|
|
472
|
+
}
|
|
473
|
+
},
|
|
474
|
+
opt7: {
|
|
475
|
+
keys: keys3,
|
|
476
|
+
kpHeadFilterType: kpHeadFilterType3,
|
|
477
|
+
rows: rows3,
|
|
478
|
+
modifyDataWhenSave: function(rows) {
|
|
479
|
+
console.log("modifyDataWhenSave", rows);
|
|
480
|
+
for (let k = 0; k < rows.length; k++) {
|
|
481
|
+
let v = rows[k];
|
|
482
|
+
v.id = "id-random-" + Math.random();
|
|
483
|
+
v.mappingId = "auto_car_table";
|
|
484
|
+
v.order = k;
|
|
485
|
+
v.isActive = "y";
|
|
486
|
+
}
|
|
487
|
+
return rows;
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
opt8: {
|
|
491
|
+
keys: keys1,
|
|
492
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
493
|
+
rows: rows1,
|
|
494
|
+
kpCellFormat: {
|
|
495
|
+
//格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
|
|
496
|
+
make: function(value, key, row, params) {
|
|
497
|
+
//空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
|
|
498
|
+
if (value === null || value === undefined || value === "") {
|
|
499
|
+
return null;
|
|
500
|
+
}
|
|
501
|
+
return String(value).toUpperCase();
|
|
502
|
+
},
|
|
503
|
+
price: function(value, key, row, params) {
|
|
504
|
+
//空值不可直接Number(), 否則''與null會變成0.00
|
|
505
|
+
if (value === null || value === undefined || value === "") {
|
|
506
|
+
return null;
|
|
507
|
+
}
|
|
508
|
+
return Number(value).toLocaleString("en-US", {
|
|
509
|
+
minimumFractionDigits: 2,
|
|
510
|
+
maximumFractionDigits: 2
|
|
511
|
+
});
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
},
|
|
516
|
+
actions: []
|
|
517
|
+
};
|
|
518
|
+
},
|
|
519
|
+
mounted: function() {
|
|
520
|
+
return {};
|
|
521
|
+
},
|
|
522
|
+
computed: {},
|
|
523
|
+
methods: {
|
|
524
|
+
evSuccess: function(msg) {
|
|
525
|
+
console.log("evSuccess:", msg);
|
|
526
|
+
},
|
|
527
|
+
evError: function(msg) {
|
|
528
|
+
console.log("evError:", msg);
|
|
529
|
+
},
|
|
530
|
+
saveData: function() {
|
|
531
|
+
let data = this.$refs.table.save();
|
|
532
|
+
document.querySelector("#disp-save-data").innerHTML = JSON.stringify(
|
|
533
|
+
data,
|
|
534
|
+
null,
|
|
535
|
+
2
|
|
536
|
+
);
|
|
537
|
+
console.log("saveData:", data);
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
});
|
|
541
|
+
</script>
|
|
542
|
+
</body>
|
|
543
|
+
</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.14/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -483,6 +483,31 @@
|
|
|
483
483
|
}
|
|
484
484
|
return rows;
|
|
485
485
|
}
|
|
486
|
+
},
|
|
487
|
+
opt8: {
|
|
488
|
+
keys: keys1,
|
|
489
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
490
|
+
rows: rows1,
|
|
491
|
+
kpCellFormat: {
|
|
492
|
+
//格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
|
|
493
|
+
make: function(value, key, row, params) {
|
|
494
|
+
//空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
|
|
495
|
+
if (value === null || value === undefined || value === "") {
|
|
496
|
+
return null;
|
|
497
|
+
}
|
|
498
|
+
return String(value).toUpperCase();
|
|
499
|
+
},
|
|
500
|
+
price: function(value, key, row, params) {
|
|
501
|
+
//空值不可直接Number(), 否則''與null會變成0.00
|
|
502
|
+
if (value === null || value === undefined || value === "") {
|
|
503
|
+
return null;
|
|
504
|
+
}
|
|
505
|
+
return Number(value).toLocaleString("en-US", {
|
|
506
|
+
minimumFractionDigits: 2,
|
|
507
|
+
maximumFractionDigits: 2
|
|
508
|
+
});
|
|
509
|
+
}
|
|
510
|
+
}
|
|
486
511
|
}
|
|
487
512
|
},
|
|
488
513
|
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.14/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -483,6 +483,31 @@
|
|
|
483
483
|
}
|
|
484
484
|
return rows;
|
|
485
485
|
}
|
|
486
|
+
},
|
|
487
|
+
opt8: {
|
|
488
|
+
keys: keys1,
|
|
489
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
490
|
+
rows: rows1,
|
|
491
|
+
kpCellFormat: {
|
|
492
|
+
//格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
|
|
493
|
+
make: function(value, key, row, params) {
|
|
494
|
+
//空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
|
|
495
|
+
if (value === null || value === undefined || value === "") {
|
|
496
|
+
return null;
|
|
497
|
+
}
|
|
498
|
+
return String(value).toUpperCase();
|
|
499
|
+
},
|
|
500
|
+
price: function(value, key, row, params) {
|
|
501
|
+
//空值不可直接Number(), 否則''與null會變成0.00
|
|
502
|
+
if (value === null || value === undefined || value === "") {
|
|
503
|
+
return null;
|
|
504
|
+
}
|
|
505
|
+
return Number(value).toLocaleString("en-US", {
|
|
506
|
+
minimumFractionDigits: 2,
|
|
507
|
+
maximumFractionDigits: 2
|
|
508
|
+
});
|
|
509
|
+
}
|
|
510
|
+
}
|
|
486
511
|
}
|
|
487
512
|
},
|
|
488
513
|
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.14/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -507,6 +507,31 @@
|
|
|
507
507
|
}
|
|
508
508
|
return rows;
|
|
509
509
|
}
|
|
510
|
+
},
|
|
511
|
+
opt8: {
|
|
512
|
+
keys: keys1,
|
|
513
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
514
|
+
rows: rows1,
|
|
515
|
+
kpCellFormat: {
|
|
516
|
+
//格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
|
|
517
|
+
make: function(value, key, row, params) {
|
|
518
|
+
//空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
|
|
519
|
+
if (value === null || value === undefined || value === "") {
|
|
520
|
+
return null;
|
|
521
|
+
}
|
|
522
|
+
return String(value).toUpperCase();
|
|
523
|
+
},
|
|
524
|
+
price: function(value, key, row, params) {
|
|
525
|
+
//空值不可直接Number(), 否則''與null會變成0.00
|
|
526
|
+
if (value === null || value === undefined || value === "") {
|
|
527
|
+
return null;
|
|
528
|
+
}
|
|
529
|
+
return Number(value).toLocaleString("en-US", {
|
|
530
|
+
minimumFractionDigits: 2,
|
|
531
|
+
maximumFractionDigits: 2
|
|
532
|
+
});
|
|
533
|
+
}
|
|
534
|
+
}
|
|
510
535
|
}
|
|
511
536
|
},
|
|
512
537
|
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.14/dist/w-table-vue.umd.js"></script>
|
|
47
47
|
|
|
48
48
|
<style>
|
|
49
49
|
.item {
|
|
@@ -484,6 +484,31 @@
|
|
|
484
484
|
}
|
|
485
485
|
return rows;
|
|
486
486
|
}
|
|
487
|
+
},
|
|
488
|
+
opt8: {
|
|
489
|
+
keys: keys1,
|
|
490
|
+
kpHeadFilterType: kpHeadFilterType1,
|
|
491
|
+
rows: rows1,
|
|
492
|
+
kpCellFormat: {
|
|
493
|
+
//格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
|
|
494
|
+
make: function(value, key, row, params) {
|
|
495
|
+
//空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
|
|
496
|
+
if (value === null || value === undefined || value === "") {
|
|
497
|
+
return null;
|
|
498
|
+
}
|
|
499
|
+
return String(value).toUpperCase();
|
|
500
|
+
},
|
|
501
|
+
price: function(value, key, row, params) {
|
|
502
|
+
//空值不可直接Number(), 否則''與null會變成0.00
|
|
503
|
+
if (value === null || value === undefined || value === "") {
|
|
504
|
+
return null;
|
|
505
|
+
}
|
|
506
|
+
return Number(value).toLocaleString("en-US", {
|
|
507
|
+
minimumFractionDigits: 2,
|
|
508
|
+
maximumFractionDigits: 2
|
|
509
|
+
});
|
|
510
|
+
}
|
|
511
|
+
}
|
|
487
512
|
}
|
|
488
513
|
},
|
|
489
514
|
actions: []
|