JQuery zTree는 사용하기 쉽고 유연하며 효율적이며 호환성이 뛰어난 JQuery 기반 트리 컨트롤입니다. 이 기사에서는 설치, 초기화, 구성, 이벤트 등을 포함하여 jQuery zTree의 사용 튜토리얼을 자세히 소개하여 이 강력한 도구를 더 잘 사용할 수 있도록 도와줍니다.
1. 설치
jQuery zTree 컨트롤을 사용하려면 먼저 해당 JS 및 CSS 파일을 도입해야 합니다. 최신 버전의 파일은 zTree의 공식 웹사이트(http://www.ztree.me)에서 다운로드하거나 일반적으로 사용되는 일부 CDN(예: https://cdn.bootcss.com)에서 얻을 수 있습니다. 다음은 CSS 및 JS 파일을 가져오는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zTree Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3.5.35/zTreeStyle/zTreeStyle.min.css">
</head>
<body>
<!--页面内容-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3.5.35/jquery.ztree.all.min.js"></script>
<script>
//JS代码
</script>
</body>
</html>
로그인 후 복사
2. 초기화
파일을 성공적으로 가져오면 zTree 컨트롤을 사용할 수 있습니다. zTree 컨트롤을 초기화하려면 zTree 함수를 호출하고 일부 매개변수를 전달하여 다음 코드와 같이 컨트롤의 속성을 구성해야 합니다.
$(document).ready(function(){
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});로그인 후 복사
위 코드는 $(document)인 간단한 트리 메뉴를 구현합니다. Ready()는 페이지가 로드된 후에만 초기화 코드를 실행하는 것을 의미합니다. 설정에는 데이터 형식, 스타일, 이벤트 등을 포함한 zTree 컨트롤의 구성 정보가 포함됩니다. zNodes는 트리 메뉴의 데이터 소스를 저장하는 배열입니다. 초기화 중에 zTree 컨트롤은 $.fn.zTree.init() 메서드를 통해 초기화됩니다. $()는 ID, 클래스, 레이블 등을 기반으로 요소를 선택할 수 있는 JQuery 선택기를 나타냅니다.
3. Configuration
위 코드의 설정 변수는 zTree 컨트롤 구성의 핵심이며, 필요에 따라 다양한 속성을 설정할 수 있습니다. 다음은 몇 가지 일반적인 구성 항목입니다.
- data
data는 트리 메뉴의 데이터 형식을 구성하는 데 사용되는 내부 구성 항목입니다. 다음은 간단한 데이터 형식입니다.
var zNodes = [
{
name: "节点1",
children: [
{ name: "节点1.1" },
{ name: "节点1.2" }
]
},
{
name: "节点2",
children: [
{ name: "节点2.1" }
]
}
];로그인 후 복사
여기서 각 노드에는 이름(노드 이름), 하위 노드(하위 노드) 등과 같은 속성이 포함될 수 있습니다.
- check
check는 트리 메뉴의 체크박스 기능을 구성하는 데 사용되는 내부 구성 항목입니다. check.enable을 설정하여 확인란 기능을 활성화하고 check.chkboxType을 설정하여 확인란 유형을 설정할 수 있습니다.
var setting = {
check: {
enable: true,
chkboxType: { "Y": "", "N": "" }
}
};로그인 후 복사
chkboxType의 값은 { "Y" : "s", "N" : "s" }일 수 있습니다. 모든 노드에는 확인란이 있습니다(상위 노드만). { "Y" : "ps", "N" : "ps" }는 리프가 아닌 노드에만 확인란이 있음을 의미합니다. { "Y" : "ps" , "N " : "p" }는 리프가 아닌 노드와 마지막 수준 리프 노드에만 확인란이 있음을 의미합니다.
- callback
callback은 트리 메뉴 이벤트를 구성하는 데 사용되는 내부 구성 항목입니다. onClick, onDblClick, onCheck 및 기타 이벤트를 설정할 수 있습니다.
var setting = {
callback: {
onClick: function(event, treeId, treeNode) {
alert(treeNode.name);
},
onDblClick: function(event, treeId, treeNode) {
alert(treeNode.name + " - 双击事件");
},
onCheck: function(event, treeId, treeNode) {
alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}
}
};로그인 후 복사
그 중 onClick 이벤트는 노드를 클릭할 때 트리거되고, onDblClick은 노드를 더블 클릭할 때 트리거되고, onCheck는 노드 확인란을 클릭할 때 트리거됩니다. 선택 또는 선택 해제됨.
- view
view는 트리 메뉴의 스타일을 구성하는 데 사용되는 내부 구성 항목입니다. FontCss, showIcon 및 기타 스타일을 설정할 수 있습니다.
var setting = {
view: {
fontCss: { "font-weight": "bold", "color": "#055" },
showIcon: false
}
};로그인 후 복사
그 중 FontCss는 글꼴 스타일을 설정하는 데 사용되고 showIcon은 아이콘 표시 여부를 설정하는 데 사용됩니다.
4. 이벤트
구성에서 이벤트를 설정하는 것 외에도 zTree 컨트롤에는 몇 가지 내장 이벤트 기능이 있습니다. 예를 들어 zTreeOnClick, zTreeOnCheck 등은 노드 클릭 이벤트와 체크박스 선택 이벤트를 바인딩하는 데 사용됩니다. 사용법은 다음과 유사합니다.
$(document).ready(function(){
var setting = {
callback: {
onClick: zTreeOnClick,
onCheck: zTreeOnCheck
}
};
var zNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.name);
}
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}로그인 후 복사
위 코드에서 zTreeOnClick 및 zTreeOnCheck는 사용자 정의 이벤트 함수로, 다음을 통해 호출됩니다. 태그의 콜백 함수. 노드 클릭 이벤트와 체크박스 선택 이벤트를 바인딩합니다.
5. 요약
위의 소개를 통해 독자들은 설치, 초기화, 구성, 이벤트 등 jQuery zTree의 기본 사용법을 이해했다고 생각합니다. 실제 개발에서는 더 풍부한 기능을 구현하기 위해 필요에 따라 다양한 속성을 구성할 수 있습니다. 동시에, zTree 컨트롤 자체는 강력하지만 실제 개발 프로세스에서 적절하게 처리해야 하는 성능 문제와 같은 몇 가지 단점도 있다는 점에 유의해야 합니다.
위 내용은 제이쿼리 ztree를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
