前言

• 4.6

若依(ruoyi) 自带的单选和多选按钮样式

下面的代码摘自ruoyi.js:

// 加载成功、选中、取消、全部选中、全部取消（事件）
$(optionsIds).on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () {
       var toolbar = table.options.toolbar;
       var uniqueId = table.options.uniqueId;
       // 工具栏按钮控制
       var rows = $.common.isEmpty(uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(uniqueId);
       // 非多个禁用
       $('#' + toolbar + ' .multiple').toggleClass('disabled', !rows.length);
       // 非单个禁用
       $('#' + toolbar + ' .single').toggleClass('disabled', rows.length!=1);
});
1
2
3
4
5
6
7
8
9
10
11

• .multiple 多选按钮样式：有一个或多个选择行时，带有改样式的按钮可用；否则，禁用。
• .single 单选按钮样式：有一个选择行时，带有改样式的按钮可用；否则（没有选择行或者多个选择行时），禁用。

单选和多选按钮样式的使用

下面的代码摘自user.html:

		        <div class="btn-group-sm" id="toolbar" role="group">
		        	<a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:user:add">
		                <i class="fa fa-plus">i> 新增
		            a>
		             <a class="btn btn-primary single disabled" onclick="$.operate.editTab()" shiro:hasPermission="system:user:edit">
			            <i class="fa fa-edit">i> 修改
			        a>
		            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:user:remove">
		                <i class="fa fa-remove">i> 删除
		            a>
		            <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="system:user:import">
			            <i class="fa fa-upload">i> 导入
			        a>
		            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:user:export">
			            <i class="fa fa-download">i> 导出
			        a>
		        div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 修改按钮添加了单选按钮样式 .single
• 删除按钮添加了多选按钮样式 .multiple

执行效果截图

选择有不可操作的数据

以若依(ruoyi)自带的用户管理为例，admin用户不可删除。选择行中包含admin时，该如何处理？

• 方法1：让按钮不可用
• 方法2：按钮触发点击后，由js检查数据，提示包含不可操作数据。
• 方法3：按钮触发点击后，正常发起请求，由后台代码检查数据，提示包含不可操作数据。
• 方法4：按钮触发点击后，正常发起请求，后台执行操作时避开不可操作数据。
• 方法5：按钮触发点击后，正常发起请求，后台执行操作时避开不可操作数据，最后提示成功多少、失败多少。

参考

https://www.bootstrap-table.com.cn
https://bootstrap-table.com