Detailliertes Beispiel für die Verwendung von BootStrap TreeView-js-Tutorial-php.cn

Detailliertes Beispiel für die Verwendung von BootStrap TreeView

PHPz

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

Original

4765 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Verwendungsbeispiele von BootStrap TreeView im Detail vorgestellt, die einen gewissen Referenzwert haben und hoffen, allen zu helfen.

[Ähnliche Videoempfehlungen: 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>

Nach dem Login kopieren

Spezifischer Code für Popup-Fenster + Baummenü

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

Nach dem Login kopieren

Verwandte Empfehlungen:

Einführung und Verwendung des Treeview-Plug-Ins in Bootstrap

Die Daten der jQuery TreeView-Baumsteuerung werden unterstützt JSON-Zeichenfolge, Listensammlung

JS steuert die Knotenauswahl von TreeView

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Verwendung von BootStrap TreeView. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!