穿梭组件

组件简介

穿梭组件在日常的项目研发中比较常见的功能性组件，在框架的菜单管理中主要使用穿梭组件完整菜单权限节点的自定义配置，组件会初始化一定常用的节点按钮，如 添加、修改、删除、批量删除、设置状态、添加子级、全部展开、全部折叠等等常用按钮，在创建菜单时可以自由的选择当前模块所用到的节点以便提交菜单表单数据时自动创建当前菜单相关的权限节点按钮，赋予权限后便可在模块页面中进行动态的颗粒度控制按钮的呈现与否；

组件使用

• 组件：<widget:transfer param="funcIds|0|全部节点,已赋予节点|name|id|220x350" data="1=列表,5=添加,10=修改,15=删除,20=状态,25=批量删除,30=全部展开,35=全部折叠,40=添加子级" th:value="${info['funcIds']}"/>

• 参数：

1. param="funcIds|0|全部节点,已赋予节点|name|id|220x350"

`funcIds`：组件名称`funcIds`；
`0`：参数0或者1来动态配置组件是否显示搜索按钮，1显示，0不显示；
`全部节点,已赋予节点`：标识穿梭组件的左侧两边的标题；
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；
`220x350`：分别用于定义穿梭组件的宽度和高度，

2. data="1=列表,5=添加,10=修改,15=删除,20=状态,25=批量删除,30=全部展开,35=全部折叠,40=添加子级"

data：用于初始化穿梭组件的数据源；

3. 参数 value 用户绑定穿梭组件的已选中的值，格式如 1,2,3,4,5；

• 组件使用

那么我们如何在表单中使用单选按钮组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-form-item funcIds">
        <label class="layui-form-label">权限节点：</label>
        <div class="layui-input-block">
            <widget:transfer param="funcIds|0|全部节点,已赋予节点|name|id|220x350" data="1=列表,5=添加,10=修改,15=删除,20=状态,25=批量删除,30=全部展开,35=全部折叠,40=添加子级" th:value="${info['funcIds']}"/>
        </div>
    </div>
</form>

• 效果展示：