完成数列组件js封装和说明;

public/cdn/js/tree.js

@@ -0,0 +1,279 @@
+function renderUlTree(options) {
+  var defaults = {
+    $: window.$,
+    elem: '',
+    onItemClick: function () {
+      console.log('点击目录项');
+    },
+    onItemToggle: function () {
+      console.log('点击收缩目录');
+    },
+    options: [
+      {
+        type: 'up',
+      },
+      {
+        type: 'down',
+      },
+      {
+        type: 'set',
+      },
+      {
+        type: 'delete',
+      },
+    ],
+    onOptionTrigger: function (type, item, e) {
+      switch (type) {
+        case 'up':
+          tthis.itemMoveUp(item)
+          break;
+        case 'down':
+          tthis.itemMoveDown(item)
+          break;
+        case 'delete':
+          tthis.itemDelete($(item).data('id'))
+          break;
+
+        default:
+          break;
+      }
+
+    },
+    list: []
+  }
+  var tthis = this;
+  var settings = {};
+  settings = $.extend({}, defaults, options);
+
+  $ = settings.$;
+
+  var thisDom = $(settings.elem);
+
+  this.appendItem = function (data) {
+
+    var defaults = {
+      id: 0,
+      pid: 0,
+      title: 0,
+      options: settings.options
+    };
+
+    var itemSetting = $.extend({}, defaults, data);
+
+    settings.list.push(itemSetting);
+    this.initList()
+  }
+
+  this.initList = function () {
+    var list = settings.list;
+
+    for (let initTimes = 0; initTimes < list.length; initTimes++) {
+      list.forEach(item => {
+        var itemFindKey = '.ul-tree-item.item-id-' + item.id;
+
+        if (thisDom.find(itemFindKey).length > 0) {
+          return true;
+        }
+
+        var itemParentFindKey = '.ul-tree-item.item-id-' + item.pid;
+
+        var itemHtml = this.getItemTpl();
+
+        if (item.pid == 0) {
+
+          var itemDom = $(itemHtml).appendTo(settings.elem);
+        } else {
+          var itemDom = $(itemHtml).appendTo($(itemParentFindKey).children('.ul-tree-item-children'))
+        }
+
+        this.initItem(itemDom, item)
+
+      });
+    }
+
+  };
+
+  this.initItem = function (itemDom, item) {
+    itemDom.data(item)
+
+    itemDom.addClass('item-id-' + item.id)
+    itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
+
+
+    itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
+
+    item.options.forEach(option => {
+
+      if (typeof option.type == "undefined") {
+        option.type = 'set';
+      }
+
+      if (typeof option.className == 'undefined') {
+        option.className = 'layui-icon layui-icon-' + option.type;
+      }
+
+      if (typeof option.html == 'undefined') {
+        option.html = '<i class="' + option.className + '"></i>'
+      }
+      var domOption = $(option.html);
+
+      domOption.addClass('ul-tree-item-options-item');
+      domOption.data(option)
+      itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').append(domOption);
+
+    });
+  }
+  this.renderList = function () {
+    thisDom.find('.ul-tree-item').each(function (index, elem) {
+
+      tthis.renderItem(elem)
+    })
+  }
+  this.renderItem = function (itemTree) {
+
+    if ($(itemTree).data('is-rendered') == 1) {
+
+      return true;
+    }
+    $(itemTree).data('is-rendered', 1)
+
+    var parents = $(itemTree).parents('.ul-tree-item')
+
+    var level = parents.length
+    $(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
+    $(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
+
+    if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
+      $(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').hide()
+    } else {
+      $(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').show()
+
+    }
+
+    $(itemTree).children('.ul-tree-item-info').click(function (e) {
+
+      if ($(e.target).hasClass('ul-tree-item-icon')) {
+        var iconItem = e.target
+        if ($(iconItem).hasClass('layui-icon-triangle-d')) {
+          // 收缩
+          $(iconItem).removeClass('layui-icon-triangle-d')
+          $(iconItem).addClass('layui-icon-triangle-r')
+
+          $(itemTree).children('.ul-tree-item-children').hide()
+        } else {
+          // 展开
+          $(iconItem).addClass('layui-icon-triangle-d')
+          $(iconItem).removeClass('layui-icon-triangle-r')
+
+          $(itemTree).children('.ul-tree-item-children').show()
+        }
+
+        settings.onItemToggle(itemTree,e)
+
+      } else {
+        if ($(e.target).closest('.ul-tree-item-options').length > 0) {
+
+          settings.onOptionTrigger($(e.target).data('type'), itemTree, e)
+        } else {
+          settings.onItemClick(itemTree,e)
+
+        }
+
+      }
+    })
+
+
+  }
+
+  this.itemMoveUp = function (item) {
+    $(item).prev().insertAfter(item);
+  }
+  this.itemMoveDown = function (item) {
+    $(item).next().insertBefore(item);
+  }
+  this.itemDelete = function (id) {
+    var itemFindKey = '.ul-tree-item.item-id-' + id;
+    $(itemFindKey).remove();
+
+    var list = settings.list;
+
+    var newList = [];
+
+    list.forEach(data => {
+      if (data.id == id || data.pid == id) {
+        return true;
+      }
+      newList.push(data)
+    });
+    settings.list = list;
+  }
+
+  this.itemUpdate = function (newData) {
+
+    var list = settings.list;
+
+    var newList = [];
+
+    list.forEach(data => {
+      if (data.id == newData.id) {
+        data = $.extend({}, data, newData);
+
+        var itemFindKey = '.ul-tree-item.item-id-' + data.id;
+        var item = $(itemFindKey);
+        tthis.initItem(item, data)
+      }
+      newList.push(data)
+    });
+    settings.list = list;
+  }
+
+  this.getList = function () {
+    var list = settings.list;
+
+    list.forEach((data) => {
+      var itemFindKey = '.ul-tree-item.item-id-' + data.id;
+      var item = $(itemFindKey);
+      data.index = item.index();
+    });
+
+    return list;
+  }
+
+  function itemTpl() {
+    /* 
+      <div class="ul-tree-item">
+        <div class="ul-tree-item-info">
+          <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
+          <span class="ul-tree-item-title">读书笔记</span>
+          <span class="ul-tree-item-options">
+            
+          </span>
+        </div>
+        <div class="ul-tree-item-children">
+          
+        </div>
+      </div>
+    */
+  }
+
+  this.getItemTpl = function () {
+    var string = itemTpl.toString();
+
+    return string.substring(string.indexOf("/*") + 3, string.lastIndexOf("*/"));
+  }
+
+  if (typeof options.list != 'undefined') {
+    resetList(options.list);
+  }
+
+  function resetList(list) {
+    settings.list = [];
+
+    list.forEach(data => {
+      tthis.appendItem(data)
+    });
+  }
+
+  this.renderList()
+
+}