layui-資料表格之行操作

前端行操作的按鈕

<a class="layui-btn layui-btn-sm layui-btn-green" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-sm layui-btn-green" lay-event="del">删除</a>
           

監聽資料表格行操作

table.on('tool(roles)', function(obj) {
			var data = obj.data;
			if (obj.event === 'edit') {
				layer.open({
					type : 2,
					area : [ '400px', '300px' ],
					content : '[[@{/role/editor}]]/' + data.id 
				});
			} else if (obj.event === 'del') {
				layer.confirm(`是否确定删除角色名:${data.name}`, function(index) {
					// 調用deleteById函數删除，再code==0，然後調reload重新整理頁面. 使用callback應該是因為傳回rs;this=rs;
					deleteById(data.id, function() {
						if (this.code === 0) {
							reload();
						}
						//根據對應index關閉彈出層
						layer.close(index);
					})
				});
			}
		})
           

後端代碼

//此方式可以接受/editor/{id}和/editor兩種方式通路
@GetMapping(path = {"/editor/{id}","/editor"})
	public String editor(@PathVariable(required = false,name = "id")Integer id, ModelMap map) {
		//可以将Role role寫在括号中，就不需要set
		Role role = new Role();
		role.setId(id);
		Role list = roleService.findOneRole(role);
		map.put("role", list);
		return "role/editor";
	}