집 > 기사 > 웹 프론트엔드 > jQuery 플러그인 zTree로 구현된 다중 선택 트리 효과의 예

jQuery 플러그인 zTree로 구현된 다중 선택 트리 효과의 예

小云云원래의: 2018-01-23 09:42:212041검색

본 글에서는 jQuery 플러그인 zTree가 구현하는 다중 선택 트리 효과를 주로 소개하며, 다중 선택 트리 효과를 구현하기 위한 jQuery 트리 플러그인 zTree의 구체적인 동작 단계와 관련 주의사항을 예시 형태로 소개합니다. 필요하신 분들은 참고하시면 도움이 될 것 같습니다.

이 문서의 예에서는 jQuery 플러그인 zTree로 구현된 다중 선택 트리 효과를 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>多选树</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/demo.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
  <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.excheck.min.js"></script>
  <script type="text/javascript">
    <!--
    var setting = {
      check: {
        enable: true,
        chkStyle: "checkbox",
        chkboxType: { "Y": "s", "N": "ps" }
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };
    var zNodes =[
      { id:1, pId:0, name:"湖北省", open:true},
      { id:11, pId:1, name:"武汉市", open:true},
      { id:111, pId:11, name:"汉口"},
      { id:112, pId:11, name:"武昌"},
      { id:12, pId:1, name:"黄石市", open:true},
      { id:121, pId:12, name:"黄石港区"},
      { id:122, pId:12, name:"西塞山区"},
      { id:2, pId:0, name:"湖南省", open:true},
      { id:21, pId:2, name:"长沙市"},
      { id:22, pId:2, name:"株洲市", open:true},
      { id:221, pId:22, name:"天元区"},
      { id:222, pId:22, name:"荷塘区"},
      { id:23, pId:2, name:"湘潭市"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#treeMultiple"), setting, zNodes);
    });
    //-->
  </script>
</head>
<body>
<p class="content_wrap" style="text-align: center;">
  <p class="zTreeDemoBackground left">
    <ul id="treeMultiple" class="ztree" style="height: 300px; width:150px; overflow-y: auto"></ul>
  </p>
</p>
</body>
</html>

2. 소스 코드 설명

(1) Y, N , "p" 및 "s"는

Y 속성 정의 확인란이 선택되어 있음을 나타냅니다. N 속성 정의 확인란은 선택 취소됨을 나타냅니다.

"p"는 작업이 상위 노드에 영향을 미칠 것임을 나타냅니다. 자식 노드.

(2)

확인란 선택 작업은 하위 노드에만 영향을 미치며, 선택 취소 작업은 상위 및 하위 노드에 영향을 미칩니다.

관련 추천 :

jquery ztree 우클릭 수집 기능 구현 상세 예시 chkboxType: { "Y": "s", "N": "ps" }

jQuery 트리 플러그인 zTree 올바른 사용 방법

ztree 권한 가로 표시 기능 구현 예시 공유

위 내용은 jQuery 플러그인 zTree로 구현된 다중 선택 트리 효과의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery checkbox

성명：

이전 기사：jquery는 색상 선택 기능을 구현합니다.다음 기사：jquery는 색상 선택 기능을 구현합니다.