Bootstrap-treeview double-click event custom implementation, bootstraptreeview

Source: Internet
Author: User

Bootstrap-treeview double-click event custom implementation, bootstraptreeview

Bootstrap-treeview is a very cool jQuery Multi-Level list tree plug-in based on bootstrap. Based on Twitter Bootstrap, The jQuery plug-in displays some inherited tree structures, such as view trees and list trees, in a simple and elegant manner. But I don't know why this plug-in does not have a double-click event.

After multiple tests, I used $ ('# tree '). dblclick (function () {}) and method $ ('# tree '). on ('dblclick', function () {}) does not work! Think twice about it. Finally, the rescue team solved the problem, but it seemed not very elegant, but it was still possible to deliver the problem.

The bootstrap-treeview built-in events "nodeSelected" and "nodeUnselected" are used in this solution ". double-click on the treeview node will trigger the selected event and cancel the selected event. Calculating the time interval between the two events can simulate the double-click event effect. The interval between double-click events and clicking the left mouse button each time. manual operation is 300 milliseconds.

The Code is as follows:

<! DOCTYPE html> 

The effect is as follows:

Rough filtering explanation:

Major global variables:

LastSelectedNodeId, lastSelectedNodeId

The main method is as follows:

ClickNode ()

The above method is used to determine whether the selected event and the target for canceling the selected event operation are one and whether the time interval is small enough. If the two conditions are met, the customer wants to trigger the double-click event. You can use customBusiness to customize the business logic.

 

The final description: I am not the best solution and can communicate with each other. I would like to thank the cool guys from our company.

Additional Resource address:

JQuery: http://jquery.com/

Bootstrap: http://v3.bootcss.com/

Bootstrap-treeview: http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

 

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.