jQuery 플러그인 zTree로 구현된 다중 선택 트리 효과의 예-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-01-23 09:42:21

원래의

2087명이 탐색했습니다.

본 글에서는 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 속성 정의 확인란은 선택 취소됨을 나타냅니다.