魔改了一下bootstrap-treeview组件，发布个NPM包体验一下

技术分享 2年前 (2022-05-28) 0 999+

前言

之前在这篇文章基于.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: '<span class="ms-1 badge bg-primary rounded-pill"></span>' };

加上了背景色和圆角，效果就好看多了~

然后！挤在一起的问题还没解决，原本的实现渲染出来大概这样的HTML

<ul class="list-group">   <li class="list-group-item">An item</li>   <li class="list-group-item">A second item</li>   <li class="list-group-item">A third item</li>   <li class="list-group-item">A fourth item</li>   <li class="list-group-item">And a fifth one</li> </ul>

理想情况下是两边分布，用flex布局正好实现，渲染出来应该类似这样

<ol class="list-group">   <li class="list-group-item d-flex justify-content-between align-items-start">     <div>Subheading</div>     <span class="badge bg-primary rounded-pill">tag</span>   </li> </ol>

但原本这个组件是把所有元素一个个append到list-group-item里面，就导致出来的效果不美观

没事，代码在手，改！

首先重新定义几个元素模板

包括上面的badge也在里面，所有元素模板在这

Tree.prototype.template = {     list: '<ul class="list-group"></ul>',     itemWrapper: '<li class="list-group-item d-flex justify-content-between align-items-start"></li>',     itemLeftElem: '<div class="w-100"></div>',     itemRightElem: '<div></div>',     indent: '<span class="mx-2"></span>',     icon: '<span class="icon"></span>',     link: '<a class="w-75" href="#" style="display:inline-block; color:inherit; text-decoration:none;"></a>',     badge: '<span class="ms-1 badge bg-primary rounded-pill"></span>' };

然后找到组装列表元素项的代码

在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);     } }