트리 메뉴 기능을 디자인해야 하는 프로젝트였기 때문에 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();
}
여기서 전체 작업이 완료되었습니다. 글도 좋지 않고 조직 언어도 당연히 좋지 않습니다. 함께 배우고 함께 성장해요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
