Infinite tree Jquery plug in zTree common features summary

In fact, there are detailed API documents on the official website of Ztree, and all instructions on the official website shall prevail. Here, I just summarize several commonly used functional features of Ztree in combination with practice.

(the syntax structure of ztree is based on the form configuration of key-value)

Syntax configuration:

async: {
enable: true, 

url:'abc.ashx',

otherParam: { "request": "requestname" }

}

Brief description:

Enable: sets whether zTree is in asynchronous load mode.

Url: the url address of the data retrieved by Ajax.

OtherParam: static parameter key-value pair submitted by Ajax request. Equivalent to data parameter in Ajax.

2: load the data and bind it Generally, it is the definition of the data structure entity, namely the model, which contains the hierarchical relationship, usually including :ID, parent ID,Name.

Then configure the syntax:

data: {
simpleData: {
enable: true
}
}

or

data: {
key: {
children: "childrens",

checked: "IsChecked"
}
}

Brief description:

SimpleData: you can use an array as a data source binding. The data loaded asynchronously can be in a parallel structure.

Children: specify the attribute name of the child node data to be stored in the node data. At this time, the asynchronously loaded data is the collapsed structure of the tree. So when the backend loads the data, it USES a recursive algorithm.

Syntax configuration:

check: {
enable: true,
chkStyle: "checkbox",
radioType: "all"
chkboxType:{ "Y": "", "N": "" }
},

data: {
key: {

checked: "IsChecked"
}
}

Brief description:

Enable: sets whether the checkbox/radio is displayed on the node of zTree

ChkStyle: checkbox or radio

RadioType: the grouping range of radio

ChkboxType: check the checkbox's relationship to the parent node

Checked: checks the box after the data is loaded.IsChecked is a field defined in the back-end data structure model.

How can I customize add, edit, and delete buttons

Syntax configuration:

view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
　}

Where, the addHoverDom function is:

function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_" + treeNode.id).length > 0) return;
var str= "<a id='addBtn_" + treeNode.id + "' onclick=' Custom function 1(" + treeNode.DepartmentID + ")'> Add child node </a>";
str+= "<a id='addBtn1_" + treeNode.id + "' onclick=' Custom function 2(" + treeNode.DepartmentID + ")'> Edit node </a>";
str+= "<a id='addBtn2_" + treeNode.id + "' onclick=' Custom function 3(" + treeNode.DepartmentID + ")'> Remove nodes </a>";
sObj.after(str);
};

Where the removeHoverDom function is:

function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
$("#addBtn1_" + treeNode.id).unbind().remove();
$("#addBtn2_" + treeNode.id).unbind().remove();
　};

Brief description:

AddHoverDom: used to display user-defined controls when the mouse moves over a node, and to display hidden state and edit and delete buttons inside zTree

RemoveHoverDom: used to hide user-defined controls when the mouse moves out of the node, and to show the hidden state as well as the edit and delete buttons inside zTree