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

前言

之前在这篇文章 基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示 中说到,我为了让文章分类列表支持层级结构,用了一个树形组件,不过这个组件太老了,使用的Bootstrap版本居然是3.x的,但又找不到更好的,只能硬着头皮用。

但实际效果有很多我不满意的,感谢开源,我直接fork一份代码来魔改,实现了我要的效果~

然后还上传了npm~(第一次在npm上发包)

有需要的同学可以install试试:

npm i bootstrap5-treeview

效果

先放图,后面再来说改了啥

image

布局修改

我注意到原版对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);
    }
}

上传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

有需要实现树形结构的同学可以试试,感觉还行~

posted @ 2022-05-27 23:18  程序设计实验室  阅读(250)  评论(0编辑  收藏  举报