트리 메뉴 기능을 디자인해야 하는 프로젝트였기 때문에 Baidu에서 관련 정보를 검색해보니 zTree에 대한 정보가 많이 있었고 꽤 좋다고 생각했습니다. 게다가 zTree에는 공식 API 문서도 있습니다. 아주 자세하게 소개되어 있었는데, 고민 끝에 드디어 알아냈는데, zTree 학습의 요약이라고 할 수 있겠네요.
zTree 소개:
1. zTree는 JQuery의 핵심 코드를 사용하여 가장 일반적인 기능을 완료할 수 있는 Tree 플러그인 세트를 구현합니다
2. zTree v3.0은 핵심코드를 기능별로 나누어 불필요한 코드를 로딩할 필요가 없습니다
3. 지연 로딩 기술을 사용하면 수만 개의 노드를 쉽게 로드할 수 있으며 IE6에서도 기본적으로 즉시 종료가 가능합니다
4. IE, FireFox, Chrome, Opera, Safari 및 기타 브라우저와 호환됩니다
5. JSON 데이터 지원
6. 노드 데이터의 정적 및 Ajax 비동기 로딩 지원
7. 모든 스킨 변경/맞춤 아이콘 지원(CSS 사용)
8. 매우 유연한 체크박스 또는 라디오 선택 기능 지원
9. 다중 이벤트 응답 콜백 제공
10. 유연한 편집(추가/삭제/수정/확인) 기능으로 노드를 자유롭게 드래그 앤 드롭할 수 있으며 여러 노드를 드래그 앤 드롭할 수 있습니다
11. 한 페이지에 여러 개의 Tree 인스턴스를 동시에 생성할 수 있습니다
핵심 기능 및 속성 소개:
코어:zTree(설정, [zTreeNodes])
이 함수는 JSON 형식의 데이터 객체 설정과 JSON 형식의 데이터 객체 zTreeNodes를 받아 트리를 생성합니다.
핵심 매개변수: 설정
zTree의 매개변수 구성은 모두 여기에서 이루어집니다. 간단히 말하면 트리 스타일, 이벤트, 액세스 경로 등이 모두 여기에서 구성됩니다.
var setting = {
showLine: true,
checkable: true
};
매개변수가 너무 많기 때문에 구체적인 매개변수는 zTreeAPI
를 참조하세요.핵심 매개변수:zTreeNodes
zTree의 전체 노드 데이터 수집은 JSON 객체로 구성된 데이터 구조를 채택합니다. 간단히 말하면 트리의 모든 정보는 Json 형식으로 저장됩니다.
1. zTree 공식 홈페이지: http://www.ztree.me/v3/main.php#_zTreeInfo
공식 웹사이트에서 zTree의 소스 코드, 예제 및 API를 다운로드할 수 있습니다. PDF 형식의 저자 API는 매우 상세합니다.
zTree 노드 데이터 수집 방법은 정적(직접 정의)과 동적(백엔드 데이터베이스 로딩)으로 구분됩니다.
세부 구성 단계:
첫 번째 단계 - 관련 파일 소개
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script> <script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
비고:
1) 첫 번째(zTreeStyle.css)는 zTree의 스타일 CSS 파일입니다. 이를 도입해야만 트리 구조 스타일을 표현할 수 있습니다.
2) 두 번째(jquery-1.9.1.min.js)는 jQuery 파일을 사용해야 하기 때문에
3) 세 번째(jquery.ztree.core-3.5.min.js)는 zTree의 핵심 js 파일입니다. 이것이 필요합니다.
4) 마지막 파일(js/jquery.ztree.excheck-3.5.min.js)은 확장파일로 주로 라디오버튼과 체크박스 기능을 사용하기 때문에 역시 사용됩니다. 반입이 필요합니다.
2단계 —— 관련 구성(구체적인 세부 구성은 공식 홈페이지에서 자세한 API 문서를 참고하세요)
var zTree;
var setting = {
view: {
dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
selectedMulti: false //设置是否允许同时选中多个节点
},
check:{
//chkboxType: { "Y": "ps", "N": "ps" },
chkStyle: "checkbox",//复选框类型
enable: true //每个节点上是否显示 CheckBox
},
data: {
simpleData: {//简单数据模式
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
zTree = $.fn.zTree.getZTreeObj("user_tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);//如果是父节点，则展开该节点
}else{
zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
}
}
}
};
세 번째 단계 - 노드 데이터를 로드하고 트리 구조 제시
1) html 페이지에서 ul을 직접 입력하면 결국 데이터가 자동으로 ul 요소에 로드됩니다.
<body> <div class="zTreeDemoBackground left"> <ul id="user_tree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 500px;"></ul> </div> </body>
2) js에서 데이터 로드
1. 정적 메소드(직접 정의)
var zNodes =[
{ id:1, pId:0, name:"test 1", open:false},
{ id:11, pId:1, name:"test 1-1", open:true},
{ id:111, pId:11, name:"test 1-1-1"},
{ id:112, pId:11, name:"test 1-1-2"},
{ id:12, pId:1, name:"test 1-2", open:true},
];
$(document).ready(function(){
$.fn.zTree.init($("#user_tree"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
}
}
2. 동적 방식(백그라운드 데이터베이스에서 로딩)
/**
* 页面初始化
*/
$(document).ready(function(){
onLoadZTree();
});
/**
* 加载树形结构数据
*/
function onLoadZTree(){
var treeNodes;
$.ajax({
async:false,//是否异步
cache:false,//是否使用缓存
type:'POST',//请求方式：post
dataType:'json',//数据传输格式：json
url:$('#ctx').val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径
error:function(){
//请求失败处理函数
alert('亲，请求失败！');
},
success:function(data){
// console.log(data);
//请求成功后处理函数
treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
}
});
var t = $("#user_tree");
t = $.fn.zTree.init(t, setting, treeNodes);
}
java 백그라운드 로딩 데이터 코드:
1. 트리의 VO 클래스를 정의합니다. 다른 작업을 사용해야 하므로 정의할 필요가 없습니다.
/**
* zTree树形结构对象VO类
*
* @author Administrator
*
*/
public class TreeVO {
private String id;//节点id
private String pId;//父节点pId I必须大写
private String name;//节点名称
private String open = "false";//是否展开树节点，默认不展开
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getpId() {
return pId;
}
public void setpId(String pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getOpen() {
return open;
}
public void setOpen(String open) {
this.open = open;
}
}
2. 데이터베이스를 쿼리하고 SQL 구조 필드도 id, pId, name, open(선택 사항) 형식이어야 합니다(참고: pId 중간에 있는 I는 대문자여야 함). 결과는 TreeVO 클래스에 포함됩니다.
/**
* 加载树形结构数据
* @param request
* @param response
* @throws IOException
*/
public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
List<TreeVO> user_tree_list = weixinUserService.getUserTreeList();
String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回
PrintWriter out = response.getWriter();
//利用Json插件将Array转换成Json格式
out.print(treeNodesJson);
//释放资源
out.close();
}
여기서 전체 작업이 완료되었습니다. 글도 좋지 않고 조직 언어도 당연히 좋지 않습니다. 함께 배우고 함께 성장해요!
JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AMJavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AMJavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AMPython은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.
JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AMJavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.
Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Apr 04, 2025 pm 09:24 PM쿼츠 타이머를 사용하여 작업을 예약 할 때 미리 쿼츠에서 작업 알림을 보내는 방법 작업의 실행 시간은 CRON 표현식에 의해 설정됩니다. 지금...
JavaScript에서 생성자의 프로토 타입 체인에서 함수의 매개 변수를 얻는 방법은 무엇입니까?Apr 04, 2025 pm 09:21 PMJavaScript 프로그래밍에서 JavaScript의 프로토 타입 체인에서 함수 매개 변수를 얻는 방법 프로토 타입 체인의 기능 매개 변수를 이해하고 조작하는 방법은 일반적이고 중요한 작업입니다 ...
Wechat Mini 프로그램 웹 뷰에서 Vue.js 동적 스타일 변위가 실패한 이유는 무엇입니까?Apr 04, 2025 pm 09:18 PMWeChat 애플릿 웹 뷰에서 vue.js를 사용하는 동적 스타일 변위 실패가 vue.js를 사용하는 이유를 분석합니다.
TamperMonkey에서 여러 링크에 대한 동시 GET 요청을 구현하고 순서대로 반환 결과를 결정하는 방법은 무엇입니까?Apr 04, 2025 pm 09:15 PM동시 링크에 대한 요청을 여러 링크와 순서대로 판단하여 결과를 반환하는 방법은 무엇입니까? 탬퍼 몬키 스크립트에서는 종종 여러 체인을 사용해야합니다 ...
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
뜨거운 주제
1374
524019