Jquery easyui tree menu call click event example

Source: Internet
Author: User

After turning over the api documentation, it seems that similar click events and demo examples are not found.
So I want to write my own amount. It was like this at the beginning:

The code is as follows:

$ ("# Munes ul li"). live ("click", function (){
Alert (1)
});

I found it useless. I used jquery easyui 1.4.1 and changed it to another one. Okay, I found the correct answer after Baidu:

The code is as follows:

$ ("# Munes ul"). tree ({
OnClick: function (node ){
Alert (node)
                }
});

Node contains all the menu information you need. You can do whatever you want.
-------------
Tree of the tree menu control in Jquery EasyUI is hidden by default:
There is a state in the node attribute. The default value is "open". You can set it to "closed" when uploading data.
Similar

The code is as follows:
{
"Text": "ages ",
"State": "closed ",
"Children ":[{
"Text": "Java"
},{
"Text": "C #"
}]
}

----------
Double-click the tree menu to show the hidden sub-menu code:

The code is as follows:
$ ("# Munes ul"). tree ({
OnClick: function (node ){
If (node. attributes. url! = "Javascript:;") addTab (node. text, node. attributes. url );
},
OnDblClick: function (node ){
$ (This). tree (node. state = 'closed '? 'Expand': 'collapse', node.tar get );
Node. state = node. state = 'closed '? 'Open': 'closed ';
              }
});

Note the double-click event

Tree menu to determine whether it is a subnode:

The code is as follows:
$ ('# TT'). tree ({
OnClick: function (node ){
If({('{tt'}.tree('isleaf', node.tar get) {// Determine whether the node is a leaf node.
}
}
});

----------
Appendix:
OnClick
When a user clicks a node, the node parameter includes the following attributes:
Id: Node id.
Text: the text displayed on the node.
Checked: whether the node is selected.
Attributes: custom attribute of a node.
Target: The target DOM object to be clicked.
OnDblClick node is triggered when you double-click a node.
OnBeforeLoad node. param is triggered before the request loads data. If it is returned, false is used to cancel loading.
OnLoadSuccess node, triggered when data is loaded successfully.
OnLoadError arguments is triggered when data loading fails. The arguments parameter is the same as the 'error' function of jQuery. ajax.
OnBeforeExpand node is triggered before the node is opened. If it is set to false, the node is disabled.
OnExpand node is triggered when the node is opened.
OnBeforeCollapse node is triggered before the node is closed. If it returns false, the node is disabled.
OnCollapse node is triggered when the node is closed.
OnCheck node, checked triggered when the user clicks the check box.
OnBeforeSelect node is triggered before the node is selected. If it returns false, the node is deselected.
OnSelect node is triggered when a node is selected.
OnContextMenu e is triggered when the node is right-clicked.
OnDrop target, source, and point are triggered when the node location is changed (dragged.
Target: DOM object, the target node to be dragged.
Source: The original node.
Point: specifies the drag mode. Optional values: 'append', 'top', or 'bottom '.
OnBeforeEdit node is triggered before the node is edited.
OnAfterEdit node is triggered after the node is edited.
OnCancelEdit node is triggered when the edit is canceled.

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.