如何解决树视图在NodeJ中无法正常工作
我尝试创建树视图。但它不能正常工作。不显示折叠图标。我已经提到了我的预期结果。
下面尝试过的代码:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<style>
<div id="tree"></div>
<script type="text/javascript">
var tree = [
{
text: "Parent 1",nodes: [
{
text: "Child 1",nodes: [
{
text: "Grandchild 1"
},{
text: "Grandchild 2"
}
]
},{
text: "Child 2"
}
]
},{
text: "Parent 2"
},{
text: "Parent 3"
},{
text: "Parent 4"
},{
text: "Parent 5"
}
];
$('#tree').treeview({data: tree});
</script>
当前输出:
所需的输出
解决方法
Bootstrap4不带有其自己的图标,您有几种选择:
- 您可以改用Bootstrap3
- 您可以使用另一个带有图标的库,例如FontAwesome(在这种情况下,您初始化树视图时需要设置“ expandIcon”和“ collapseIcon”)
var tree = [
{
text: "Parent 1",nodes: [
{
text: "Child 1",nodes: [
{
text: "Grandchild 1"
},{
text: "Grandchild 2"
}
]
},{
text: "Child 2"
}
]
},{
text: "Parent 2"
},{
text: "Parent 3"
},{
text: "Parent 4"
},{
text: "Parent 5"
}
];
$('#tree').treeview({data: tree,expandIcon: 'fa fa-plus',collapseIcon: 'fa fa-minus'});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>
<div id="tree"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。