So verwenden Sie jQuery Tree Multiselect richtig

Dieser Artikel stellt hauptsächlich die Verwendung von jQuery Tree Multiselect vor. Dieses Plug-in ermöglicht es Benutzern, Listenauswahlfelder in Form eines Baums darzustellen. Es wird hauptsächlich in der Berechtigungsverwaltung verwendet Referenzwert, interessierte Freunde können sich darauf beziehen, ich hoffe, es kann jedem helfen.

So verwenden Sie das Baumberechtigungsverwaltungs-Plug-in jQuery Tree Multiselect. Der spezifische Inhalt lautet wie folgt

1. Lernen Sie jQuery Tree Multiselect kennen

Mit diesem Plug-in können Benutzer Listenauswahlfelder in einem Baumformat präsentieren. Es wird hauptsächlich in der Berechtigungsverwaltung verwendet, um verschiedene Berechtigungen zuzuweisen.

Version 2.1 und jquery ui.js eingeführt werden 2.2. Es kann nur in Versionen über IE8 ausgeführt werden

3. Effektbildanzeige:

Beim Zuweisen von Berechtigungen zu einer Rolle gibt es zwei Schaltflächen im Bedienleiste: Ändern und autorisieren

Klicken Sie auf die Autorisierungsschaltfläche. Der Effekt ist wie folgt:

Mit Optionslogos auf der rechten Seite:

4. Verwendungsmethoden und Parameterbeschreibungen

4.1. Initialisierungsmethode: $("select").treeMultiselect(); 4.2. Verwenden Sie den ausgewählten Attributnamen:

selected:

data-section:Das heißt, wann Durch Hinzufügen des Datenabschnittsattributs zur Option wird die hierarchische Beziehung zwischen Eltern und Kind angezeigt:

&#39;<option value="monitor_index" data-section="旅游管理" data-description="首页描述" selected>首页</option>&#39; +
&#39;<option value="manage_logs" data-section="旅游管理" data-description="用户日志描述" selected>用户信息</option>&#39; +
&#39;<option value="interface_logs" data-section="旅游管理" data-description="接口调用日志描述" selected>酒店信息</option>&#39; +
&#39;<option value="abnormal_logs" data-section="旅游管理">出行信息</option>&#39; +
&#39;<option value="empty_logs" data-section="旅游管理">景点信息</option>&#39;

data-index:

Durch die Einstellung „Homepage“: Datenindex = 3, „Benutzerinformationen“: Datenindex = 2, „Hotelinformationen“: Datenindex = 1 ist die Sortierung auf der rechten Seite wie in der Abbildung dargestellt Abbildung: Gleichzeitig wird die Option ausgewählt.

Darüber hinaus können Sie durch die Einstellung data-section="Interface Test/Interface Application/Interface Filtering" mehrstufige Anzeigeeffekte einrichten, wie in der Abbildung gezeigt :

4.3. Detaillierte Erläuterung der Parameter

Verwendungsmethoden sind wie folgt: $("#authorifyselect").treeMultiselect({ searchable: true, startCollapsed: false });

searchable, collapsible, hideSidePanel, onChange, startCollapsed
sind häufiger verwendeter und wichtigerer Parameter sowie andere Parameter, die Benutzer je nach Bedarf hinzufügen können.

allowBatchSelection:

Wenn festgelegt; auf „false“ gesetzt, gibt es kein Kontrollkästchen vor dem übergeordneten Menü, wie in der Abbildung gezeigt:

zusammenklappbar:

Wenn die Standardeinstellung wahr ist, wird vor dem übergeordneten Menü eine kleine horizontale Linie angezeigt, die wie in der Abbildung gezeigt zurückgezogen werden kann:

Wenn es auf „false“ gesetzt ist, gibt es keine horizontale Linie vor dem übergeordneten Menü, das heißt, es kann nicht zurückgezogen werden, wie in der Abbildung gezeigt:

enableSelectAll,

ist auf „true“ eingestellt. Die Optionen „Alle auswählen“ und „Alle auswählen“ können realisiert werden Deaktivieren Sie alle Funktionen, wie in der Abbildung gezeigt:

selectAllText，当enableSelectAll可用时，可选中所有；
unselectAllText，当enableSelectAll可用时，可不选中所有；
freeze，默认为false，表示对选项禁用选择；设置为true时，效果如图：

hideSidePanel：用户隐藏右边的选项面板；默认为false,表示不隐藏；设置为true时，即隐藏；
onChange：默认为null，表示选择选项时触发的回调函数；默认包含四个参数（text:属性文本，value:值，initialIndex,section）

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

当我点击某个选项时，输出结果如图：