Bootstrap框架建立树形菜单(Tree)的实例代码

2023年5月25日上午5:18 • 人工智能概论

Bootstrap框架提供了用于创建平台可用的用户界面组件的组合工具。其中之一就是树形菜单(Tree)。通过使用Bootstrap，我们可以从头开始创建一个完整的树形菜单，并将其集成到我们的网站或应用程序中。

以下是建立树形菜单的步骤：

1. 引入Bootstrap库和jQuery库

在标签中引入Bootstrap库和jQuery库。

<head>
  <meta charset="utf-8">
  <title>Bootstrap Tree</title>
  <!-- 引入Bootstrap库和jQuery库 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

2. 构建HTML代码

创建一个

<div class="container">
  <h2>Bootstrap Tree</h2>
  <ul id="myTree">
    <li>Parent
      <ul>
        <li>Child</li>
        <li>Child
          <ul>
            <li>Grandchild</li>
            <li>Grandchild</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

3. 调用jQuery脚本

我们使用jQuery库来操作DOM元素（树形菜单）。

$(document).ready(function() {
    $("#myTree").treeview({
        data: treeData //数据格式请参考示例代码
    });
});

这里调用了$()或jquery()函数之后指定了document.ready()方式。这种方式会在DOM树加载完成后执行，确保代码只有在所有元素都可用之后才执行。

示例1：为树形菜单添加增删改操作

为树形菜单添加增删改操作时，我们需要修改HTML代码，添加一些输入框以让用户可以输入数据并保存到树形菜单。同时还需要编写JavaScript代码来添加、编辑、删除节点。

<div class="container">
  <h2>Bootstrap Tree With CRUD Operations</h2>
  <ul id="myTree2">
    <li>Parent
      <ul>
        <li>Child</li>
        <li>Child
          <ul>
            <li>Grandchild</li>
            <li>Grandchild</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <h4>Operations</h4>
  <p>
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">Add</button>
  </p>

  <!-- Add Modal -->
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="addModalLabel">Add Node</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="txt_name" class="control-label">Name:</label>
            <input type="text" class="form-control" id="txt_name">
          </div>
          <div class="form-group">
            <label for="txt_url" class="control-label">URL:</label>
            <input type="text" class="form-control" id="txt_url">
          </div>
          <div class="form-group">
            <label for="txt_parent" class="control-label">Parent Node ID:</label>
            <input type="text" class="form-control" id="txt_parent">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="btn_addNode">Save Node</button>
        </div>
      </div>
    </div>
  </div>
</div>

$('#btn_addNode').click(function(){
    var name = $('#txt_name').val();
    var url = $('#txt_url').val();
    var parent = $('#txt_parent').val();
    if(!name || !url || !parent) return;
    treeObj.addNode({
        name: name,
        url: url,
        parent: parent,
    });
});

示例2：从后台请求数据构建树形菜单

这个示例通过Ajax请求从后台服务器获取数据，然后使用Bootstrap Treeview来构建树形菜单。

<div class="container">
  <h2>Bootstrap Tree Dynamically Loaded Using Ajax</h2>
  <ul id="dynamicTree"></ul>
</div>

$(document).ready(function(){
    $.ajax({
        url: 'http://example.com/getTreeData',
        type: 'get',
        dataType: 'json',
        success: function(data){
            $('#dynamicTree').treeview({
                data: data,
            });
        }
    })
});

这个示例中，我使用$.ajax()函数发出了一个Ajax请求，指向后台服务器的/getTreeData路径。这个路径需要返回JSON格式的树形数据,如：

[
    {
        "text": "Parent 1",
        "nodes": [
            {
                "text": "Child 1",
                "nodes": []
            },
            {
                "text": "Child 2",
                "nodes": [
                    {
                        "text": "Grandchild 2.1",
                        "nodes": []
                    },
                    {
                        "text": "Grandchild 2.2",
                        "nodes": []
                    }
                ]
            }
        ]
    },
    {
        "text": "Parent 2",
        "nodes": [
            {
                "text": "Child 3",
                "nodes": []
            },
            {
                "text": "Child 4",
                "nodes": []
            }
        ]
    }
]

在$.ajax()函数的回调函数（success）中，我指定了数据的格式为JSON，然后在页面上使用$.treeview()函数创建树形菜单。

以上就是Bootstrap框架建立树形菜单(Tree)的完整攻略，其中包含了两个示例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap框架建立树形菜单(Tree)的实例代码 - Python技术站