Summary of common functions and features of the infinite tree Jquery plug-in zTree, jqueryztree

Summary of common functions and features of the infinite tree Jquery plug-in zTree, jqueryztree

In fact, the Ztree official website already has a detailed API documentation. Everything is subject to the instructions on the official website. Here I will summarize several common features of ztree in combination with practices.

(The ztree syntax structure is configured in key-value format)

1: supports asynchronous data loading.

Syntax Configuration:

async: {enable: true, url:'abc.ashx',otherParam: { "request": "requestname" }}

Brief description:

Enable: sets whether the asynchronous loading mode is enabled for the zTree.

Url: URL of the data obtained by Ajax.

OtherParam: the static parameter key-Value Pair submitted by the Ajax request. It is equivalent to the data parameter in ajax.

2: load and bind dataGenerally, the data structure entity is defined, that is, the model. The data structure must contain hierarchical relationships, including ID, parent ID, and Name.

Then configure the Syntax:

data: {simpleData: {enable: true}}

Or

data: {key: {children: "childrens",checked: "IsChecked"}}

Brief description:

SimpleData: You can bind arrays as data sources. In this case, the asynchronously loaded data can be in a parallel structure.

Children: Specifies the name of the attribute for storing the child node data in the node data. The data asynchronously loaded is the collapsed structure of the tree. Therefore, recursive algorithms are used when loading data at the backend.

3: single choice and check are supported.

Syntax Configuration:

check: {enable: true,chkStyle: "checkbox",radioType: "all"chkboxType:{ "Y": "", "N": "" }},data: {key: {checked: "IsChecked"}}

Brief description:

Enable: Set whether checkbox/radio is displayed on the zTree node.

ChkStyle: check box type (checkbox or radio)

RadioType: the range of radio groups.

ChkboxType: Check the relationship between checkbox and parent and child nodes.

Checked: whether to check the check box after loading data. IsChecked is the field defined in the backend data structure model.

4: You can add subnodes, edit nodes, and delete node events.

Here we will introduce how to use the custom add, edit, and delete buttons.

Syntax Configuration:

view: {addHoverDom: addHoverDom,removeHoverDom: removeHoverDom　}

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 = 'udf 1 (" + treeNode. departmentID + ") '> Add sub-nodes </a>"; str + = "<a id = 'addbtn1 _" + treeNode. id + "'onclick = 'User-Defined Function 2 (" + treeNode. departmentID + ") '> edit node </a>"; str + = "<a id = 'addbtn2 _" + treeNode. id + "'onclick = 'udf 3 (" + treeNode. worker mentid + ") '> delete a node </a>"; sObj. after (str );};

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 you move the cursor over a node. It displays the edit and delete buttons in the same hidden state as those in the zTree.

RemoveHoverDom: used to hide user-defined controls when the mouse moves out of a node, and display the edit and delete buttons in the same hidden state as that in the zTree.

How to add a background color to the node using the jquery tree plug-in ztree

<Div id = "Tree"> <li your own tag/> </div>

$ (Function (){
$ ("# Tree" ).css ("background ","####")
})

Question about creating a tree menu with ztree of jQuery

This should not be difficult .. Go to the directory tree example of the next Dtree on the Internet (if you cannot find it, I can send it to you ). Upload a list in the background. The object saved in this list has a list attribute of the subnode. After processing in the background, use the c label on the foreground to traverse the list. You can control the node of the tree based on varstatus. index.