Home > Article > Web Front-end > Introduction and use of the treeview plug-in in bootstrap

Introduction and use of the treeview plug-in in bootstrap

零下一度Original: 2018-05-14 14:56:464119browse

The project needs to implement permission management and use the front-end framework bootstrap, so I directly selected the treeview extension plug-in of bootstrap. First picture:

When the parent node is selected, all child nodes under the parent node are also selected, see code

1 , HTML code

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

2, Json data

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 data binding, loading TreeView

$(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, select/cancel when the parent node is selected/unselected Select all child nodes, and when all child nodes are selected, select the parent node

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);
    }
   }
  }

The above is the detailed content of Introduction and use of the treeview plug-in in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

json bootstrap html 前端框架 JS

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：What books should you read to learn JavaScript?Next article：What books should you read to learn JavaScript?

See more

Introduction and use of the treeview plug-in in bootstrap

Related articles