javascript 单选、复选树 —

共计 11844 个字符，预计需要花费 30 分钟才能阅读完成。

项目开发中遇到一颗树（单选、多选）；

项目中遇到这个功能，与其 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 = `<div class=”tree-fh-node ${className}”>`;
// 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 += `<div class=”tree-fh-item” data-id=”${id}” data-index=”${index}” data-dir=”${curDir}”>` +
(showToggleBtnFlag && childs && childs.length ? `<span class=”tree-handle-toggle” data-id=”${id}” data-index=”${index}” data-dir=”${curDir}”>${open ? ‘-‘ : ‘+’}</span>` : ‘<span class=”tree-handle-toggle-none”></span>’) +
`<label class=”checbox-container”><span data-id=”${id}” data-dir=”${curDir}” data-name=”${name}” class=”checkbox ${checked? ‘active’ : ”}”><i class=”icon-check text-icon”></i></span></label>` +
`<span class=”tree-node-name”>${name}</span>` +
`<span class=”has-child-select ${hasChildSelect ? ” : ‘hide’} ?>”>(下级有选中节点)</span>` +
`</div>`;
if (childs && childs.length > 0) {
htmlStr += this.renderTree(childs, open, nextIndex, curDir);
}
});
return htmlStr += `</div>`
};
// 初始化数据
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 = `<div class=”tree-root-warp”>${result} </div>`
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’);