目的
使用jquery treetable生成树表，并且支持多选择列。
说明
- 简单测试了一下，应该没bug，可以多测测。
- 使用mock.js生成的数据
- 使用了vue的响应原理，这里纯属实验性的用用
- 树的中序列表以及先根表示的相关遍历方法是自己写的，不知道有没有问题，如果有大神愿意指教，还请不要客气。
效果图
源码
reactive.js
(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD
define(["jquery"], factory);
} else if (typeof exports === "object") {
// Node, CommonJS之类的
module.exports = factory(require("jquery"));
} else {
// 浏览器全局变量(root 即 window)
root.$r = factory(root.jQuery);
}
})(this, function ($) {
let activeEffect = null; // 能收集观察者的关键
// 转换成响应式对象
function reactive(target) {
let depsMap = null; // 源码用到的是 WeakMap，将所有的观察者集合进行了全局存储
return new Proxy(target, {
get(obj, key, receiver) {
const val = Reflect.get(obj, key, receiver); // 最后，返回属性值
if(!activeEffect) return val; // 存在焦点观察者时，再进行收集逻辑
if (!depsMap) {
// 初始化对象的观察者集合
depsMap = new Map();
}
let dep = depsMap.get(key);
if (!dep) {
// 初始化每个属性的观察者集合
depsMap.set(key, (dep = new Set()));
}
// 收集观察者
dep.add(activeEffect);
return val;
},
set(obj, key, val, receiver) {
let res = Reflect.set(obj, key, val, receiver); // 先设置属性值
if (!depsMap) return res;
let dep = depsMap.get(key);
if (!dep) return res;
dep.forEach((x) => x()); // 获取到属性的观察者集合，并触发
},
});
}
// 注册观察者
// TODO: 目前没有做注销观察者
function effect(eft) {
activeEffect = eft;
activeEffect();
activeEffect = null;
}
const jqueryFuns = {};
// attr使用时，需要使用单个的键值对，如果传对象，每次都会更新对象内的所有属性
["text", "attr", "prop"].forEach((x) => {
jqueryFuns[x] = function ($el, getArgs) {
effect(() => {
$el[x](...getArgs())
});
};
$.prototype[`r_${x}`] = function (getArgs) {
jqueryFuns[x](this, getArgs);
};
});
return { reactive, effect, ...jqueryFuns };
// ————————————————
// 版权声明：本文为CSDN博主「anywo01」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/y1377593732/article/details/122590479
});
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css"
rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
<script src="./reactive.js"></script>
<script>
/**
* 列表结构转树形结构
* 此方法原文: https://blog.csdn.net/weixin_55510188/article/details/122269509
**/
const toTree = (data) => {
// 删除 所有 children,以防止多次调用
data.forEach(function (item) {
delete item.children
})
// 将数据存储为 以 id 为 KEY 的 map 索引数据列
let map = Object.create(null)
data.forEach(function (item) {
map[item.id] = item
})
let val = []
data.forEach(function (item) {
// 以当前遍历项，的pid,去map对象中找到索引的id
let parent = map[item.pid]
// 如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
if (parent) {
(parent.children || (parent.children = [])).push(item)
} else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
val.push(item)
}
})
return val
}
// 生成森林的先序列表
const treePreOrder = (tree) => {
const res = [...tree];
let node;
for (let i = 0; i < res.length; i++) {
node = res[i];
// 存在子集时，将子集全部刷到当前节点后方
if (node.children) {
res.splice(i + 1, 0, ...node.children);
}
}
return res;
}
// 为树的先序列表添加层级和父级集合关系
const extendLevelAndParentsForPreOrderList = (ls) => {
let parents = [];
ls.forEach((node, i) => {
// 获取当前节点的层级和所有的父级
let j = parents.length;
while (j--) if (parents[j].id == node.pid) break;
node.level = j + 2;
node.parents = parents.slice(0, node.level - 1);
// 刷新历史父级集合
parents = [...node.parents];
// 存在子集时，将当前节点添加到历史父级集合
if (ls[i + 1]?.pid == node.id) {
parents.push(node);
}
});
return ls;
}
// 获取指定checkbox字段的选中节点的key
const getCheckedLeafCountKey = (key) => {
return `${key}CheckedLeafCount`;
}
const extendLeafCountForPreOrderList = (ls, keys) => {
ls.forEach((x, i) => {
x.parents.forEach(y => {
// 没有子集时，为所有的父级，统计叶子节点的数量
if (ls[i + 1]?.pid != x.id) {
y.leafCount = (y.leafCount ?? 0) + 1;
// 统计checkbox被选中的叶子节点的数量
if (keys) {
keys.forEach(key => {
const checkedKey = getCheckedLeafCountKey(key);
y[checkedKey] = (y[checkedKey] ?? 0) + x[key];
});
}
}
// 为所有的父级，统计节点数量
y.nodeCount = (y.nodeCount ?? 0) + 1;
});
});
}
// 生成测试数据
const getData = () => {
let data = [];
(function temp() {
data.push(...Mock.mock({
"array|100-150": [{
"isAdmin": false,
"isTeacher": false,
"id": "@guid",
"name": "@ctitle(5, 10)",
"pid": (() => {
let arr = data.map(x => x.id);
return function () {
return data.length == 0 ? '0' : Mock.Random.pick(arr);
};
})(),
"state": 0,
"title": function () { return this.name; },
"createTime": "@datetime"
}]
}).array)
if (data.length < 500) temp();
})()
const tree = toTree(data);
const preOrderList = treePreOrder(tree);
return preOrderList;
}
// checkbox选择事件
const checkboxChange = (item, index, ls, key) => {
const checkedKey = getCheckedLeafCountKey(key);
const isNode = ls[index + 1]?.pid == item.id;
// 修改自身
item[key] = !item[key];
// const changeCount = isNode ? (item[key] ? item.leafCount - item[checkedKey] : -item.leafCount) : (item[key] ? 1 : -1);
if (isNode) {
changeCount = item[key] ? item.leafCount - item[checkedKey] : -item.leafCount;
} else {
changeCount = item[key] ? 1 : -1;
}
// 修改所有的父级的连锁状态，父级在显示区域的概率偏大
// 所以不使用叶子节点修改，连锁触发的方式
item.parents.forEach(x => {
x[checkedKey] += changeCount;
x[key] = x[checkedKey] == x.leafCount;
});
if (isNode) {
// 存在子节点时，修改子节点的选中叶子节点树
item[checkedKey] = item[key] ? item.leafCount : 0;
// 存在子节点时，修改所有的子集的连锁状态
const children = ls.slice(index + 1, index + 1 + item.nodeCount);
children.forEach((x, i) => {
x[key] = item[key];
// 非叶子节点，修改选中的叶子节点数量
if (children[i + 1]?.pid == x.id) {
x[checkedKey] = x[key] ? x.leafCount : 0;
}
});
}
};
// 根据数据生成表的行元素集合
const generateTbRowFromData = (function () {
let template;
return function (dataProxy) {
if (!template) template = $("#tbRow").html();
return dataProxy.map((xProxy, i) => {
const $row = $(template);
$row.attr("data-index", i);
$row.attr("data-tt-id", xProxy.id);
$row.attr("data-tt-parent-id", xProxy.pid);
$row.children(".id").text(xProxy.id);
$row.find(".is-admin > input").r_prop(() => ['checked', xProxy.isAdmin]);
$row.find(".is-admin > input").change((e) => {
checkboxChange(xProxy, i, dataProxy, "isAdmin");
});
$row.find(".is-teacher > input").r_prop(() => ['checked', xProxy.isTeacher]);
$row.find(".is-teacher > input").change((e) => {
checkboxChange(xProxy, i, dataProxy, "isTeacher");
});
$row.children(".name").text(xProxy.name);
$row.children(".title").text(xProxy.title);
$row.children(".state").text(xProxy.state);
$row.children(".create-time").text(xProxy.createTime);
return $row;
});
}
})();
$(function () {
const $tb = $("#treeTable");
const $tbody = $tb.children("tbody");
let data = getData();
let dataProxy = data.map(x => $r.reactive(x)); // 将所有的对象做响应式代理
extendLevelAndParentsForPreOrderList(dataProxy); // 扩展level字段和parents字段
extendLeafCountForPreOrderList(dataProxy, ["isAdmin", "isTeacher"]); // 扩展选中的叶子节点和总叶子节点数字段
let $rows = generateTbRowFromData(dataProxy); // 根据数据生成结果集
$tbody.append($rows);
$tb.treetable({
expandable: true,
});
})
</script>
</head>
<body>
<template id="tbRow">
<tr>
<td class="id"></td>
<td class="is-admin">
<input type="checkbox" name="is-admin" />
</td>
<td class="is-teacher">
<input type="checkbox" name="is-teacher" />
</td>
<td class="name"></td>
<td class="title"></td>
<td class="state"></td>
<td class="create-time"></td>
<td class="operation"></td>
</tr>
</template>
<table id="treeTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th> 类目ID </th>
<th> 是否是管理员 </th>
<th> 是否是老师 </th>
<th> 类目名称 </th>
<th> 标题 </th>
<th> 状态</th>
<th> 更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
8670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
