jQuery tree selection plugin (original work)
Last updated: 2019-8-26 16:43:14
Changelog:Added a random UUID function to resolve ID conflicts when generating multiple trees on one page
1 2 3 4 5 6 7 8 9 | uuid() { var s = []; var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; for (var i = 0; i < 8; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x30), 1); } var uuid = s.join(""); return uuid;}, |
Line 126: ids ===> uuid+ids
Line 129: ids ===> uuid+ids
Line 133: ids ===> uuid+ids
Last updated: 2019-7-17 11:43:03
Changelog:
Added:ICO icons: You can use your own (Alibaba Iconfont) or a UI framework
The data object only supports name, id, checked, open, ico, children, and cascade. The open property determines whether the node is expanded.
ico can be an ICO image or icon-sousuo. Example: <i class="iconfont icon-sousuo"></i> (Only 3 test icons were added for simplicity.)
ico can use the icons from your own UI framework. Example: <i class="ivu-icon ivu-icon-ios-add-circle"></i>
The value ivu-icon ivu-icon-ios-add-circle is from the iView UI framework.
The value must include the prefix used by your UI framework. (If you're unsure, press F12 and copy all the values in the class attribute.)
Last updated: 2019-7-4 20:32:51
Changelog:Fixed an issue where clicking a second-level menu could cause all items to become selected or deselected.
Modified the recursive function after line 108 in the JS file.
Add var ids = 0; Change '<input id="' + data[i].id + '" to '<input id="' + ids + '". Modify the for attribute in the label in the same way.
After the modification, selection no longer depends on the id.
Published: 2019-07-03 22:46:44
IE is not supported
Position where the tree is generated. data contains the tree data, and arrs contains the selected IDs (optional).
arrsOptional. Can be left empty. If provided, it must be an array.
dataOnly name, id, checked, open, children, and cascade are supported in the data object. All other properties are unnecessary.
The open property determines whether the node is expanded.
cascade determines whether parent-child selection is linked (cascade must be specified in the top-level parent to take effect).
1 2 3 4 5 6 7 8 | $(".tree").tree(data, arrs);//leg(".tree").tree(data,arrs);//leg is equivalent to $// Get selected IDs$("#demo").on("click", () => { alert($.getCheckedNodes())})console.log($.getCheckedNodes())//console.log(leg.getCheckedNodes()) |