zTree.js 연구 노트

1. 소개

zTree는 다양한 "플러그인 나무"의 jQuery 구현에 의존하고 있습니다. 우수한 성능, 유연한 구성의 조합, 가장 큰 장점은 다양한 기능이다 zTree

공식 웹 사이트 : http://www.treejs.cn/v3/main.php#_zTreeInfo

2. 기본 사용

(1) jQuery를 도입
(2) 도입 zTree 된 CSS 파일 JS 파일
구성 파라미터와 노드 설정 데이터 (3)
(4)를 초기화하기 위해 구성 정보를 전달 (컨테이너 ID, 구성 노드 데이터)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- 引入zTree css -->
   <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
   <!-- 引入jquery -->
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <!-- 引入zTree.js -->
   <script src="js/jquery.ztree.core.min.js"></script>
   <title>zTree.js demo</title>
</head>
<body>
   <!-- 创建容器 -->
   <ul id="treeDemo" class="ztree"></ul>
</body>
<script>
   var zTreeObj
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {}
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
      {name:"test1", open:true, children:[
         {name:"test1_1"}, {name:"test1_2"}]},
      {name:"test2", open:true, children:[
         {name:"test2_1"}, {name:"test2_2"}]}
   ]

   $(function(){
      //传入数据和配置
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   })
</script>
</html>

효과 :

3. 설명 노드 데이터

표준 중첩 된 부모 - 자식 노드 관계를 예를 들어, 표현하는 단계를 포함하는 JSON 데이터를 필요

var nodes = [
    {name: "父节点1", children: [
        {name: "子节点1"},
        {name: "子节点2"}
    ]}
]

오픈 절첩 기본 노드는 노드의 속성 값을 설정함으로써 결정될 수있다 확대 또는 축소

var zNodes = [
      {name:"默认", children:[
         {name:"节点1-1"}, {name:"节点1-2"}
      ]},
      {name:"展开的节点", open:true, children:[
         {name:"节点2-1"}, {name:"节点2-2"}
      ]},
      {name:"折叠的节点", open:false, children:[
         {name:"节点3-1"}, {name:"节点3-2"}
      ]}
   ]

하는 노드 아이콘에 추가
있는 대상 노드에서 / iconOpen / iconClose 속성을 아이콘 추가, 자신의 주소의 사진, zTree.js는 배경 이미지로이 사진을 설정할 것이다.
그리고 iconSkin 클래스 이름 속성도 정의 배경 패턴 노드에 추가 될 수있다.

var zNodes = [
      {name:"默认", children:[
         {name:"节点1-1"}, {name:"节点1-2"}
      ]},
      {name:"展开的节点", open:true, children:[
         {name:"节点2-1",icon:"img/ico_01.png",iconSkin:"test"}, 
         {name:"节点2-2",icon:"img/ico_02.png",iconSkin:"test"}
      ]},
      {name:"折叠的节点", open:false, children:[
         {name:"节点3-1"}, {name:"节点3-2"}
      ]}
   ]

우리가 시험에 추가 클래스 이름, 그것은 test_ico_docu로 렌더링

<span class="button test_ico_docu" style="background:url(img/ico_01.png) 0 0 no-repeat;"></span>

설정 CSS 스타일

<style>
.ztree li span.button.test_ico_docu {
    background-size: 100% 100% !important;
}
</style>

1. 소개

2. 기본 사용

3. 설명 노드 데이터

추천