A summary of the common functional characteristics of the infinite tree jquery plugin ztree _jquery

In fact, Ztree official website has a detailed API documentation, all the official online instructions, I just combine the practice of summarizing a few commonly used ztree features.

(The syntax structure of Ztree is based on key-value configuration)

1: Support for asynchronous load data

Syntax configuration:

Async: {
enable:true, 

url: ' abc.ashx ',

otherparam: {' request ': ' Requestname '}

}

Brief description:

Enable: Sets whether the asynchronous load mode is turned on Ztree.

Url:ajax gets the URL address of the data.

The Otherparam:ajax request submits a static parameter key value pair. Equivalent to the data parameter in Ajax.

2: Loading data and binding , is generally defined as a data structure entity that model, this data structure to include a hierarchical relationship usually includes: ID, parent id,name.

Then configure the syntax:

Data: {
simpledata: {
enable:true
}
}

Or

Data: {
key: {
children: ' Childrens ',

checked: ' ischecked '
}
}

Brief description:

Simpledata: You can bind an array as a data source. The data that is loaded asynchronously can be a parallel structure.

Children: Specifies the name of the property in the node data that holds the child node data, at which time the data that is loaded asynchronously is the collapsed structure of the tree, so a recursive algorithm is used to load the data back.

3: Support the radio, check function

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 Ztree node

Chkstyle: Checked box type (checkbox or radio)

Group Range of Radiotype:radio

Chkboxtype: Check checkbox for parent-Child Node Association relationship

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

4: Support to add child nodes, edit nodes, delete node events

I'm here to explain how to use custom add, edit, 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 + ") ' > Delete node </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 is moved over a node, displaying the edit, delete button inside the hidden state with the Ztree

Removehoverdom: Used to hide user-defined controls when the mouse is moved out of the node, showing the hidden state of the edit, delete button inside the Ztree