JQuery Tree Multiselect Usage Details, jquerymultiselect

JQuery Tree Multiselect Usage Details, jquerymultiselect

The usage of the Tree-type permission management plug-in jQuery Tree Multiselect is as follows:

1. Understanding jQuery Tree Multiselect

This plug-in allows you to select a checkbox to display the list in a tree. It is mostly used for permission management to assign different permissions. Reference: https://github.com/patosai/tree-multiselect.js

2. Runtime Environment

2.1. jquery. v1.8 + and jquery ui. js 2.2 must be introduced. They can only be run in IE8 or later versions.

3. Presentation:

In assigning permissions to a role, there are two buttons in the Operation bar: Modify and authorize

Click "authorize ".

Intuitive menu display:

Option ID on the right:

4. Usage and parameter description

4.1 Initialization Method: $ ("select"). treeMultiselect (); 4.2. select the attribute name and use:

Selected:When you add the selected Attribute to option, that is, <option value = "monitor_index" selected> homepage </option>, the check box is selected by default;
Data-section:That is, when the data-section attribute is added to option, the parent-child hierarchy is displayed:

'<Option value = "monitor_index" data-section = "Tourism Management" data-description = "homepage description" selected> homepage </option>' + '<option value = "manage_logs "data-section =" Tourism Management "data-description =" user log description "selected> User Information </option> '+' <option value =" interface_logs "data-section = "Tourism Management" data-description = "interface call log description" selected> hotel information </option> '+' <option value = "abnormal_logs" data-section = "Tourism Management"> travel information </option> '+' <option value = "empty_logs" data-section = "Tourism Management"> Scenic Spot Information </option>'

Data-description:That is, when the data-description attribute is added to option, an icon in the format of question mark is displayed after the check box. Place the cursor over the icon to display the description information,

Data-index:That is, when you add the data-index attribute to option, it is mainly used to display the order of option options. The most intuitive performance can be observed in the right div area.

Set "Homepage": data-index = 3, "user information": data-index = 2, "hotel information": data-index = 1, sorting on the right
The option is also selected.

In addition, by setting data-section = "Interface Test/interface application/interface filter", you can set multi-level display effects,

4.3 Parameter Details

Params is an object. You can add different parameters to treeMultiselect (params) to achieve different effects:
Usage example: $ ("# authorifyselect"). treeMultiselect ({searchable: true, startCollapsed: false });
Parameters:Searchable, collapsible, hideSidePanel, onChange, startCollapsedIt is common and important. You can add other parameters as needed.

AllowBatchSelection:Used to display and hide the check boxes of the parent menu. If the default value is true, the check box appears in front of the parent menu and the selected list appears on the right;

When it is set to false, there is no check box before the parent menu,

Collapsible:Set the expansion and scaling of the parent menu.

If the default value is true, a small horizontal line is displayed in front of the parent menu, which can be scaled;

If it is set to false, there is no small horizontal line before the parent menu, that is, it cannot be scaled;

EnableSelectAll,Any options are supported. The default value is false;
If it is set to true, the "Select All" and "Unselect All" options are displayed to enable the full and Unselect functions,

SelectAllText,Optional;
UnselectAllText,If enableSelectAll is available, select none;
Freeze. The default value is false, indicating that the option is disabled. If it is set to true, the effect is

HideSidePanel:Hide the option panel on the right. The default value is false, indicating that the option panel is not hidden. If it is set to true, the option panel is hidden;
OnChange: The default value is null, indicating the callback function triggered when the option is selected. The default value includes four parameters (text: attribute text, value: value, initialIndex, section)

$("#authorifyselect").treeMultiselect({ onChange: function(text, value, initialIndex, section) { console.log(text); console.log(value); console.log(initialIndex); console.log(section);} });

Output results when I click an option

That is, text will output information about all selected check boxes. value will output information about the check boxes you clicked at the time. The initialIndex and section values are empty here.
OnlyBatchSelection:Only partial check is performed, and only false is allowed.
Sortable:The default value is false. If it is set to true, the selected options can be sorted by dragging (jQuery UI is required );
Searchable,The default value is false. If it is set to true, a search box is displayed at the top of the menu for quick search. Effect

SearchParams:['Value', 'text', 'description', 'detail'] is used to set search settings.
SectionDelimiter:Data-section = "value1/value2/value3". You can use "/" to separate values to implement multi-layer list.
ShowSectionOnSelected:The default value is true. When an option is selected, the section name is displayed;
StartCollapsed:The default value is false. If it is set to true, the menu is displayed as a folding effect by default,

Summary:When developing a background system for user permission management, you may wish to select this plug-in for permission allocation. Small and simple.

Code: jQuery Tree Multiselect

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.