javascript 单选、复选树 ---

摘要：项目开发中遇到一颗树单选多选项目中遇到这个功能，与其一个不如自己造个轮子。预览地址设计主要思路展现层树的显示用递归函数罗列出页面显示效果。插件里面维护一个获取当前选中状态的函数返回为单元的数组。为后面操纵数据状态例如是不是选中状态提供方便。

github L6zt

项目中遇到这个功能，与其copy一个不如自己造个轮子。预览地址
设计主要思路:
1.展现层树的显示 用递归函数罗列出页面显示效果。
2.不同的功能对应不用模式model来区分、对应这不同的展示效果（ui交互效果、初始化数据选择形式）
所以采用对应不同的模式分别写出（不同初始渲染状态函数和ui效果交互函数）。感觉这是这样处理比较合适。
3.插件里面维护一个获取当前选中状态的函数返回{id, name} 为单元的数组。
4.id 查询路径函数（findIdDir），所有初始化页面状态逻辑都基于它

// 搜寻回现id中具体的位置，为了定位数据点。为后面操纵数据状态(例如是不是选中状态)提供方便。
假如findIdDir返回数据 1-2 即该节点在 [{},{childs: [{},{id: "xxx", name: "我就是1-2节点"}]},{}]

  const findIdDir = (data, id, dir) => {
    dir = dir ? dir : "";
    /*--||--||--||--*/
    for (let idx = 0, lg = data.length; idx < lg; idx++) {
      if (data[idx].id == id) {
        return dir === "" ? `${idx}` : `${dir}-${idx}`
      }
      if (data[idx].childs) {
        let curDir = `${dir ?  `${dir}-` : ""}${idx}`;
        let result = findIdDir(data[idx].childs, id, curDir);
        if (result) {
          return result
        }
      }
    }
    return undefined
  };

// js 代码

/*
 *  model ---- 0 1 2模式 
 * 0 是单选模式  
 * 1 是回连模式（选择父节点子节联动选中取消，子节点选中联调父节点是否选中） 多选模式 
 * 2 特殊 不回联模式
 *  onchange ----> 选中触发回调
 *  idList: [] -----> 选中节点结合
 */
console.log("init ---- statrt");
(function() {
  const pluginName = "jctree";
  const noop = function() {};
  // 路径函数
  const findIdDir = (data, id, dir) => {
    dir = dir ? dir : "";
    /*--||--||--||--*/
    for (let idx = 0, lg = data.length; idx < lg; idx++) {
      if (data[idx].id == id) {
        return dir === "" ? `${idx}` : `${dir}-${idx}`
      }
      if (data[idx].childs) {
        let curDir = `${dir ?  `${dir}-` : ""}${idx}`;
        let result = findIdDir(data[idx].childs, id, curDir);
        if (result) {
          return result
        }
      }
    }
    return undefined
  };
  const defaultOption = {
    model: 0,
    data: [],
    onchange: noop,
    idList: []
  }
  
  function JcTree(options) {
    this._options = defaultOption;
    if (!options.data || !Array.isArray(options.data)) {
      console.warn("树需要初始化数据data且data应为数组")
    };
    options.data = $.extend(true, [], options.data);
    $.extend(this._options, options || {});
    this.init();
  };
  // 渲染树
  JcTree.prototype.renderTree = function(data, open, index, dir) {
    index = undefined === index ? 0 : index;
    dir = undefined === dir ? "" : dir;
    const nextIndex = index + 1;
    const className = open ? "" : "hide";
    let htmlStr = `
`;
    // data icon-check text-icon del-btn check.svg
    data && data.forEach((d, idx) => {
      let {
        id,
        name,
        childs,
        open,
        leafFlag,
        checked,
        hasChildSelect
      } = d;
      let curDir = dir === "" ? `${idx}` : `${dir}-${idx}`;
      let showToggleBtnFlag = leafFlag;
      htmlStr += `
` +
        (showToggleBtnFlag && childs && childs.length ? `${open ? "-" : "+"}` : "") +
        `` +
        `${name}` +
        `">(下级有选中节点)` +
        `
`;
      if (childs && childs.length > 0) {
        htmlStr += this.renderTree(childs, open, nextIndex, curDir);
      }
    });
    return htmlStr += `
`
  };
  // 初始化数据
  JcTree.prototype.initSingleData = function() {
    const {
      _options: {
        data,
        idList
      }
    } = this;
    if (idList.length === 0) {
      return
    };
    const dirList = idList.map(id => findIdDir(data, id));
    dirList.forEach(dir => {
      if (dir === undefined) return;
      const indexList = dir.split("-").filter(i => i !== "");
      let lg = indexList.length;
      let item = data;
      for (let i = 0; i < lg; i++) {
        let curIndex = indexList[i];
        if (i === lg - 1) {
          item[curIndex].checked = true
        } else {
          if (lg !== 1) {
            item[curIndex].open = true
          }
        }
        item = item[curIndex].childs
      }
    });
  };
  JcTree.prototype.initMulitData = function() {
    const {
      _options: {
        data,
        idList
      }
    } = this;
    const syncChildState = function(data) {
      if (data.childs) {
        data.childs.forEach(syncChildState);
      }
      data.open = true;
      data.checked = true;
    };
    if (idList.length === 0) {
      return
    };
    // 对id 路径进行排序·规则 --- 例如当 存在 ‘1-2-1’ 和 ‘1-2’ 两个对应的路径，
    // 此时表示 ‘1-2’ 以下的点都为选中的状态，此时 再出现 ‘1-2-2’，就不用关注这个点的状态，
    // 因为这个是在 ‘1-2’ 以下的所以是选中状态。
    let originDirList = idList.map(id => findIdDir(data, id)).filter(d => d !== undefined).sort();
    let dirList = [];
    // 打牌比较 如果 如果前面相同的话 拿出来
    while (originDirList.length) {
      let cur = originDirList.shift();
      dirList.push(cur)
      for (var i = 0; i < originDirList.length;) {
        if (originDirList[i].indexOf(cur) === 0) {
          originDirList.splice(i, 1)
        } else {
          i++
        }
      }
    };
    // 初始化父子节点 /0/
    let curItems = [];
    // 排序优化
    dirList.forEach(dir => {
      if (dir === undefined) return;
      const indexList = dir.split("-").filter(i => i !== "");
      let lg = indexList.length;
      let item = data;
      for (let i = 0; i < lg; i++) {
        let curIndex = indexList[i];
        if (i === lg - 1) {
          item[curIndex].checked = true;
          curItems.push(item[curIndex]);
        } else {
          if (lg !== 1) {
            item[curIndex].open = true
            item[curIndex].hasChildSelect = true
          }
        }
        item = item[curIndex].childs
      }
    });
    curItems.forEach(syncChildState);
  };
  JcTree.prototype.initMulitSpData = function() {
    const {
      _options: {
        data,
        idList
      }
    } = this;
    if (idList.length === 0) {
      return
    };
    // 打牌比较 如果 如果前面相同的话 拿出来
    let dirList = idList.map(id => findIdDir(data, id)).filter(d => d !== undefined).sort();
    // 初始化父子节点 /0/
    let curItems = [];
    // 排序优化
    dirList.forEach(dir => {
      if (dir === undefined) return;
      const indexList = dir.split("-").filter(i => i !== "");
      let lg = indexList.length;
      let item = data;
      for (let i = 0; i < lg; i++) {
        let curIndex = indexList[i];
        if (i === lg - 1) {
          item[curIndex].checked = true;
          curItems.push(item[curIndex]);
        } else {
          if (lg !== 1) {
            item[curIndex].open = true;
            item[curIndex].hasChildSelect = true
          }
        }
        item = item[curIndex].childs
      }
    });
  };
  JcTree.prototype.bindEventModelSingle = function() {
    const $root = this._options.$el;
    const _this = this;
    $root.on(`click.${pluginName}`, ".tree-handle-toggle", function() {
      let toggleText;
      const $curEl = $(this);
      const $parentNext = $curEl.parent(".tree-fh-item").next();
      $parentNext.toggleClass("hide");
      toggleText = $parentNext.hasClass("hide") ? "+" : "-";
      $curEl.text(toggleText);
    }).on(`click.${pluginName}`, "span.checkbox", function() {
      const $el = $(this);
      $el.toggleClass("active");
      const id = $el.data("id");
      let selectFlag = $el.hasClass("active");
      if (selectFlag) {
        $root.find("span.checkbox").removeClass("active")
        $el.addClass("active")
        _this._options.onchange(id);
      } else {
        $el.removeClass("active")
      }
    })
  };
  JcTree.prototype.bindEventModelMulit = function() {
    const $root = this._options.$el;
    const data = this._options.data;
    const _this = this;
    $root.on(`click.${pluginName}`, ".tree-handle-toggle", function() {
      let toggleText;
      const $curEl = $(this);
      const $parentNext = $curEl.parent(".tree-fh-item").next();
      $parentNext.toggleClass("hide");
      toggleText = $parentNext.hasClass("hide") ? "+" : "-";
      $curEl.text(toggleText);
    }).on(`click.${pluginName}`, "span.checkbox", function() {
      const $el = $(this);
      $el.toggleClass("active");
      const dir = $(this).data("dir").toString();
      const dirIndex = dir.split("-");
      let parentsDirs = [];
      let parentDir = "";
      const checkFlag = $el.hasClass("active");
      const $parent = $el.closest(".tree-fh-item");
      // 父级 对 下级效果
      const $childsParents = $parent.next(".tree-fh-node");
      checkFlag ? $childsParents.find("span.checkbox").addClass("active") : $childsParents.find("span.checkbox").removeClass("active")
      // 寻根节点
      dirIndex.forEach(d => {
        parentDir = parentDir === "" ? d : `${parentDir}-${d}`
        parentsDirs.push(parentDir)
      });
      // 找相应的父节点
      parentsDirs = parentsDirs.map(dir => `.tree-fh-item[data-dir="${dir}"]`).reverse();
      parentsDirs.shift();
      parentsDirs.forEach(function(selector) {
        const $el = $(selector, $root);
        const $next = $el.next();
        const findAllCheckboxs = $("span.checkbox", $next);
        let flag = true;
        findAllCheckboxs.each(function() {
          if (!$(this).hasClass("active")) {
            flag = false
            return false
          }
        });
        flag ? $el.find("span.checkbox").addClass("active") : $el.find("span.checkbox").removeClass("active");
      })
      _this._options.onchange(_this.getIdList());
    })
  };
  JcTree.prototype.bindEventModelMulitSp = function() {
    const $root = this._options.$el;
    const data = this._options.data;
    const _this = this;
    $root.on(`click.${pluginName}`, ".tree-handle-toggle", function() {
      let toggleText;
      const $curEl = $(this);
      const $parentNext = $curEl.parent(".tree-fh-item").next();
      $parentNext.toggleClass("hide");
      toggleText = $parentNext.hasClass("hide") ? "+" : "-";
      $curEl.text(toggleText);
    }).on(`click.${pluginName}`, "span.checkbox", function() {
      const $el = $(this);
      $el.toggleClass("active");
      const dir = $(this).data("dir").toString();
      const dirIndex = dir.split("-");
      let parentsDirs = [];
      let parentDir = "";
      const checkFlag = $el.hasClass("active");
      const $parent = $el.closest(".tree-fh-item");
      // 父级 对 下级效果
      // 寻根节点
      dirIndex.forEach(d => {
        parentDir = parentDir === "" ? d : `${parentDir}-${d}`
        parentsDirs.push(parentDir)
      });
      // 找相应的父节点
      parentsDirs = parentsDirs.map(dir => `.tree-fh-item[data-dir="${dir}"]`);
      parentsDirs.pop();
      parentsDirs.forEach(function(selector) {
        const $el = $(selector, $root);
        const $hasChildSelect = $el.find(".has-child-select");
        const $next = $el.next();
        const findAllCheckboxs = $("span.checkbox", $next);
        let flag = false;
        findAllCheckboxs.each(function() {
          if ($(this).hasClass("active")) {
            flag = true
            return false
          }
        });
        !flag ? $hasChildSelect.addClass("hide") : $hasChildSelect.removeClass("hide")
      })
      _this._options.onchange(_this.getIdList());
    })
  }
  //
  JcTree.prototype.getIdList = function() {
    const $root = this._options.$el;
    return $("span.active", $root).filter(".active").map((index, el) => {
      const $el = $(el);
      return {
        id: $el.data("id"),
        name: $el.data("name")
      }
    }).get();
  };
  // 初始化树
  JcTree.prototype.init = function() {
    switch (this._options.model) {
      case 0:
      {
        this.initSingleData();
        break;
      }
      case 1:
      {
        this.initMulitData();
        break;
      }
      case 2:
      {
        this.initMulitSpData();
        break;
      }
    }
    let result = this.renderTree(this._options.data, true);
    result = `
${result} 
`
    this._options.$el.html(result);
    switch (this._options.model) {
      case 0:
      {
        this.bindEventModelSingle();
        break;
      }
      case 1:
      {
        this.bindEventModelMulit();
        break;
      }
      case 2:
      {
        this.bindEventModelMulitSp();
        break;
      }
    }
  };
  
  $.fn.JcTree = function(options) {
    const $el = this;
    options = Object.assign({}, options, {
      $el
    });
    const jctree = new JcTree(options);
    const data = $el.data("jctree");
    if (data) this.off(`click.${pluginName}`);
    $el.data("jctree", jctree);
    return this
  }
})();
/**************************模拟树数据********************************/
// 后端数据
const ajaxData =  {
  "flag":1,
  "data":{"root":{"id":1,"level":0,"data":{"id":1,"level":0,"parentId":0,"name":"全部","categoryId":1,"leafFlag":1},"parentId":0,"childs":[{"id":2,"level":1,"data":{"id":2,"level":1,"parentId":1,"name":"导入默认分类","categoryId":2,"leafFlag":1},"parentId":1,"childs":[]},{"id":3,"level":1,"data":{"id":3,"level":1,"parentId":1,"name":"测试1级","categoryId":3,"leafFlag":0},"parentId":1,"childs":[{"id":5,"level":2,"data":{"id":5,"level":2,"parentId":3,"name":"测试2级","categoryId":5,"leafFlag":0},"parentId":3,"childs":[{"id":7,"level":3,"data":{"id":7,"level":3,"parentId":5,"name":"测试3级","categoryId":7,"leafFlag":1},"parentId":5,"childs":[]},{"id":8,"level":3,"data":{"id":8,"level":3,"parentId":5,"name":"测试3级b","categoryId":8,"leafFlag":1},"parentId":5,"childs":[]}]},{"id":6,"level":2,"data":{"id":6,"level":2,"parentId":3,"name":"测试2级b","categoryId":6,"leafFlag":0},"parentId":3,"childs":[]}]},{"id":4,"level":1,"data":{"id":4,"level":1,"parentId":1,"name":"测试1级b","categoryId":4,"leafFlag":0},"parentId":1,"childs":[]}]},"rootFlag":-1,"count":8}
};
let data = [ajaxData.data.root];
const transData = function (data, resultOut) {
  resultOut = resultOut ? resultOut : [];
  data.forEach((d, index) => {
    let leafMsg = {};
    leafMsg.id = d.id;
    leafMsg.childs = d.childs;
    leafMsg.name = d.data.name;
    leafMsg.leafFlag = d.data.leafFlag;
    leafMsg.level = d.level;
    if (d.childs) {
      const childs = leafMsg.childs = [];
      transData(d.childs, childs);
    }
    resultOut.push(leafMsg);
  });
  return resultOut
};
data = transData(data);
data = [{
  "id": 1,
  "childs": [{
    "id": 2,
    "childs": [{
      id: 9,
      name: "测试",
      level: 0
    }],
    "name": "导入默认分类",
    "leafFlag": 1,
    "level": 1
  }, {
    "id": 3,
    "childs": [{
      "id": 5,
      "childs": [{
        "id": 7,
        "childs": [],
        "name": "测试3级",
        "leafFlag": 0,
        "level": 3
      }, {
        "id": 8,
        "childs": [],
        "name": "测试3级b",
        "leafFlag": 0,
        "level": 3
      }],
      "name": "测试2级",
      "leafFlag": 1,
      "level": 2
    }, {
      "id": 6,
      "childs": [],
      "name": "测试2级b",
      "leafFlag": 1,
      "level": 2
    }],
    "name": "测试1级",
    "leafFlag": 1,
    "level": 1
  }, {
    "id": 4,
    "childs": [{
      id: 13,
      name: "走吧",
      leafFlag: 1,
      childs: [{
        id: 113,
        name: "走吧",
        leafFlag: 1
      }, {
        id: 114,
        name: "哈哈",
        leafFlag: 1
      }, {
        id: 213,
        name: "jc",
        leafFlag: 1,
        childs : [
          {
            id: 313,
            name: "走吧",
            leafFlag: 1
          }, {
            id: 314,
            name: "哈哈",
            leafFlag: 1
          }, {
            id: 413,
            name: "jc",
            leafFlag: 1
          }, {
            id: 919,
            name: "xx",
            leafFlag: 1,
            childs: [
              {
                id: 818,
                name: "结束",
                leafFlag: 0,
              }
            ]
          }
        ]
      }]
    }, {
      id: 414,
      name: "哈哈",
      leafFlag: 1
    }, {
      id: 23,
      name: "jc",
      leafFlag: 1,
      childs : [
        {
          id: 33,
          name: "走吧",
          leafFlag: 1
        }, {
          id: 34,
          name: "哈哈",
          leafFlag: 1
        }, {
          id: 43,
          name: "jc",
          leafFlag: 1
        }, {
          id: 99,
          name: "xx",
          leafFlag: 1,
          childs: [
            {
              id: 88,
              name: "结束",
              leafFlag: 0,
            }
          ]
        }
      ]
    }],
    "name": "测试1级b",
    "leafFlag": 1,
    "level": 1
  }],
  "name": "全部",
  "leafFlag": 1,
  "level": 0
}];
data.forEach(d => {
  d.open = true;
});
$("#model-0").JcTree({
  data: data,
  model: 0,
  idList: [1]
})
$("#model-1").JcTree({
  data: data,
  model: 1,
  idList: [1]
})
$("#model-2").JcTree({
  data: data,
  model: 2,
  idList: [1]
})
console.log("init ---- end");