bootstrap3 treeview组件实现多级菜单

最新推荐文章于 2024-08-09 07:14:39 发布

mzjmmc

最新推荐文章于 2024-08-09 07:14:39 发布

阅读量662

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/mzjmmc/article/details/108477357

版权

bootstrap 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style type="text/css">
.treeview-small{
 width:200px;
}
</style>
</head>
<body>
<div class="container">
 <div class="row">
  <div class="col-sm-4">
   <h2>默认</h2>
   <div id="treeview1" class="">
   </div>
  </div>
 </div>
 </div>
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
  $(function() {
        // 设置树的相关属性并构造树
        $('#treeview1').treeview({
 backColor: "#FFFFFF",
          color: "#428bca",
          enableLinks: false,
          data: getTree()
        });

    //定义树里的数据来源
  function getTree(){
    var data = [
    {
            text: 'Parent 1',
            href: '#parent1',
            nodes: [
              {
                text: 'Child 1',
                href: '#child1',
                nodes: [
                  {
                    text: 'Grandchild 1',
                    href: '#grandchild1',
                  },
                  {
                    text: 'Grandchild 2',
                    href: '#grandchild2',
                  }
                ]
              },
              {
                text: 'Child 2',
                href: '#child2',
              }
            ]
          },
          {
            text: 'Parent 2',
            href: '#parent2',
          },
          {
            text: 'Parent 3',
            href: '#parent3',
          },
          {
            text: 'Parent 4',
            href: '#parent4',
          },
          {
            text: 'Parent 5',
            href: '#parent5',
          }
    ];
    return data;
  }
  $('#treeview1').addClass('treeview-small');
  $('#treeview1').on('nodeSelected',function(event,data){   //插件中的方法
     if(data.nodes == null){
      alert('准备使用ajax');
     }else{
      return;
     }
 });
  });
  </script>
</body>
</html>

在这里插入图片描述
具体API官方文档：https://www.jq22.com/jquery-info10461