用户新增、删除、修改

删除

1对删除按钮进行监听

2点击删除按钮通过ajax携带用户ID访问删除接口

3后端完成逻辑处理并返回结果信息

4前端通过返回信息弹出提示给管理员

新增

1点击新增弹出新增页面

2对新增保存按钮进行监听

3点击保存按钮ajax携带数据给后端

其中“爱好”的值通过以下代码解析传入后端

let hobby = [];//创建数组
$("input[type=checkbox][name=hobby]:checked").each(function (index, obj) {
hobby.push($(obj).attr('title'));//将值存入数组
// }
})
data.hobby = hobby.toLocaleString();

3后端完成逻辑处理并返回结果信息

4前端通过返回信息弹出提示给管理员

修改

1点击修改按钮

2监听当前行的id，通过id查询当前记录

3将获取的数据回显到修改数据页面，并重新渲染标板

function setData(data) {
console.log(data);
form.val('example', {
// "username": data.username // "name": "value"
"phone": data.phone
, "email": data.email //复选框选中状态
, "birthday": data.birthday //开关状态
, "sex": data.sex
// , "enable": data.enable
});
$("#username").val(data.username);
//回显爱好
$("input[type=radio][name=enable][value=" + data.enable + "]").attr("checked", "checked")
if (data.address != undefined) {
let hobbys = data.address.split(",");
$("input[type=checkbox][name=hobby]").each(function (index, obj) {
for (let i = 0; i < hobbys.length; i++) {
if (hobbys[i] == $(obj).attr("title")) {
$(obj).attr("checked", "checked");
}
}
})
}
// 重新渲染表单
form.render();
}

4对修改提交按钮进行监听，修改内容后点击保存

5保存通过ajax传输数据给后端

6后端完成逻辑处理并返回结果信息

7前端通过返回信息弹出提示给管理员