이 기사 예제는 JS 트리 플러그인 Ztree에 의해 선택된 모든 노드 데이터를 얻는 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
나는 나무 쪽을 처음 접했기 때문입니다. 나는 중국어가 쓴 Ztree 온라인을 보았다. 따라서 API는 중국어로되어 있어야합니다. 그리고 의견도 좋습니다. 따라서 프로젝트에서 Ztree를 사용해보십시오. 선택한 모든 노드 데이터를 쉽게 얻을 수 있습니다. 이해하려면 API를 살펴보십시오. 그래서 방금 코드를 업로드했습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<title> Ztree Demo- 표준 데이터 </title>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<link rel = "Stylesheet"href = "css/ztreestyle/ztreestyle.css"type = "text/css">
<link rel = "Stylesheet"href = "css/demo.css"type = "text/css">
<script type = "text/javaScript"src = "js/jquery-1.4.4.min.js"> </script>
<script type = "text/javaScript"src = "js/jquery.ztree.core-3.4.js"> </script>
<script type = "text/javaScript"src = "js/jquery.ztree.excheck-3.4.js"> </script>
<!-
<script type = "text/javaScript"src = "js/jquery.ztree.exedit-3.4.js"> </script>->
<script type = "text/javaScript">
<!-
var setting = {
확인하다:{
활성화 : True
},
/*데이터 : {
단순화 : {
활성화 : True
}
}*/
데이터 : {
단순화 : {
활성화 : True
}
},
콜백 : {
OnCheck : OnCheck
}
};
var znodes = [
{id : 1, pid : 0, 이름 : "will at at at at at 1", open : false},
{ID : 11, PID : 1, 이름 : "1-1 확인", Open : True},
{ID : 111, PID : 11, 이름 : "1-1-1 확인"},
{ID : 112, PID : 11, 이름 : "1-1-2에서 확인"},
{ID : 12, PID : 1, 이름 : "1-2 확인", Open : True},
{ID : 121, PID : 12, 이름 : "1-2-1의 확인"},
{id : 122, PID : 12, 이름 : "1-2-2에서 확인"},
{ID : 2, PID : 0, 이름 : "will at at at at will", open : false},
{id : 21, pid : 2, 이름 : "2-1 확인"},
{ID : 22, PID : 2, 이름 : "2-2 Check at Will", Open : True},
{ID : 221, PID : 22, 이름 : "2-2-1 확인"},
{id : 222, PID : 22, 이름 : "2-2-2-2-2"},
{ID : 23, PID : 2, 이름 : "2-13 확인"}}
];
$ (document) .ready (function () {
$ .fn.ztree.init ($ ( "#treedemo"), 설정, znodes);
});
oncheck (e, treeid, treenode) {
var treeobj = $. fn.ztree.getztreeobj ( "treedemo"),
노드 = treeobj.getCheckedNodes (true),
v = "";
for (var i = 0; i <nodes.length; i ++) {
v + = 노드 [i] .name + ",";
경고 (노드 [i] .id); // 선택한 노드의 값을 가져옵니다
}
}
//->
</스크립트>
</head>
<body>
<div>
<ul id = "treedemo"> </ul>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.