집 >웹 프론트엔드 >JS 튜토리얼 >부트스트랩의 트리뷰 플러그인 소개 및 사용

부트스트랩의 트리뷰 플러그인 소개 및 사용

零下一度원래의: 2018-05-14 14:56:464234검색

프로젝트에서는 권한 관리를 구현하고 프런트엔드 프레임워크 부트스트랩을 사용해야 하므로 부트스트랩의 트리뷰 확장 플러그인을 직접 선택했습니다. 첫 번째 사진:

상위 노드가 선택되면 상위 노드 아래의 모든 하위 노드도 선택됩니다. 코드

1, HTML 코드

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

2, Json 데이터

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를 참조하세요. 데이터 바인딩 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. 부모 노드가 선택/선택 해제되면 모든 자식 노드가 선택/선택 해제되고, 모든 자식 노드가 선택되면 부모 노드가 선택됩니다

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

위 내용은 부트스트랩의 트리뷰 플러그인 소개 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json bootstrap html 前端框架 JS

성명：

이전 기사：JavaScript를 배우려면 어떤 책을 읽어야 할까요?다음 기사：JavaScript를 배우려면 어떤 책을 읽어야 할까요?