javascript 单选、复选树 —

jiezi

6 年前

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

项目中遇到这个功能，与其 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: []
}

$.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’);