layui-ul/demo/tree.html

<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>