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.
Files changed (42) hide show
  1. package/README.md +1 -1
  2. package/dist/w-table-vue.umd.js +3 -3
  3. package/dist/w-table-vue.umd.js.map +1 -1
  4. package/docs/examples/app.html +1 -1
  5. package/docs/examples/app.umd.js +2 -2
  6. package/docs/examples/app.umd.js.map +1 -1
  7. package/docs/examples/w-table-edit_default.html +26 -1
  8. package/docs/examples/w-table-edit_editable.html +26 -1
  9. package/docs/examples/w-table-edit_editable_checkId.html +26 -1
  10. package/docs/examples/w-table-edit_editable_checkId_opt.modifyDataWhenSave_save(call cmp. method).html +26 -1
  11. package/docs/examples/w-table-edit_editable_checkId_successMsgFromAddRow_errorMsgFromAddRow.html +26 -1
  12. package/docs/examples/w-table-edit_editable_inforPaddingStyle_menuBackgroundColor.html +26 -1
  13. package/docs/examples/w-table-edit_editable_language_checkId_tooltipAddRow.html +26 -1
  14. package/docs/examples/w-table-edit_editable_language_textLabelDataName_textPlaceholderDataName.html +26 -1
  15. package/docs/examples/w-table-edit_editable_no enableInfor.html +26 -1
  16. package/docs/examples/w-table-edit_editable_no enableMenu.html +26 -1
  17. package/docs/examples/w-table-edit_editable_opt.beforeAddRow.html +26 -1
  18. package/docs/examples/w-table-edit_editable_opt.kpCellFormat_no useCellFormatWhenDownload.html +543 -0
  19. package/docs/examples/w-table-edit_editable_opt.kpConvertKeysWhenUploadData.html +26 -1
  20. package/docs/examples/w-table-edit_editable_opt.optForUploadData.html +26 -1
  21. package/docs/examples/w-table-edit_editable_slot btns-right.html +26 -1
  22. package/docs/examples/w-table-edit_fixIds (fix id).html +26 -1
  23. package/docs/examples/w-table-edit_hideIds (hide mappingId).html +26 -1
  24. package/docs/examples/w-table-edit_name_description.html +26 -1
  25. package/docs/examples/w-table-edit_no enableInfor.html +26 -1
  26. package/docs/examples/w-table-edit_no enableMenu.html +26 -1
  27. package/docs/examples/w-table-edit_opt.kpCellFormat.html +539 -0
  28. package/docs/examples/w-table-edit_opt.kpHead.html +26 -1
  29. package/docs/examples/w-table-edit_removeIdsWhenDownload (remove id, mappingId, order, isActive).html +26 -1
  30. package/docs/examples/w-table-edit_slot btns-left.html +26 -1
  31. package/docs/examples/w-table-edit_slot btns-right.html +26 -1
  32. package/docs/examples/w-table-edit_slot cell-render.html +26 -1
  33. package/docs/examples/w-table-edit_slot cell-tooltip.html +26 -1
  34. package/docs/examples/w-table-edit_slot head-render.html +26 -1
  35. package/docs/examples/w-table-edit_slot head-tooltip.html +26 -1
  36. package/docs/examples/w-table-edit_slot infor (name_description).html +26 -1
  37. package/docs/examples/w-table-edit_sortColIds (sort by order).html +26 -1
  38. package/docs/index.html +1 -1
  39. package/docs/module-WTableEdit.html +27 -3
  40. package/package.json +2 -2
  41. package/src/AppZoneWTableEdit.vue +61 -0
  42. package/src/components/WTableEdit.vue +12 -5
@@ -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 &amp; opt.kpCellFormat &amp; 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.13/dist/w-table-vue.umd.js"></script>
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.13/dist/w-table-vue.umd.js"></script>
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.13/dist/w-table-vue.umd.js"></script>
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.13/dist/w-table-vue.umd.js"></script>
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: []