Heim > Artikel > Web-Frontend > Einführung und Verwendung des Treeview-Plug-Ins in Bootstrap

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

零下一度Original: 2018-05-14 14:56:464177Durchsuche

Das Projekt muss die Berechtigungsverwaltung implementieren und das Front-End-Framework Bootstrap verwenden, daher habe ich direkt das Treeview-Erweiterungs-Plug-In von Bootstrap ausgewählt. Erstes Bild:

Wenn der übergeordnete Knoten ausgewählt ist, werden auch alle untergeordneten Knoten unter dem übergeordneten Knoten ausgewählt, siehe Code

1, HTML-Code

<h2>TreeView Checkable</h2>
<p id="treeview-checkable"></p>

2. Json-Daten

function getTvStateData() {
   var defaultData = [
    {
     text: &#39;Parent 1&#39;,
     href: &#39;#parent1&#39;,
     tags: [&#39;4&#39;],
     state: {
      checked: true
     },
     nodes: [
      {
       text: &#39;Child 1&#39;,
       href: &#39;#child1&#39;,
       tags: [&#39;2&#39;],
       nodes: [
        {
         text: &#39;Grandchild 1&#39;,
         href: &#39;#grandchild1&#39;,
         tags: [&#39;0&#39;]
        },
        {
         text: &#39;Grandchild 2&#39;,
         href: &#39;#grandchild2&#39;,
         tags: [&#39;0&#39;]
        }
       ]
      },
      {
       text: &#39;Child 2&#39;,
       href: &#39;#child2&#39;,
       tags: [&#39;0&#39;]
      }
     ]
    },
    {
     text: &#39;Parent 2&#39;,
     href: &#39;#parent2&#39;,
     tags: [&#39;0&#39;],
     nodes: [
      {
       text: &#39;Child 1&#39;,
       href: &#39;#child1&#39;,
       tags: [&#39;2&#39;],
       nodes: [
        {
         text: &#39;Grandchild 1&#39;,
         href: &#39;#grandchild1&#39;,
         tags: [&#39;0&#39;]
        },
        {
         text: &#39;Grandchild 2&#39;,
         href: &#39;#grandchild2&#39;,
         tags: [&#39;0&#39;]
        }
       ]
      },
      {
       text: &#39;Child 2&#39;,
       href: &#39;#child2&#39;,
       tags: [&#39;0&#39;]
      }
     ]
    },
    {
     text: &#39;Parent 3&#39;,
     href: &#39;#parent3&#39;
    },
    {
     text: &#39;Parent 4&#39;,
     href: &#39;#parent4&#39;,
     tags: [&#39;0&#39;]
    },
    {
     text: &#39;Parent 5&#39;,
     href: &#39;#parent5&#39;,
     tags: [&#39;0&#39;]
    }
   ];

   return defaultData;
  }

3. JS-Datenbindung, TreeView laden

$(function() {
 var $checkableTree = $(&#39;#treeview-checkable&#39;)
    .treeview({
     data: getTvStateData(), //数据
     showIcon: false,
     showCheckbox: true,
     levels: 1,
     onNodeChecked: function(event, node) { //选中节点
      var selectNodes = getChildNodeIdArr(node); //获取所有子节点
      if (selectNodes) { //子节点不为空，则选中所有子节点
       $(&#39;#treeview-checkable&#39;).treeview(&#39;checkNode&#39;, [selectNodes, { silent: true }]);
      }
      var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
      setParentNodeCheck(node);
     },
     onNodeUnchecked: function(event, node) { //取消选中节点
      var selectNodes = getChildNodeIdArr(node); //获取所有子节点
      if (selectNodes) { //子节点不为空，则取消选中所有子节点
       $(&#39;#treeview-checkable&#39;).treeview(&#39;uncheckNode&#39;, [selectNodes, { silent: true }]);
      }
     },
     onNodeExpanded:
      function(event, data) {
       if (data.nodes === undefined || data.nodes === null) {
        
       } else if (data.tags[0] === "2") {
        alert("Tags 2");
       } else {
        alert("1111");
       }
      }
    });
 });

4 Wenn ein Knoten ausgewählt ist, werden alle untergeordneten Knoten ausgewählt/nicht ausgewählt, und wenn alle untergeordneten Knoten ausgewählt sind, wird der übergeordnete Knoten ausgewählt

function getChildNodeIdArr(node) {
   var ts = [];
   if (node.nodes) {
    for (x in node.nodes) {
     ts.push(node.nodes[x].nodeId);
     if (node.nodes[x].nodes) {
      var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
      for (j in getNodeDieDai) {
       ts.push(getNodeDieDai[j]);
      }
     }
    }
   } else {
    ts.push(node.nodeId);
   }
   return ts;
  }

  function setParentNodeCheck(node) {
   var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
   if (parentNode.nodes) {
    var checkedCount = 0;
    for (x in parentNode.nodes) {
     if (parentNode.nodes[x].state.checked) {
      checkedCount ++;
     } else {
      break;
     }
    }
    if (checkedCount === parentNode.nodes.length) {
     $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
     setParentNodeCheck(parentNode);
    }
   }
  }

Das obige ist der detaillierte Inhalt vonEinführung und Verwendung des Treeview-Plug-Ins in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json bootstrap html 前端框架 JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche Bücher sollten Sie lesen, um JavaScript zu lernen?Nächster Artikel：Welche Bücher sollten Sie lesen, um JavaScript zu lernen?

In Verbindung stehende Artikel

Mehr sehen