SoFunction
Updated on 2025-03-01

Detailed explanation of BootStrap TreeView usage example

This article shares the BootStrap TreeView usage code for your reference. The specific content is as follows

<html>
<head>
  <title></title>
    <link href="/Scripts/bootstrap/css/" rel="stylesheet">
   <link href="/Scripts/bootstrap/css/" rel="stylesheet">

    <script src="/Scripts/bootstrap/js/" type="text/javascript"></script>
   <script src="/Scripts/bootstrap/js/" type="text/javascript"></script>

</head>
<body>
<div ></div>

<input type="button"  value="Query" />

<script type="text/javascript">
  $(function () {
    function getTree() {
      // Some logic to retrieve, or generate tree structure


      var data = [{
        text: "p1",
        nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]

      }]
      return data;
    }
    var obj = {};
     = "123";
    $('#tree').treeview({
      data: getTree(),     // data is not optional
      levels: 5,
      multiSelect: true

    });

    $("#btn").click(function (e) {

      var arr = $('#tree').treeview('getSelected');

      alert((arr));
      for (var key in arr) {
        alert(arr[key].id);
      }

    })

  })
  
</script>
</body>
</html>

Pop-up window + tree menu specific code

<html>
<head>
  <title></title>
      <link href="/Scripts/bootstrap/css/" rel="stylesheet">
   <link href="/Scripts/bootstrap/css/" rel="stylesheet">

    <script src="/Scripts/bootstrap/js/" type="text/javascript"></script>
    <script src="/Scripts/bootstrap/js/" type="text/javascript"></script>
   <script src="/Scripts/bootstrap/js/" type="text/javascript"></script>
</head>
<body>

<p ></p>

<!-- Button triggers modal box -->
<button class="btn btn-primary btn-lg" data-toggle="modal" 
  data-target="#myModal">
  Start demonstrating modal box
</button>

<!-- Modal Box（Modal） -->
<div class="modal fade"  tabindex="-1" role="dialog" 
  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" 
        data-dismiss="modal" aria-hidden="true">
         ×
      </button>
      <h4 class="modal-title" >
        Modal Box（Modal）title
      </h4>
     </div>
     <div class="modal-body">
     <div ></div>
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-default" 
        data-dismiss="modal">closure
      </button>
      <button type="button" class="btn btn-primary" >
        Submit changes
      </button>
     </div>
   </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<script type="text/javascript">
  $(function () {
    function getTree() {
      // Some logic to retrieve, or generate tree structure


      var data = [{
        text: "p1",
        nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]

      }]
      return data;
    }
    var obj = {};
     = "123";
    $('#tree').treeview({
      data: getTree(),     // data is not optional
      levels: 5,
      multiSelect: true

    });

    $("#btn").click(function (e) {

      var arr = $('#tree').treeview('getSelected');


      for (var key in arr) {
         =  + "," + arr[key].id;
      }

    })

  })
  
</script>
</body>
</html>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.