Home >Web Front-end >JS Tutorial >Detailed example of how to use BootStrap TreeView

Detailed example of how to use BootStrap TreeView

PHPzOriginal: 2018-05-14 14:56:064758browse

This article mainly introduces the usage examples of BootStrap TreeView in detail, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

【Related video recommendation: Bootstrap tutorial】

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

    <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
   <script src="/Scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script>

</head>
<body>
<p id="tree"></p>

<input type="button" id="btn" value="查询" />

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


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

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

    });

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

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

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

    })

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

Specific code for pop-up window + tree menu

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

    <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap/js/bootstrap.js" type="text/javascript"></script>
   <script src="/Scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script>
</head>
<body>

<p id="c"></p>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" 
  data-target="#myModal">
  开始演示模态框
</button>

<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" 
  aria-labelledby="myModalLabel" aria-hidden="true">
  <p class="modal-dialog">
   <p class="modal-content">
     <p class="modal-header">
      <button type="button" class="close" 
        data-dismiss="modal" aria-hidden="true">
         ×
      </button>
      <h4 class="modal-title" id="myModalLabel">
        模态框（Modal）标题
      </h4>
     </p>
     <p class="modal-body">
     <p id="tree"></p>
     </p>
     <p class="modal-footer">
      <button type="button" class="btn btn-default" 
        data-dismiss="modal">关闭
      </button>
      <button type="button" class="btn btn-primary" id="btn">
        提交更改
      </button>
     </p>
   </p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>

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


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

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

    });

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

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


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

    })

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

Related Recommended:

Introduction and use of the treeview plug-in in bootstrap

jQuery TreeView tree control data supports json strings and list collections

JS controls the node selection of TreeView

The above is the detailed content of Detailed example of how to use BootStrap TreeView. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Five steps to easily implement zTree usage examplesNext article：Five steps to easily implement zTree usage examples

See more

Detailed example of how to use BootStrap TreeView

Related articles