Ztree plug-in Setting configuration detailed _ztree

Source: Internet
Author: User

Turn from: http://blog.csdn.net/erlianying/article/details/53940967

I. Ztree setting Configuration Detailed

var setting = {treeid: "",//ztree unique identification, is equal to the id attribute value of the user-defined Ztree container after initialization.
Do not initialize or modify, internal parameters.
Treeobj:null,//ztree container's JQuery object, main function: easy to operate.
Do not initialize or modify, internal parameters.


Async: {//whether asynchronous loading is equivalent to Ajax
Autoparam: [],//You can set the name of the parameter at the time of submission, such as Server only accept zId: ["Id=zid"]; Default Value Empty
ContentType: "Application ...",
Datafilter:null,
DataType: "Text",
enable:false,//set Ztree whether to turn on asynchronous load mode
Default value: False
Otherparam: [],//other parameters; make key-value pairs directly in JSON format, for example: {key1:value1, key2:value2}
Type: "POST",//Request mode
URL: ""//Path
},
Callback: {//return function; Select the appropriate listening event///The following event as required the default authoritative NULL event example see line 83rd
beforeasync:null,//the event callback function before the asynchronous load, Ztree determines whether to allow asynchronous loading based on the return value

beforecheck:null,//Check or uncheck the previous event callback function and determine whether the check or uncheck is allowed based on the return value

beforeclick:null,//the event callback function before the node, and determines whether the click is allowed based on the return value

beforecollapse:null,//the event callback function before the parent node collapses and determines whether the collapse operation is allowed based on the return value

beforedblclick:null,//Ztree the event callback function before the mouse double-click, and determines the triggering OnDblClick event callback function based on the return value

The beforedrag:null,//node is dragged before the event callback function and determines whether the drag-and-drop operation is allowed based on the return value

beforedragopen:null,//dragging a node to the collapsed state's parent node, the event callback function before the parent node is automatically expanded, and based on the return value, determines whether the automatic expand operation is allowed

The beforedrop:null,//node drags the event callback function before the end of the operation, and determines whether the drag operation is allowed based on the return value

The Click event of the beforeeditname:null,//node Edit button and determines whether to allow entry to the name edit state based on the return value

beforeexpand:null,//the event callback function before the parent node is expanded, and determines whether to allow the unwind operation based on the return value

beforemousedown:null,//Ztree the mouse button presses the previous event callback function and determines the triggering OnMouseDown event callback function based on the return value

Beforemouseup:null,//ztree the event callback function before the mouse button is released, and the trigger OnMouseUp event callback function is determined based on the return value

The event callback function before the beforeremove:null,//node is deleted and determines whether the delete operation is allowed based on the return value

The event callback function before the node name data is updated after the beforerename:null,//node edits the name end (Input loses focus or presses the Enter key), and determines whether the action to change the name is allowed based on the return value

beforerightclick:null,//Ztree the event callback function before clicking on the right mouse button, and the triggering Onrightclick event callback function is determined based on the return value

onasyncerror:null,//Asynchronous Load event callback function with exception error

onasyncsuccess:null,//an event callback function that asynchronously loads the normal end

oncheck:null,//Checkbox/radio The event callback function that is checked or unchecked

onclick:null,//node-clicked event callback function

oncollapse:null,//node-collapsed event callback function

ondblclick:null,//the event callback function after the mouse double-clicks on Ztree

ondrag:null,//node Drag-and-drop event callback function

The event callback function that is moved during the ondragmove:null,//node is dragged

ondrop:null,//the event callback function at the end of a node drag operation

The event callback function that the onexpand:null,//node is expanded

onmousedown:null,//the event callback function when the mouse button is pressed on the Ztree

onmouseup:null,//Ztree Event callback function when the mouse button is released

Event callback function after onnodecreated:null,//node generates DOM

onremove:null,//the event callback function after the node is deleted.

The onrename:null,//node edits the event callback function after the name ends.

onrightclick:null//the event callback function after the right mouse button clicks on the Ztree
},
Nodes check or cancel an event
function Ztreeoncheck (event, Treeid, TreeNode) {
Alert (Treenode.tid + "," + Treenode.name + "," + treenode.checked);
};
var setting = {
Callback: {
Oncheck:ztreeoncheck
}
};
Function parameter Description
Parameter data type description
Event JS Event object Standard JS Event object
Treeid String corresponds to Ztree's Treeid for easy user control
TreeNode JSON is checked or unchecked node JSON data object


Setting parameter configuration explain continue ...
Check: {//Set whether the Ztree can be checked and the parameter configuration checked
autochecktrigger:false,//whether the Beforecheck/oncheck event callback function is triggered when automatic association check is set. [setting.check.enable = True and Setting.check.chkStyle = "checkbox" takes effect]


Chkboxtype: {"Y": "PS", "N": "PS"},//checkbox for Parent-Child Node Association. [setting.check.enable = True and Setting.check.chkStyle = "checkbox" takes effect]


Chkstyle: "checkbox",//CheckBox type (checkbox or radio) [Effective when setting.check.enable = True]


enable:false,//whether the Checkbox/radio is displayed on the Ztree node
Default value: False


nocheckinherit:false//sets whether the child node automatically inherits Nocheck = True when the parent node sets Nocheck = True. [Effective when setting.check.enable = True]


chkdisabledinherit:false//sets whether the child node automatically inherits Chkdisabled = True when the parent node sets chkdisabled = True. [Effective when setting.check.enable = True]


Radiotype: The group scope of the "level"//radio. [setting.check.enable = True and Setting.check.chkStyle = "Radio" takes effect]
},
Data: {//Very important
Keep: {///child node and parent node property setting default values are all False
Leaf:false,//ztree node leaf node property lock, whether to always keep Isparent = False


Parent:false//ztree Node Parent Property Lock, whether to always keep Isparent = True
},
Key: {//Node data
Checked: "Checked", the name of the property in the//ztree node data that holds the check state.


Children: "Children", the name of the property that holds the child node data in the//ztree node data.


Name: "Name", the//ztree node data holds the name of the property of the node name.


Title: "" The//ztree node data holds the attribute name of the node's hint information. [Effective when setting.view.showTitle = True]


URL: "url"//setting Ztree the TreeNode Xurl property as the target URL of the node link when the node is displayed
},
Simpledata: {
enable:false,//determines whether the node data at Ztree initialization, the node data at asynchronous load, or the Newnodes data entered in the AddNodes method is in simple data mode (Array)


Idkey: "id",///node data holds the name of the property uniquely identified. [Effective when setting.data.simpleData.enable = True]


PIDKEY: "PId",///node data holds the name of the property whose parent node is uniquely identified. [Effective when setting.data.simpleData.enable = True]


rootpid:null//is used to correct the parent node data of the root node, that is, pidkey the specified property value. [Effective when setting.data.simpleData.enable = True]
}
},
Edit: {//Can be edited node: Delete and modify
Drag: {
autoexpandtrigger:true,//the parent node automatically expands to trigger the Onexpand event callback function when the drag is dragged. [Effective when setting.edit.enable = True]


When iscopy:true,//drag, set whether the node is allowed to replicate. [Effective when setting.edit.enable = True]


When ismove:true,//drag, set whether the node is allowed to move. [Effective when setting.edit.enable = True]


Prev:true,//Drag to the target node, set whether to allow the operation to move to the front of the target node. [Effective when setting.edit.enable = True]


Next:true,//Drag to the target node, set whether to allow the operation to move to the back of the target node. [Effective when setting.edit.enable = True]


Inner:true,//Drag to the target node, the setting is allowed to be the child node of the target node. [Effective when setting.edit.enable = True]


bordermax:10,//drag-and-drop node to the root node in the tree within the Boundary Range (unit: PX). [Effective when setting.edit.enable = True]


Bordermin: -5,//Drag the node to the root node when the outer boundary range (in px). [Effective when setting.edit.enable = True]


minmovesize:5,//determines whether the minimum displacement value (in px) of the drag operation is determined. [Effective when setting.edit.enable = True]


maxshownodenum:5,//the maximum number of nodes to be displayed in a floating layer when dragging multiple sibling nodes. Redundant nodes with ... Replace. [Effective when setting.edit.enable = True]


autoopentime:500//the parent node automatically expands the delay interval when dragging. (Unit: MS) [Effective when setting.edit.enable = True]

},
Editnameselectall:false,
enable:false,//set Ztree is in edit state, True/false can/cannot be edited separately

Removetitle: "Remove",//Delete button Title auxiliary information. [setting.edit.enable = True & setting.edit.showRemoveBtn = True when effective]

Renametitle: "Rename",//Edit title auxiliary information for Name button. [setting.edit.enable = True & setting.edit.showRenameBtn = True when effective]

showremovebtn:true,//whether the Delete button is displayed. [Effective when setting.edit.enable = True]

showrenamebtn:true//sets whether the Edit Name button is displayed. [Effective when setting.edit.enable = True]

},
View: {
adddiydom:null,//for fixed display of user custom controls on a node

addhoverdom:null,//is 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

When autocancelselected:true,//clicks on the node, press Ctrl or the CMD key to allow the deselect operation to be canceled.

dblclickexpand:true,//whether the identity of the parent node is automatically expanded when you double-click the node

Expandspeed: "Fast",//ztree the animation speed when the node expands, collapses, sets the method with the JQuery animation effect speed parameter.

Fontcss: {},//personalized text style, only for Ztree <A> objects that are displayed on the node.

nameishtml:false,//sets whether the Name property supports HTML scripts

removehoverdom:null,//is used to hide user-defined controls when the mouse is moved out of the node, displaying the edit, delete button inside the hidden state with the Ztree

The selectedmulti:true,//setting allows multiple nodes to be selected at the same time.

showicon:true,//Sets whether Ztree displays the icon for the node.

showline:true,//Sets whether Ztree displays the lines between nodes.

showtitle:true,//Sets whether Ztree displays the node's title hint (that is, the node DOM's title property).

txtselectedenable:false//Sets whether Ztree allows you to select text within the Ztree DOM.
}

}


More please check: http://www.treejs.cn/v3/main.php#_zTreeInfo

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.