Detailed example of how to use BootStrap TreeView-JS Tutorial-php.cn

Detailed example of how to use BootStrap TreeView

PHPz

Release： 2018-10-16 15:30:40

Original

4719 people have browsed it

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>

Copy after login

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>

Copy after login

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!