bootstrap-treeview的基本使用方法

最新推荐文章于 2024-09-24 07:44:20 发布

吴所畏惧

最新推荐文章于 2024-09-24 07:44:20 发布

阅读量1.4k

点赞数 1

分类专栏：基础 js 文章标签： bootstrap-treeview

本文链接：https://blog.csdn.net/weixin_42575028/article/details/90901444

版权

基础同时被 2 个专栏收录

26 篇文章

订阅专栏

25 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap Treeview插件创建树形菜单。包括引入样式和脚本文件、设置基本属性、定义数据结构等步骤，以及如何通过事件监听实现节点选择后的路径显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-treeview的基本使用方法

引入：

   <link href="css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
   <div id="treeview" class="test"></div>
   <script src="js/plugins/treeview/bootstrap-treeview.js"></script>

js:

	//树形图
$('#treeview').treeview({
	data: treeData,
	color: "#fff",
	backColor: "rgba(0,0,0,0)",
	onhoverColor: "rgba(255,255,255,0.2)",
	borderColor: "#3478D2",
	showBorder: true,
	showTags: false,
	highlightSelected: true,
	selectedColor: "#3478D2",
	selectedBackColor: "rgba(52,120,210,0.2)",
	onNodeSelected: function(event, node) {
	var Pid = $('#treeview').treeview('getParent', node.nodeId);  //获取父辈id
	//路径追加显示
	function func(nodeId, text) //递归调用
	{
		if (nodeId == 0) {
			return '富士化工';
		}
		var id = $('#treeview').treeview('getParent', nodeId);
			return func(id.nodeId, id.text) + " > " + text;
	}
	var locationText = func(node.nodeId, node.text);
	$(selectors.currentLocation).html('当前位置：' + locationText);
	},
			});

数据结构:

//为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如：
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"
  }
];