Layui 表单checkbox和select技巧

简单记录项目开发技巧,方便以后查看。

目标

效果一:根据数据库信息-显示选中项

效果二:根据数据库信息-显示开关

脚本初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
-- ----------------------------
-- 2、角色表
-- ----------------------------
DROP TABLE IF EXISTS `sys_role`;
CREATE TABLE `sys_role`(
`role_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '角色ID',
`role_name` varchar(50) NOT NULL COMMENT '角色名称,如admin、user',
`description` varchar(50) NOT NULL COMMENT '角色描述,如管理员,用户',
`available` char(1) DEFAULT '0' COMMENT '是否可用:正常:0, 禁用:1',
`role_sort` int(11) NOT NULL COMMENT '显示顺序',
`create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
`update_time` timestamp NULL DEFAULT NULL COMMENT '更新时间',
PRIMARY KEY (`role_id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8 COMMENT '角色表';

-- ----------------------------
-- 初始化-角色表信息数据
-- ----------------------------
INSERT INTO `sys_role`(`role_id`,`role_name`,`description`,`available`,`role_sort`,`create_time`) VALUES (null, 'admin','管理员','0','1','2018-11-11 11:11:11');
INSERT INTO `sys_role`(`role_id`,`role_name`,`description`,`available`,`role_sort`,`create_time`) VALUES (null, 'vip','VIP会员','0','2','2018-11-11 11:11:11');
INSERT INTO `sys_role`(`role_id`,`role_name`,`description`,`available`,`role_sort`,`create_time`) VALUES (null, 'user','普通用户','0','3','2018-11-11 11:11:11');

Mapper XML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 更新角色信息 -->
<update id="myUpdateById" parameterType="com.ray.system.entity.SysRole">
UPDATE
sys_role
<set>
<if test="roleName != null">
role_name = #{roleName},
</if>
<if test="description != null">
description = #{description},
</if>
<if test="available == null">
available = 1,
</if>
<if test="available != null">
available = #{available},
</if>
<if test="roleSort != null">
role_sort = #{roleSort},
</if>
</set>
WHERE
role_id = #{roleId}
</update>

注意

1
2
3
4
5
6
<if test="available == null">
available = 1,
</if>
<if test="available != null">
available = #{available},
</if>

这里主要控制开关,如果为空的话,available = 1 相当于禁用,不为空就赋值。

控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
* 角色列表操作
*/
@ApiOperation(value = "角色列表操作")
@ApiImplicitParams({
@ApiImplicitParam(name = "roleName", value = "根据roleName模糊查询", paramType = "query"),
@ApiImplicitParam(name = "page", value = "分页", dataType = "Integer"),
@ApiImplicitParam(name = "limit", value = "每页显示的条数", dataType = "Integer")
})
@GetMapping("/roleDate")
@ResponseBody
public JSONObject roleDate(int page, int limit,
@RequestParam(value = "keyword", required = false) String roleName) {
JsonUtils jsonUtils = new JsonUtils();

/**
* 如果 userName 为空就执行全部搜索
*/
if (StrUtil.hasEmpty(roleName)) {
Page<SysRole> pages = new Page<>(page, limit);
IPage<SysRole> roleIPage = sysRoleService.page(pages, new QueryWrapper<SysRole>().orderByAsc("role_sort"));
return jsonUtils.jsonObject(roleIPage);
}

/**
* 如果 userName 不为空就执行模糊搜索
*/
Page<SysRole> pages = new Page<>(page, limit);
IPage<SysRole> roleIPage = sysRoleService.page(pages, new QueryWrapper<SysRole>().like("role_name", roleName).orderByAsc("role_sort"));
return jsonUtils.jsonObject(roleIPage);
}

这里使用条件构造器,根据orderByAsc("role_sort")排序。

修改页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="layui-form-item">
<label class="layui-form-label">显示顺序</label>
<div class="layui-input-block">
<select name="roleSort">
<option value=""></option>
<option value="1" th:selected="*{roleSort == 1}" disabled >1</option>
<option value="2" th:selected="*{roleSort == 2}">2</option>
<option value="3" th:selected="*{roleSort == 3}">3</option>
</select>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">角色状态</label>
<div class="layui-input-block">
<input type="checkbox" th:checked="*{available eq '0'}" value="0" name="available" lay-skin="switch" lay-text="正常|锁定">
</div>
</div>

选中项解决方法

参考原文
首先不进行判断,先显示出所有的选项,保证可以进行修改的操作。然后再在selected这个属性里进行判断,从数据库中获取的值是否等于该选项的value,如果等于,则选中。

开关解决方法

根据Layui文档说明:设置value=”1”可自定义值,否则选中时返回的就是默认的on。
理解:不选中,不返回;当选中时,返回value的值。

深入理解

  1. th:checked="*{available eq '0'}":主要是返回状态,并非修改状态。
  2. value="0":当选中时,返回该值。
  3. 与 Mapper XML 动态SQL搭配使用。