使用jQuery树多选的详细说明

树型权限管理插件jQuery Tree Multiselect的使用方法如下

1.知道jQuery树多选

该插件允许用户以树的形式呈现列表复选框的选择。在权限管理中主要用于分配不同的权限。要使用文档，请参考：https://github.com/patosai/tree-multiselect.js

2.操作环境

2.1.需要引入jquery.v1.8和jquery ui.js 2.2，只能在IE8或更高版本中运行

3.效果图显示：

在为角色分配权限时，操作栏中有两个按钮：修改和授权

点击授权按钮，效果如下：

直观的菜单演示：

右侧的选项标识：

4.使用方法和参数描述

4.1初始化方法：$('select ')。treemMultiSelect()；4.2.选择要使用的属性名称：

Selected:当所选属性被添加到选项中时，即选项值=' monitor _ index '所选的第一页/选项时，该复选框被默认更改为所选状态。数据段：显示了将数据段属性添加到选项时的父子层次关系：

选项值=' monitor _ index '数据-节=' tourism management '数据-描述=' home page description '所选主页/Option ' '选项值=' manage _ logs '数据-节=' tourism management '数据-描述=' user log description '所选用户信息/Option ' '选项值=' interface _ logs '数据-节=' tourism management '数据-描述=' interface call log description '所选酒店信息/Option ' '选项值=' empty _ logs '数据-节=' tourism management '旅行信息/option ' '选项值=' empty _ logs '数据-节Option'data-description:是指在Option中添加数据描述属性时，复选框后面会有一个问号形式的图标，鼠标放在上面显示描述信息，如图：

Data-index:主要用于在选项中增加Data-index属性时显示选项的顺序，最直观的表现可以在右边的div区域观察到。

通过设置“首页”:数据-索引=3，“用户信息”:数据-索引=2，“酒店信息”:数据-索引=1，右侧排序如图：同时选择选项。

另外，通过设置data-section='接口测试/接口应用/接口过滤器'，可以设置多级呈现效果，如图：

4.3参数的详细说明

Params是一个对象，可以给treemMultiSelect(params)添加不同的参数，以达到不同的效果：使用如下方法：$ ('# authorifyselect ')。树多选({可搜索： true，开始折叠3360 false })；参数：可搜索、可折叠、hideSidePanel、onChange、startCollapsed比较常见和重要，其他参数可以由用户根据自己的需求添加。

AllowBatchSelection:用于显示和隐藏父菜单的复选框。当默认值为真时，父菜单前面会出现一个复选框，右侧会出现一个详细的选择列表；如图所示：

当设置为false时，父菜单前面没有复选框，如图所示：

可折叠：用于设置父菜单的展开和收缩。

默认为真时，父菜单前面出现一条小横线，即可以展开和收缩；如图所示：

设置为false时，父菜单前面没有小横线，即不能拉伸；如图所示：

启用选择全部，支持选择任何选项；默认值为false；设置为真时，出现“全选”和“全不选”选项，可以实现全选和不选的功能，如图：

选择全部文本，当启用选择全部可用时，选择全部；取消全选文本，当启用全选可用时，不能全选；冻结，默认值为假，表示该选项被禁用；设置为true时，效果如下：

HideSidePanel:用户隐藏右侧的选项面板；默认值为false，表示不隐藏；当设置为true时，它是隐藏的；OnChange:默认值为null，表示选择选项时触发的回调函数；默认情况下有四个参数(文本：属性文本，值： va

$('#authorifyselect ')。treemMultiSelect({ OnChange :函数(文本、值、initialIndex、节){ console.log(文本))；console.log(值)；console . log(Initialindex)；console.log(节)；} });当我单击一个选项时，输出如下：

也就是说，文本将输出所有选中复选框的信息；值将输出您当时单击的复选框的信息；initialIndex和section的值在这里为空。OnlyBatchSelection:只执行部分检查，只能设置为false，sortable:默认为false。设置为true时，选中的选项可以通过拖动进行排序(需要jQuery UI)；可搜索，默认值为false，当设置为true时，菜单顶部会出现一个搜索框，可以用来快速搜索菜单。效果如下：

search params 3360[' value '，' text '，' description '，' section']，用于设置搜索设置。SectionDelimiter:它表示数据部分=' value1/value2/value3 '。可以用“/”来分隔数值，从而达到多层列表的效果。ShowSectionOnSelected:默认值为true，选择该选项时，显示节名；StartCollapsed:默认设置为false，设置为true时，菜单默认显示为折叠效果，如图：

总结：在开发用户权限管理后台系统的时候，不妨选择这个插件进行权限的分配。小巧简单。

代码下载地址是jQuery树多选

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。