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