w-table-vue 1.0.11 → 1.0.13

package/docs/examples/w-table-edit_slot cell-render.html

@@ -0,0 +1,530 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-table-vue</title>
+
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+
+    <!-- w-table-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.13/dist/w-table-vue.umd.js"></script>
+
+    <style>
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .head1 {
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bkh {
+    /* 寬 */
+    padding: 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkh {
+      padding: 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkh {
+      padding: 5px;
+    }
+  }
+  .bk {
+    /* 寬 */
+    display: inline-block;
+    vertical-align: top;
+    padding: 0px 80px 60px 0px;
+  }
+  @media screen and (max-width: 1000px) {
+    /* 中窄 */
+    .bk {
+      display: block;
+      padding: 0px 0px 50px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <div id="app" class="bkh" style>
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-table-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-table-edit</span>
+        </div>
+        <div class="bk">
+            <div class="item">slot cell-render</div>
+
+            <w-table-edit
+                style="width:600px; height:400px;"
+                :name="WTableEdit.name"
+                :description="WTableEdit.description"
+                :opt="WTableEdit.opt1"
+                @success="evSuccess"
+                @error="evError"
+            >
+                <template v-slot:cell-render="props">
+                    <span
+                        style="color:#aaa;"
+                        v-if="props.key==='make'"
+                    >{{ props.value }}</span>
+                    <span
+                        style="color:#2c6;"
+                        v-else-if="props.key==='model'"
+                    >{{ props.value }}</span>
+                    <span
+                        style="color:#f26;"
+                        v-else-if="props.key==='price'"
+                    >{{ props.value }}</span>
+                    <span style="color:#aaa;" v-else>{{ props.value }}</span>
+                </template>
+            </w-table-edit>
+        </div>
+    </div>
+
+    <script>
+  //install
+  Vue.use(window["w-table-vue"]);
+
+  //initialize
+  new Vue({
+    el: "#app",
+
+    data: function() {
+      let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
+      let rows1 = [
+        { make: "Toyota", model: "Celica", price: 35000 },
+        { make: "Ford", model: "Mondeo", price: 32000 },
+        { make: "Porsche", model: "Boxter", price: 72000 },
+        { make: "BMW", model: "Sedan", price: 66000 },
+        { make: "Nissan", model: "March", price: 61000 },
+        { make: "Lexus", model: "RX", price: 56000 },
+        { make: "Audi", model: "A6 Allroad", price: 45000 },
+        { make: "Mazda", model: "MX-5", price: 36000 },
+        { make: "Mercedes-Benz", model: "Cabriolet", price: 86000 },
+        { make: "Volkswagen", model: "Beetle", price: 68000 },
+        { make: "Honda", model: "City", price: 69000 },
+        { make: "Volvo", model: "S60", price: 71000 },
+        { make: "Subaru", model: "BRZ", price: 48000 }
+      ];
+      let keys2 = [
+        "id",
+        "mappingId",
+        "order",
+        "make",
+        "model",
+        "price",
+        "isActive"
+      ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
+      let rows2 = [
+        {
+          id: "id-Toyota",
+          mappingId: "car_table",
+          order: 0,
+          make: "Toyota",
+          model: "Celica",
+          price: 35000,
+          isActive: "y"
+        },
+        {
+          id: "id-Ford",
+          mappingId: "car_table",
+          order: 1,
+          make: "Ford",
+          model: "Mondeo",
+          price: 32000,
+          isActive: "y"
+        },
+        {
+          id: "id-Porsche",
+          mappingId: "car_table",
+          order: 2,
+          make: "Porsche",
+          model: "Boxter",
+          price: 72000,
+          isActive: "y"
+        },
+        {
+          id: "id-BMW",
+          mappingId: "car_table",
+          order: 11,
+          make: "BMW",
+          model: "Sedan",
+          price: 66000,
+          isActive: "y"
+        },
+        {
+          id: "id-Nissan",
+          mappingId: "car_table",
+          order: 8,
+          make: "Nissan",
+          model: "March",
+          price: 61000,
+          isActive: "y"
+        },
+        {
+          id: "id-Lexus",
+          mappingId: "car_table",
+          order: 4,
+          make: "Lexus",
+          model: "RX",
+          price: 56000,
+          isActive: "y"
+        },
+        {
+          id: "id-Audi",
+          mappingId: "car_table",
+          order: 5,
+          make: "Audi",
+          model: "A6 Allroad",
+          price: 45000,
+          isActive: "y"
+        },
+        {
+          id: "id-Mazda",
+          mappingId: "car_table",
+          order: 6,
+          make: "Mazda",
+          model: "MX-5",
+          price: 36000,
+          isActive: "y"
+        },
+        {
+          id: "id-Mercedes",
+          mappingId: "car_table",
+          order: 7,
+          make: "Mercedes-Benz",
+          model: "Cabriolet",
+          price: 86000,
+          isActive: "y"
+        },
+        {
+          id: "id-Volkswagen",
+          mappingId: "car_table",
+          order: 9,
+          make: "Volkswagen",
+          model: "Beetle",
+          price: 68000,
+          isActive: "y"
+        },
+        {
+          id: "id-Honda",
+          mappingId: "car_table",
+          order: 10,
+          make: "Honda",
+          model: "City",
+          price: 69000,
+          isActive: "y"
+        },
+        {
+          id: "id-Volvo",
+          mappingId: "car_table",
+          order: 12,
+          make: "Volvo",
+          model: "S60",
+          price: 71000,
+          isActive: "y"
+        },
+        {
+          id: "id-Subaru",
+          mappingId: "car_table",
+          order: 3,
+          make: "Subaru",
+          model: "BRZ",
+          price: 48000,
+          isActive: "y"
+        }
+      ];
+      let keys3 = [
+        "id",
+        "mappingId",
+        "order",
+        "make",
+        "model",
+        "price",
+        "isActive"
+      ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
+      let rows3 = [
+        {
+          id: "",
+          mappingId: "",
+          order: 0,
+          make: "Toyota",
+          model: "Celica",
+          price: 35000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 1,
+          make: "Ford",
+          model: "Mondeo",
+          price: 32000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 2,
+          make: "Porsche",
+          model: "Boxter",
+          price: 72000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 11,
+          make: "BMW",
+          model: "Sedan",
+          price: 66000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 8,
+          make: "Nissan",
+          model: "March",
+          price: 61000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 4,
+          make: "Lexus",
+          model: "RX",
+          price: 56000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 5,
+          make: "Audi",
+          model: "A6 Allroad",
+          price: 45000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 6,
+          make: "Mazda",
+          model: "MX-5",
+          price: 36000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 7,
+          make: "Mercedes-Benz",
+          model: "Cabriolet",
+          price: 86000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 9,
+          make: "Volkswagen",
+          model: "Beetle",
+          price: 68000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 10,
+          make: "Honda",
+          model: "City",
+          price: 69000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 12,
+          make: "Volvo",
+          model: "S60",
+          price: 71000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 3,
+          make: "Subaru",
+          model: "BRZ",
+          price: 48000
+        }
+      ];
+      return {
+        WTableEdit: {
+          name: "Car Price",
+          description:
+            "The relationship between different car types and prices",
+          opt1: {
+            keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
+            rows: rows1
+          },
+          opt2: {
+            keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
+            rows: rows2
+          },
+          opt3: {
+            keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
+            rows: rows2,
+            kpHead: {
+              id: "主鍵",
+              mappingId: "所屬主鍵",
+              order: "順序",
+              make: "Ecirp",
+              model: "Ledom",
+              price: "Ecirp",
+              isActive: "有效"
+            }
+          },
+          opt4: {
+            keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
+            rows: rows2,
+            beforeAddRow: function(newRow) {
+              newRow.id = "id-random-" + Math.random();
+              return newRow;
+            }
+          },
+          opt5: {
+            keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
+            rows: rows2,
+            kpConvertKeysWhenUploadData: {
+              makeTemp: "make",
+              modelTemp: "model",
+              priceTemp: "price"
+            }
+          },
+          opt6: {
+            keys: keys2,
+            rows: rows2,
+            optForUploadData: {
+              //input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
+              beforeUpload: null,
+              parseSheetInd: 1 //取第2個sheet, 預設0(取第1個sheet)
+            }
+          },
+          opt7: {
+            keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
+            rows: rows3,
+            modifyDataWhenSave: function(rows) {
+              console.log("modifyDataWhenSave", rows);
+              for (let k = 0; k < rows.length; k++) {
+                let v = rows[k];
+                v.id = "id-random-" + Math.random();
+                v.mappingId = "auto_car_table";
+                v.order = k;
+                v.isActive = "y";
+              }
+              return rows;
+            }
+          }
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {
+      evSuccess: function(msg) {
+        console.log("evSuccess:", msg);
+      },
+      evError: function(msg) {
+        console.log("evError:", msg);
+      },
+      saveData: function() {
+        let data = this.$refs.table.save();
+        document.querySelector("#disp-save-data").innerHTML = JSON.stringify(
+          data,
+          null,
+          2
+        );
+        console.log("saveData:", data);
+      }
+    }
+  });
+    </script>
+</body>
+</html>