? 优质资源分享 ?
| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| ? Python实战微信订餐小程序 ? | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| ?Python量化交易实战? | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
前言
之前在这篇文章 基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示 中说到，我为了让文章分类列表支持层级结构，用了一个树形组件，不过这个组件太老了，使用的Bootstrap版本居然是3.x的，但又找不到更好的，只能硬着头皮用。
但实际效果有很多我不满意的，感谢开源，我直接fork一份代码来魔改，实现了我要的效果~
然后还上传了npm~（第一次在npm上发包）
有需要的同学可以install试试：
npm i bootstrap5-treeview
效果
先放图，后面再来说改了啥
布局修改
我注意到原版对tag的处理是包装成一个badge直接放在文字后面，不知道是不是Bootstrap改了，在目前的5.x版本上看起来挤在一起，而且也没有颜色，因为原版作者只加了badge一个class。
我直接在js代码里找到这个badge的定义，修改！
Tree.prototype.template = {
// ...
badge: ''
};
加上了背景色和圆角，效果就好看多了~
然后！挤在一起的问题还没解决，原本的实现渲染出来大概这样的HTML
<ul class="list-group">
<li class="list-group-item">An itemli>
<li class="list-group-item">A second itemli>
<li class="list-group-item">A third itemli>
<li class="list-group-item">A fourth itemli>
<li class="list-group-item">And a fifth oneli>
ul>
理想情况下是两边分布，用flex布局正好实现，渲染出来应该类似这样
<ol class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div>Subheadingdiv>
<span class="badge bg-primary rounded-pill">tagspan>
li>
ol>
但原本这个组件是把所有元素一个个append到list-group-item里面，就导致出来的效果不美观
没事，代码在手，改！
首先重新定义几个元素模板
包括上面的badge也在里面，所有元素模板在这
Tree.prototype.template = {
list: '
',
itemWrapper: '-
',
itemLeftElem: '',
itemRightElem: '',
indent: '',
icon: '',
link: '',
badge: ''
};
然后找到组装列表元素项的代码
在Tree.prototype.buildTree这里，里面有个$.each(nodes, function addNodes(id, node)循环体
直接改代码
// 最外层包装
let treeItem = $(_this.template.itemWrapper)
.addClass('node-' + _this.elementId)
.addClass(node.state.checked ? 'node-checked' : '')
.addClass(node.state.disabled ? 'node-disabled' : '')
.addClass(node.state.selected ? 'node-selected' : '')
.addClass(node.searchResult ? 'search-result' : '')
.attr('data-nodeid', node.nodeId)
.attr('style', _this.buildStyleOverride(node));
// item 内分成两个元素，用flex布局分布在左右两边
let treeItemLeft = $(_this.template.itemLeftElem)
let treeItemRight = $(_this.template.itemRightElem)
treeItem.append(treeItemLeft)
treeItem.append(treeItemRight)
然后把tag渲染代码改成这样
// Add tags as badges
if (_this.options.showTags && node.tags) {
$.each(node.tags, function addTag(id, tag) {
treeItemRight.append(
$(_this.template.badge).append(tag)
);
});
}
其他元素全都append到treeItemLeft元素下
增加缩进控制
原版没办法控制是否开启子菜单缩进，默认是开启，我给加了个选项控制开启
_default.settings = {
// ...
enableIndent: true, // 添加了控制是否启用缩进的开关
}
然后依然是在上面的那个$.each(nodes, function addNodes(id, node)循环里，加个判断就搞定了
// Add indent/spacer to mimic tree structure
// 添加了控制是否启用缩进的开关
if (_this.options.enableIndent) {
for (let i = 0; i < (level - 1); i++) {
treeItemLeft.append(_this.template.indent);
}
}
上传NPM
第一次在NPM上发包，（也算是为开源社区做贡献了）
参考了这篇文章：https://segmentfault.com/a/1190000013940567
首先在NPM官网注册一个账号，然后本地使用npm login登录
完事了在项目的根目录下执行：npm publish就好了
当然我这个是fork的，要把package.json里的信息改一下，不然会和原作者的包冲突没法上传。
小结
魔改前端组件和在NPM发包这的门槛真的是很低，让我想起了之前在pip上发python包的经历，也是类似的操作，一键提交，直接起飞~
不过相比之下，NPM甚至比pip还更容易一点，至少没遇到什么障碍，也不需要额外安装什么就完成了
（唯一的障碍是这个包的依赖太老，grunt的上古版本我安不上，后面装了新版才可以执行任务）
代码
完整代码在github：https://github.com/Deali-Axy/bootstrap5-treeview
然后NPM地址：https://www.npmjs.com/package/bootstrap5-treeview
有需要实现树形结构的同学可以试试，感觉还行~
-
__EOF__
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JxA9mUNX-1653671603172)(https://blog.csdn.net/deali)]程序设计实验室 - 本文链接： https://blog.csdn.net/deali/p/16319425.html