提交树形组件,但是逻辑和结构不合适,重构

2026-07-01 18:42:47 +08:00 · 2021-04-07 23:04:08 +08:00
parent f15b3a8b4f
commit 2fb658d085
4 changed files with 265 additions and 18 deletions
--- a/app/model/Post.php
+++ b/app/model/Post.php
@@ -6,6 +6,7 @@ namespace app\model;

 use think\facade\App;
 use think\facade\Cache;
+use think\facade\View;
 use think\Model;
 use think\model\concern\SoftDelete;

@@ -157,7 +158,7 @@ class Post extends Model
      return '';
    }

-    return file_get_contents($file_path);
+    return View::fetch($file_path);
  }

  public static function quickSelect($clear = false)
@@ -179,15 +180,15 @@ class Post extends Model
    return $list_post;
  }

-  public static function quickFind($id,$clear = false)
+  public static function quickFind($id, $clear = false)
  {
-    $cache_key = 'post_'.$id;
+    $cache_key = 'post_' . $id;

    $model_post = Cache::get($cache_key);

-    if(empty($model_post) || $clear){
+    if (empty($model_post) || $clear) {
      $model_post = Post::find($id);
-      Cache::set($cache_key,$model_post,600);
+      Cache::set($cache_key, $model_post, 600);
    }

    return $model_post;
--- a/demo/tree.html
+++ b/demo/tree.html
@@ -0,0 +1,185 @@
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>静态HTML目录</legend>
+  <div class="layui-field-box">
+    <div>
+      直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式
+      <br>
+      需要自己写出目录收缩逻辑
+    </div>
+    <div class="ul-tree">
+      <div class="ul-tree-item" data-level="0">
+        <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
+        <span class="ul-tree-item-title">读书笔记</span>
+      </div>
+      <div class="ul-tree-item current" data-level="1">
+        <span class="ul-tree-item-title">小说</span>
+      </div>
+      <div class="ul-tree-item" data-level="0">
+        <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
+        <span class="ul-tree-item-title">技术笔记</span>
+      </div>
+      <div class="ul-tree-item" data-level="1">
+        <span class="ul-tree-item-title">Mysql</span>
+      </div>
+      <div class="ul-tree-item" data-level="1">
+        <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
+        <span class="ul-tree-item-title">PHP</span>
+      </div>
+      <div class="ul-tree-item" data-level="2">
+        <span class="ul-tree-item-title">扩展</span>
+      </div>
+      <div class="ul-tree-item" data-level="2">
+        <span class="ul-tree-item-title">框架</span>
+      </div>
+      <div class="ul-tree-item" data-level="2">
+        <span class="ul-tree-item-title">库</span>
+      </div>
+    </div>
+    <div>
+      <pre class="layui-code demo-js"></pre>
+      <script class="demo-js-src">
+        // 需要用以下代码整理缩进
+        $('.ul-tree-item').each(function () {
+          $(this).find('.ul-tree-item-title').css('margin-left', ($(this).data('level') + 1) * 15 + 'px')
+          $(this).find('.ul-tree-item-icon').css('left', ($(this).data('level') + 1) * 15 - 10 + 'px')
+        })
+      </script>
+    </div>
+  </div>
+</fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>动态生成</legend>
+  <div class="layui-field-box">
+    <div>
+      其实在生成目录时,只需要一个简单地上下级关系和正确的level层级,很容易写出收缩逻辑.
+      <br>
+      但是如果不愿意写更多的js逻辑,那么你可以生成一个多层级关系的json,然后把js的逻辑复制走,就像下面的代码一样
+    </div>
+    <div class="ul-tree" id="js-tree">
+
+    </div>
+
+    <div>
+      <pre class="layui-code demo-js"></pre>
+      <script class="demo-js-src">
+        var tree = [
+          {
+            title: '读书笔记',
+            children: [
+              {
+                title: '小说'
+              }
+            ],
+            data: {}
+          },
+          {
+            title: '技术笔记',
+            children: [
+              {
+                title: 'MYSQL',
+              },
+              {
+                title: 'PHP',
+                children: [
+                  {
+                    title: '扩展'
+                  },
+                  {
+                    title: '框架'
+                  },
+                  {
+                    title: '库'
+                  },
+                  {
+                    title: '文档'
+                  },
+                ]
+              }
+            ]
+          }
+        ]
+        function toggleTree(iconItem, isShow) {
+          if (isShow) {
+            $('.ul-tree-item-pkey-' + $(iconItem).closest('.ul-tree-item').data('key')).show()
+          } else {
+            $('.ul-tree-item-pkey-' + $(iconItem).closest('.ul-tree-item').data('key')).hide()
+          }
+          $('.ul-tree-item-pkey-' + $(iconItem).closest('.ul-tree-item').data('key')).each(function () {
+            toggleTree($(this).find('.ul-tree-item-icon'), isShow)
+          })
+
+        }
+        function renderTree(tree, target, level) {
+
+          if (typeof level == 'undefined') {
+            level = 0
+          }
+          tree.forEach(function (treeItem, index) {
+            // console.log(treeItem);
+            var treeHtml = '<div class="ul-tree-item">' +
+              '<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>' +
+              '<span class="ul-tree-item-title"></span>' +
+              '</div>'
+            var treeHtmlDom = $(treeHtml)
+
+            treeItem.key = Math.random().toString(36).slice(-6);
+            treeHtmlDom.data(treeItem)
+            treeHtmlDom.addClass('ul-tree-item-key-' + treeItem.key)
+
+            if (level == 0) {
+              treeHtmlDom.appendTo(target)
+            } else {
+              var pItemKey = 'ul-tree-item-pkey-' + target.data('key')
+              treeHtmlDom.addClass(pItemKey)
+              if ($('.' + pItemKey).length > 0) {
+                treeHtmlDom.insertAfter($('.' + pItemKey).last())
+              } else {
+                treeHtmlDom.insertAfter(target)
+              }
+            }
+
+            treeHtmlDom.find('.ul-tree-item-title').text(treeItem.title)
+
+            treeHtmlDom.find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 'px')
+            treeHtmlDom.find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 10 + 'px')
+
+            treeHtmlDom.click(function (e) {
+
+              if ($(e.target).hasClass('ul-tree-item-icon')) {
+                console.log('点击收缩');
+
+                if ($(e.target).hasClass('layui-icon-triangle-d')) {
+                  // 收缩
+                  $(e.target).removeClass('layui-icon-triangle-d')
+                  $(e.target).addClass('layui-icon-triangle-r')
+                  toggleTree(e.target, false)
+
+
+                } else {
+                  // 展开
+                  $(e.target).addClass('layui-icon-triangle-d')
+                  $(e.target).removeClass('layui-icon-triangle-r')
+                  toggleTree(e.target, true)
+
+                }
+
+              } else {
+                console.log('点击');
+                console.log($(this).data())
+              }
+            })
+            if (typeof treeItem.children != "undefined") {
+              renderTree(treeItem.children, treeHtmlDom, level + 1)
+            } else {
+              treeHtmlDom.find('.ul-tree-item-icon').remove()
+            }
+
+          })
+        }
+
+        renderTree(tree, '#js-tree')
+      </script>
+    </div>
+
+  </div>
+</fieldset>
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -251,6 +251,7 @@
  margin    : 15px;
  text-align: center;
  min-width : 220px;
+
 }

 .ul-photo-poster {
@@ -260,6 +261,7 @@
  background-size    : cover;
  background-position: center;
  margin             : 0 auto;
+  box-shadow         : 1px 1px 3px #999;
 }

 .ul-photo-info {
@@ -313,7 +315,7 @@

 .ul-info-tips {
  padding         : 15px;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.6);
 }

 .ul-card-status {
@@ -484,30 +486,61 @@
  height          : 120px;
  margin          : 5px;
  background-color: #ddd;
-  cursor    : pointer;
-  box-shadow: 0 3px 5px #999;
-  position  : relative;
+  cursor          : pointer;
+  box-shadow      : 0 3px 5px #999;
+  position        : relative;
 }

 .ul-upload-photo-main {
  background-size    : cover;
  background-position: center;
-  width: 100%;
-  height: 100%;
+  width              : 100%;
+  height             : 100%;
 }

 .ul-upload-photo-delete {
-  position: absolute;
-  right   : 5px;
-  top     : 5px;
-  z-index: 999;
-  font-size: 20px;
-  color: #fff;
+  position   : absolute;
+  right      : 5px;
+  top        : 5px;
+  z-index    : 999;
+  font-size  : 20px;
+  color      : #fff;
  text-shadow: 0 0 2px #000;
 }

 .ul-upload-photo-button {
-  background-image: url('img/upload.png');
+  background-image   : url('img/upload.png');
  background-size    : cover;
  background-position: center;
+}
+
+.ul-form-group-title {
+  color        : #999;
+  border-bottom: 1px solid #bbb;
+  padding      : 5px 0;
+  margin-bottom: 15px;
+}
+
+.ul-tree-item {
+  padding         : 8px;
+  background-color: #fbfbfb;
+  position        : relative;
+  border-left     : 3px solid transparent;
+  cursor          : pointer;
+}
+
+.ul-tree-item:hover,
+.ul-tree-item.current {
+  background-color: #9cf;
+  border-color    : #6699CC;
+}
+
+.ul-tree-item-title {
+  margin-left: 15px;
+}
+
+.ul-tree-item-icon {
+  position: absolute;
+  left    : 5px;
+  top     : 10px;
 }
--- a/view/index/index/index.html
+++ b/view/index/index/index.html
@@ -84,8 +84,36 @@
      })
    }
    renderRepeat('body')
+
+    $('.demo-js-src').each(function () {
+      var html = $(this).html();
+      var htmlList = html.split(/[\n]/g);
+      var htmlListNew = []
+      var baseLineBlankNums = -1;
+      htmlList.forEach(function (htmlLine, htmlIndex) {
+        if (htmlIndex == 0 && htmlLine.length == 0) {
+          return true
+        }
+        if (baseLineBlankNums < 0) {
+          var kong = htmlLine.match(/^ */g) //筛选
+          if (kong != null) {
+            baseLineBlankNums = kong[0].length
+          } else {
+            baseLineBlankNums = 0
+          }
+        }
+
+        htmlListNew.push(htmlLine.slice(baseLineBlankNums))
+      });
+
+      $(this).siblings('pre.demo-js').html(htmlListNew.join("\n"))
+    })
    layui.form.render()
    layui.element.render()
+    layui.code({
+      encode: true
+    })
+

  </script>
 </body>