사실 Ztree 공식 웹사이트에는 이미 자세한 API 문서가 있습니다. 모든 것은 공식 웹사이트의 지침에 따릅니다. 저는 단지 실습을 바탕으로 일반적으로 사용되는 몇 가지 ztree 기능을 요약했을 뿐입니다.
(ztree의 구문 구조는 키-값 구성을 기반으로 함)
1: 비동기 데이터 로딩 지원
구문 구성:
async: { enable: true, url:'abc.ashx', otherParam: { "request": "requestname" } }
간단한 설명:
enable: zTree가 비동기 로딩 모드를 활성화할지 여부를 설정합니다.
url: Ajax가 데이터를 얻기 위한 URL 주소입니다.
otherParam: Ajax 요청에 의해 제출된 정적 매개변수 키-값 쌍. ajax의 데이터 매개변수와 동일합니다.
2: 데이터 로드 및 바인딩. 일반적으로 데이터 구조 엔터티는 계층적 관계를 포함해야 하며 일반적으로 ID, 상위 ID, 이름을 포함합니다.
그런 다음 구문을 구성합니다.
data: { simpleData: { enable: true } }
또는
data: { key: { children: "childrens", checked: "IsChecked" } }
간단한 설명:
simpleData: 배열을 데이터 소스 바인딩으로 사용할 수 있습니다. 이때 비동기적으로 로드되는 데이터는 병렬 구조일 수 있습니다.
children: 노드 데이터에 자식 노드 데이터를 저장할 속성 이름을 지정합니다. 이때 비동기적으로 로드되는 데이터는 트리의 접힌 구조이므로 백엔드에서 데이터를 로드할 때 재귀 알고리즘을 사용해야 합니다.
3: 단일 선택 및 확인 기능 지원
구문 구성:
check: { enable: true, chkStyle: "checkbox", radioType: "all" chkboxType:{ "Y": "", "N": "" } }, data: { key: { checked: "IsChecked" } }
간단한 설명:
활성화: zTree 노드에 체크박스/라디오 표시 여부를 설정합니다
chkStyle: 체크박스 유형(체크박스 또는 라디오)
radioType:라디오 그룹화 범위
chkboxType: 상위 노드와 하위 노드 간의 관계에 대한 확인란을 선택하세요
checked: 데이터를 로드한 후 확인란이 선택되었는지 나타냅니다. IsChecked는 백엔드 데이터 구조 모델에 정의된 필드입니다.
4: 하위 노드 추가, 노드 편집, 노드 이벤트 삭제 지원
버튼 추가, 편집, 삭제를 사용자 정의하는 방법을 소개하겠습니다
구문 구성:
view: { addHoverDom: addHoverDom, removeHoverDom: removeHoverDom }
addHoverDom 함수는 다음과 같습니다.
function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); if ($("#addBtn_" + treeNode.id).length > 0) return; var str= "<a id='addBtn_" + treeNode.id + "' onclick='自定义函数1(" + treeNode.DepartmentID + ")'>添加子节点</a>"; str+= "<a id='addBtn1_" + treeNode.id + "' onclick='自定义函数2(" + treeNode.DepartmentID + ")'>编辑节点</a>"; str+= "<a id='addBtn2_" + treeNode.id + "' onclick='自定义函数3(" + treeNode.DepartmentID + ")'>删除节点</a>"; sObj.after(str); };
removeHoverDom 기능은 다음과 같습니다.
function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.id).unbind().remove(); $("#addBtn1_" + treeNode.id).unbind().remove(); $("#addBtn2_" + treeNode.id).unbind().remove(); };
간략한 설명:
addHoverDom: 마우스가 노드로 이동할 때 사용자 정의 컨트롤을 표시하는 데 사용됩니다. 숨겨진 상태는 zTree 내부의 편집 및 삭제 버튼과 동일합니다.
removeHoverDom: 마우스가 노드 밖으로 이동할 때 사용자 정의 컨트롤을 숨기는 데 사용됩니다. 숨겨진 상태는 zTree 내부의 편집 및 삭제 버튼과 동일합니다.