Exemple détaillé d'utilisation de BootStrap TreeView-js tutoriel-php.cn

Exemple détaillé d'utilisation de BootStrap TreeView

PHPz

Libérer： 2018-10-16 15:30:40

original

4758 Les gens l'ont consulté

Cet article présente principalement en détail les exemples d'utilisation de BootStrap TreeView, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer et espérer aider tout le monde.

[Recommandations vidéo associées : Tutoriel Bootstrap]

<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>

Copier après la connexion

Code spécifique pour la fenêtre pop-up + menu arborescent

<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>

Copier après la connexion

Recommandations associées :

Présentation et utilisation du plug-in treeview dans bootstrap

Les données des supports de contrôle d'arborescence jQuery TreeView chaîne json, collection de listes

JS contrôle la sélection des nœuds de TreeView

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!