jQuery의 zTree 플러그인
jQuery의 zTree 플러그인
키 코드
@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
@include file="/context/mytags.jsp" %>
DOCTYPE html >
<html>
<head>
<title> title>
<t:base type="jquery">t:base>
<link rel="stylesheet" type="text/css" href="plug-in/ztree/css/metroStyle.css">
<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js">script>
<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.excheck-3.5.min.js">script>
<script type="text/javascript">
var setting = {
check: {
enable: false,//
chkboxType: {"Y": "", "N": ""}
},
data: {
simpleData: {
enable: true
}
},
callback: {
onExpand: zTreeOnExpand
}
};
//
function zTreeOnExpand(event, treeId, treeNode) {
var treeNodeFuncId = treeNode.id;
$.post(
'whiteListController.do?getMenuInfo',
{parentFuncId: treeNodeFuncId},
function (data) {
var d = $.parseJSON(data);
if (d.success) {
var dbDate = eval(d.msg);
var tree = $.fn.zTree.getZTreeObj("menuSelect");
if (!treeNode.zAsync) {
tree.addNodes(treeNode, dbDate);
treeNode.zAsync = true;
} else {
tree.reAsyncChildNodes(treeNode, "refresh");
}
}
}
);
}
// level 1
$(function () {
$.post(
'whiteListController.do?getMenuInfo',
function (data) {
var d = $.parseJSON(data);
if (d.success) {
var dbDate = eval(d.msg);
$.fn.zTree.init($("#menuSelect"), setting, dbDate);
}
}
);
});
script>
head>
<body style="overflow-y: auto" scroll="no">
<ul id="menuSelect" class="ztree" style="margin-top: 30px;">ul>
body>
html>jsp 코드 해독
1.\"\"은(는) 필수입니다.
DOCTYPE html >2. zTree 컨테이너className "ztree"로 설정
<ul id="menuSelect" class="ztree" style="margin-top: 30px;">ul>3. 그리고 js 부분을 본다
3.1 페이지 초기화 실행 코드
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);init zTree ， zTree
1、 W3C ， ：。
2、 jquery-1.4.2.js jQuery 。
3、 jquery-ztree.core-3.0.js， checkbox / radio jquery-ztree.exedit-3.0.js jquery-ztree.excheck-3.0.js 。
4、 zTreeStyle.css zTreeStyle img 。
5、 Demo。
6、 zTree class="ztree"， "ztree" className， ， css ， ， 。이 init 메소드 매개변수 설명(obj, zSetting, zNodes) 세 매개변수
objjQuery Object
zTree DOM
zSettingJSON
zTree ， “setting ”
zNodesArray(JSON) / JSON
zTree ， “treeNode ”
1、v3.x ， ，
2、 ， null [ ]
3、 ， setting.data.simpleData
JSON
zTree ， zTree ， js zTree
， $.fn.zTree.getZTreeObj 3.2 노드 전개 실행 방법 즉 setting에 설정된 콜백 함수 zTreeOnExpand
이 리셋 함수는 모두 세 개의 매개 변수(event,treeId,treeNode)가 있다
매개변수 설명
eventjs event
js event
treeIdString
zTree treeId，
treeNodeJSON
JSON 전개된 노드 json 대상은 이 노드 id를 얻을 수 있으며 백엔드에 전송하여 이 노드가 부모 노드(즉 하위 노드가 있는지 여부)를 판단하고 하위 노드가 있으면 백엔드에서 조회한 하위 노드 정보는 백엔드에서 받은 후ddNodes 방법으로 하위 노드를 추가합니다.또는 ReAsyncChildNodes 방법을 통해 부모 노드의 하위 노드를 비동기적으로 불러오기(parentNode,reloadType,isSilent,callback)
addNodes 메소드 매개변수 설명(parentNode, [index], newNodes, isSilent)
parentNodeJSON
， ， parentNode null 。
zTree
[index]Number
（ 0 ）
index = -1 ，
v3.5.19+
newNodesJSON / Array(JSON)
JSON ， zTree ， “treeNode ”
1、v3.x ， ，
2、 ， setting.data.simpleData
isSilentBoolean
。
isSilent = true ， ， 。
Array(JSON)
zTree
newNodes JSON， Array
： newNodes clone ， ！reAsyncChildNodes 메소드 매개변수 설명(parentNode,reloadType,isSilent,callback)
parentNodeJSON
JSON
1、parentNode = null ， Root
2、parentNode.isParent = false ，
3、 zTree
reloadTypeString
reloadType = "refresh" 。
reloadType != "refresh" ， 。
isSilentBoolean
。
isSilent = true ， ， 。
callbackfunction
。
java 코드 해독
/**
*
* @param request
* @return
*/
@RequestMapping(params = "getMenuInfo")
@ResponseBody
public AjaxJson getMenuInfo(HttpServletRequest request) {
AjaxJson j = new AjaxJson();
String parentFuncId = request.getParameter("parentFuncId");
CriteriaQuery cq = new CriteriaQuery(TSFunction.class);
if (parentFuncId != null) {
cq.eq("TSFunction.id", parentFuncId);
} else {
cq.eq("functionLevel", Short.valueOf("0"));
}
cq.addOrder("functionOrder", SortDirection.asc);
cq.add();
// HQL
cq = HqlGenerateUtil.getDataAuthorConditionHql(cq, new TSFunction());
cq.add();
List functionList = systemService.getListByCriteriaQuery(cq, false);
Collections.sort(functionList, new NumberComparator());
List 이 방법은 데이터 테이블에서 메뉴 정보를 조회하여 json으로 프론트에 전송하는 것이다.
parentFuncId가 비어 있을 때 초기에 조회하는 것은 1급 메뉴입니다. 비어 있지 않을 때 프론트에서 어떤 노드를 클릭하면 이 노드 id를 백엔드에 전송하고 이 노드 아래의 하위 노드 정보를 json으로 전송합니다.
이렇게 해봐도 복잡하지 않으니 다음은 Vue를 통해서.js 로드 트리.
효과:https://refined-x.com/Vue-Giant-Tree/
소스:https://github.com/tower1229/Vue-Giant-Tree
감사
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
