무한 트리 Jquery 플러그인 zTree_jquery의 일반적인 기능 및 특징 요약

사실 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 내부의 편집 및 삭제 버튼과 동일합니다.