bootstrap treeview 设置点击选择行不变色、改变点击选择背景色

By | 2020年8月23日

近日有一个需求,需要将权限显示为树型结构,所以就用上了treeview插件,这个插件用法如下:

//首先建立一个元素标签
<div id="treeviewDiv" class=""></div>
//设置js配置
<script type="text/javascript">
$("#treeviewDiv").treeview({
data:[{ //这里data属性就是需要显示的数据
 text:"这里是标题",
 nodes:[{  //子级
  text:"子标题",
 }]
}]
})
</script>

以上需要引入js和css文件,插件需要您自己去网上搜索,很多的;以上配置好后,显示效果如下:

Bootstrap Tree View效果显示

通过以上的效果图,大家可以看到,默认点击每一行后会有个背景颜色,这个背景颜色可以更改,也可以去掉,今天就给大家介绍如何去除和更改点击背景色:

//设置js配置
<script type="text/javascript">
$("#treeviewDiv").treeview({
highlightSelected: false,   //这行配置就是去除点击选择背景色
data:[.......]  //此处省略数据配置
})
</script>

下面则是配置更改点击背景色的颜色及更改显示的文字颜色:

//设置js配置
<script type="text/javascript">
$("#treeviewDiv").treeview({
highlightSelected: true,   //显示点击选择背景色
selectedColor: "yellow",   //改变点击选择的背景色为黄色
selectedBackColor: "darkorange",  //改变点击选择后的文字颜色为暗橘色
color: "yellow",  //  设置文字颜色为黄色
backColor: "purple",  //设置整个列表的背景色为紫色
data:[.......]  //此处省略数据配置
})
</script>

以上的设置显示效果如下:

设置treeview背景色及其他颜色

发表评论

电子邮件地址不会被公开。 必填项已用*标注