[layui]adjust

ui-javascript · Mar 13, 2020 · 0272cc0 · 0272cc0
1 parent 5cac59b
commit 0272cc0
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 84 deletions.
diff --git a/_misc/layui/treeTable.ejs b/_misc/layui/treeTable.ejs
@@ -4,34 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="icon" href="/favicon.png" type="image/x-icon" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
-    <link href="https://cdn.bootcss.com/tailwindcss/0.7.3/utilities.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css">
     <link rel="/plugins/treeTable/treeTable.css">
+<!--    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css">-->
+    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
+
 
 </head>
 <body>
 
 
-<div id="root" class="p-5"></div>
+<div id="root"></div>
 
-<script>
-  // 用于挂载
-  var mountNode = document.getElementById('root')
-</script>
 
+<!--<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>-->
 <script src="/plugins/layui/layui.js"></script>
-<script>
-  // 自定义模块，这里只需要开放soulTable即可
-  layui.config({
-    base: '/plugins/',   // 模块所在目录
-    version: 'v1.5.2' // 插件版本号
-  }).extend({
-    treeTable: 'treeTable/treeTable',
-  });
-</script>
+<!--<script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script>-->
 
 </body>
 </html>
diff --git a/_misc/layui/treeTable.js b/_misc/layui/treeTable.js
@@ -19,21 +19,18 @@ const data = [
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           },
           {
             "id": "1_1_2",
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           },
           {
             "id": "1_1_3",
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           }
         ]
       },
@@ -48,21 +45,18 @@ const data = [
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           },
           {
             "id": "1_2_2",
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           },
           {
             "id": "1_2_3",
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           }
         ]
       },
@@ -71,7 +65,6 @@ const data = [
         "name": "xxx",
         "state": 0,
         "createTime": "2019/11/18 10:44:00",
-        "children": []
       }
     ]
   },
@@ -92,21 +85,18 @@ const data = [
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           },
           {
             "id": "2_1_2",
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           },
           {
             "id": "2_1_3",
             "name": "xxx",
             "state": 0,
             "createTime": "2019/11/18 10:44:00",
-            "children": []
           }
         ]
       },
@@ -115,14 +105,12 @@ const data = [
         "name": "xxx",
         "state": 0,
         "createTime": "2019/11/18 10:44:00",
-        "children": []
       },
       {
         "id": "2_3",
         "name": "xxx",
         "state": 0,
         "createTime": "2019/11/18 10:44:00",
-        "children": []
       }
     ]
   },
@@ -137,21 +125,18 @@ const data = [
         "name": "xxx",
         "state": 0,
         "createTime": "2019/11/18 10:44:00",
-        "children": []
       },
       {
         "id": "3_2",
         "name": "xxx",
         "state": 0,
         "createTime": "2019/11/18 10:44:00",
-        "children": []
       },
       {
         "id": "3_3",
         "name": "xxx",
         "state": 0,
         "createTime": "2019/11/18 10:44:00",
-        "children": []
       }
     ]
   },
@@ -160,79 +145,191 @@ const data = [
     "name": "xxx",
     "state": 0,
     "createTime": "2019/11/18 10:44:00",
-    "children": []
   },
   {
     "id": "5",
     "name": "xxx",
     "state": 0,
     "createTime": "2019/11/18 10:44:00",
-    "children": []
   }
 ]
 
-function App() {
 
-  useEffect(() => {
 
-    layui.use(['layer', 'util', 'treeTable', 'laytpl'], function () {
-      var $ = layui.jquery;
-      var layer = layui.layer;
-      var util = layui.util;
-      var treeTable = layui.treeTable;
-      var laytpl = layui.laytpl
-
-      // 渲染表格
-      var insTb = treeTable.render({
-        elem: '#myTable',
-        // url: '/mock/treeTable.json',
-        data: data,
-        tree: {
-          // 折叠图标显示在第几列
-          iconIndex: 0,
-          // 自定义id字段的名称
-          idName: 'id',
-          // 自定义标识是否还有子节点的字段名称
-          haveChildName: 'haveChild'
-        },
-        cols: [
-          // {type: 'numbers'},
-          // {type: 'checkbox'},
-          {field: 'id', title: 'ID'},
-          {field: 'name', title: '名称'},
-          {
-            field: 'createTime',
-            title: '创建时间',
-            templet: function (d) {
-              return util.toDateString(d.createTime);
-            },
+const initTree = () => {
+  layui.config({
+    base: '/plugins/',   // 模块所在目录
+    version: 'v1.5.2' // 插件版本号
+  }).extend({
+    treeTable: 'treeTable/treeTable',
+  }).use(['layer', 'util', 'table', 'treeTable', 'laytpl'], function () {
+    var $ = layui.jquery;
+
+    // var layer = layui.layer;
+    var util = layui.util;
+    // var table = layui.table;
+    var treeTable = layui.treeTable;
+    // var laytpl = layui.laytpl
+
+    // 渲染表格
+    var insTb = treeTable.render({
+      elem: '#myTable',
+      // url: '/mock/treeTable.json',
+      data: data,
+      size: 'sm',
+      tree: {
+        // 折叠图标显示在第几列
+        iconIndex: 0,
+        // 自定义id字段的名称
+        idName: 'id',
+        // 自定义标识是否还有子节点的字段名称
+        // haveChildName: 'haveChild',
+        // 自定义箭头风格
+        // arrowType: 'arrow2',
+        // 自定义图标
+        getIcon: (d) => {
+
+          return ''
+          // d是当前行的数据
+          // if (d.children) {
+          //   return '<i class="layui-icon ew-tree-table-arrow" style="visibility: hidden"></i>';
+          // } else {
+          //   return `<i class="layui-icon ew-tree-table-arrow"></i> `
+          // }
+        }
+      },
+      cols: [
+        // { type: 'numbers' },
+        // { type: 'checkbox' },
+        {field: 'id', title: 'ID'},
+        {field: 'name', title: '名称'},
+        {
+          field: 'createTime',
+          title: '创建时间',
+          templet: (d) => {
+            return util.toDateString(d.createTime);
           },
-        ],
-      });
+        },
+      ],
+    });
+
+    insTb.expandAll();
+
+    // table.on('row(test)', (obj) => {
+    //   // 得到当前行元素对象
+    //   console.log(obj.tr)
+    //   // 得到当前行数据
+    //   console.log(obj.data)
+    // });
+
+    treeTable.on('row(myTable)', (obj) => {
+
+      const flag = 'DATA_HAS_APPEND_TABLE'
+      var $tr = obj.tr
+
+      // 判断当前行是否有可供展开的数据
+      const info = $tr.data() || {}
+      if (obj.data && !obj.data.children && info.indent != null) {
+
+        $tr.toggleClass('ew-tree-table-open')
 
-      insTb.expandAll();
+        if ($tr.attr(flag)) {
+          $tr.next('tr').toggleClass('ew-tree-tb-hide')
+          return
+        }
 
-      treeTable.on('row(test)', function(obj) {
-        // 得到当前行元素对象
-        console.log(obj.tr)
-        // 得到当前行数据
-        console.log(obj.data)
-      });
+        // 标记该行已经追加过表格
+        $tr.attr(flag, true)
 
+        const indent = (info.indent + 1) * 21 + 14
+        console.log(obj)
+        // // 得到当前行元素对象
+        // console.log(obj.tr)
+        // // 得到当前行数据
+        // console.log(obj.data)
+
+        $tr.after($(`<tr data-pid="${obj.data.pid}" data-indent="${info.indent}"><td colspan="3" style="padding: 5px;padding-left: ${indent}px;">
+
+<table class="layui-table" lay-even="" lay-skin="row">
+  <colgroup>
+    <col width="150">
+    <col width="150">
+    <col width="200">
+    <col>
+  </colgroup>
+  <thead>
+    <tr>
+      <th>人物</th>
+      <th>民族</th>
+      <th>出场时间</th>
+      <th>格言</th>
+    </tr> 
+  </thead>
+  <tbody>
+    <tr>
+      <td>贤心</td>
+      <td>汉族</td>
+      <td>1989-10-14</td>
+      <td>人生似修行</td>
+    </tr>
+    <tr>
+      <td>张爱玲</td>
+      <td>汉族</td>
+      <td>1920-09-30</td>
+      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
+    </tr>
+    <tr>
+      <td>Helen Keller</td>
+      <td>拉丁美裔</td>
+      <td>1880-06-27</td>
+      <td> Life is either a daring adventure or nothing.</td>
+    </tr>
+    <tr>
+      <td>岳飞</td>
+      <td>汉族</td>
+      <td>1103-北宋崇宁二年</td>
+      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
+    </tr>
+    <tr>
+      <td>孟子</td>
+      <td>华夏族（汉族）</td>
+      <td>公元前-372年</td>
+      <td>猿强，则国强。国强，则猿更强！ </td>
+    </tr>
+  </tbody>
+</table>  
+         
+      </td></tr>`))
+
+      }
 
     });
 
-  }, []);
 
+    // @fix 允许行冒泡, 修复图标文字的点击问题
+    // ew-tree-table-td-single
+    $('[lay-filter="myTable"]').find('.ew-tree-tips,.ew-tree-table-td-single,.ew-tree-pack').click(function () {
+      const $tr = $(this).parents('tr')
+      $tr.click()
+    })
 
-  return (
-    <div>
+  });
+}
 
-      <table id="myTable"></table>
 
+function App() {
+
+  useEffect(() => {
+    initTree()
+  }, []);
+
+  return (
+    <div>
+      <table id="myTable" lay-filter="myTable"></table>
     </div>
   );
+
 }
 
-ReactDOM.render(<App/>, mountNode);
+ReactDOM.render(<App/>, document.getElementById('root'));