function addUser() { layer.open({ type: 2 //此处以iframe举例 , title: '添加账号' , area: ['500px', '600px'] , shade: 0 , maxmin: true , content: '/authorize/addUser' }); } var from; layui.use(['element', 'form', 'layer', 'table'], function () { form = layui.form; var element = layui.element , table = layui.table , layer = layui.layer; table.render({ elem: '#userlist' , id: 'uReload' , height: 'full-220' , method: 'post' , url: '/authorize/getUsers' //数据接口 , page: true //开启分页 , limits: [15, 50, 100] , limit: 15 , cols: [[ //表头 { field: 'ids', title: '#', width: 50, type: 'numbers', fixed: 'left' } , { field: 'name', edit: 'text', title: '姓名', width: 100 } , { field: 'username', title: '账号', width: 120 } , { field: 'email', edit: 'text', title: '邮箱', width: 200 } , { field: 'tel', edit: 'text', title: '电话', width: 120, sort: true } , { field: 'department', edit: 'text', title: '部门', width: 160 } , { field: 'position', edit: 'text', title: '职位', width: 160 } , { field: 'group', title: '用户角色', width: 160 } , { field: 'update_time', title: '更新时间', width: 120, sort: true } , { field: 'status', title: '账户状态', width: 110, templet: "
{{ status(d.status,d.id)}}
" } , { fixed: 'right', width: 100, title: '操作', align: 'center', toolbar: '#toolbar' } //这里的toolbar值是模板元素的选择器 ]] }); var $ = layui.$, active = { reload: function () { var name = $('#name'); var tel = $('#tel'); //执行重载 table.reload('uReload', { page: { curr: 1 //重新从第 1 页开始 } , where: { name: name.val(), tel: tel.val(), } }); } }; $('.userTable .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //监听单元格编辑 table.on('edit(user)', function (obj) { var e = layer.load(2, { shade: [0.2, '#2F4056'] }); var value = obj.value //得到修改后的值 , data = obj.data //得到所在行所有键值 , field = obj.field; //得到字段 $.post("/authorize/updateUser", { id: data.id, field: field, value: value }, function (msg) { layer.close(e); layer.msg(msg, { time: 1000 }); }); }); //监听账户状态操作 form.on('checkbox(lockstatus)', function (obj) { var e = layer.load(2, { shade: [0.2, '#2F4056'] }); if (obj.elem.checked == false) { value = 0; } else { value = 1; } $.post("/authorize/updateUser", { id: this.value, field: 'status', value: value }, function (msg) { layer.close(e); layer.msg(msg, { time: 1000 }); }); }); table.on('tool(user)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var tr = obj.tr; //获得当前行 tr 的DOM对象 if (layEvent === 'del') { //删除 layer.confirm('确认删除账号【' + obj.data.name + '】?', function (index) { //向服务端发送删除指令 $.post("/authorize/delUser/", { id: obj.data.id }, function (data) { if (data.code === 0) { obj.del(); //删除对应行(tr)的DOM结构,并更新缓存 } layer.close(index); layer.msg(data.msg, { time: 2000 }); }); }); } else if (layEvent === 'edit') { //编辑 var index = layer.open({ type: 1 , title: '【' + obj.data.name + '】重置密码' , area: ['420px', '200px'] , content: '
' //这里content是一个普通的String , btn: ['提交', '关闭'] , yes: function () { //通过ajax提交数据 $.post("/authorize/updateUser/", { id: obj.data.id, field: 'password_hash', value: $('#passwordn').val() }, function (data) { layer.close(index); layer.msg(data, { time: 2000 }); }); } , btn2: function () { layer.close(index); } }); } }); }); //传入URL前缀及字段值 function status(vals, id) { //判断是否需要拼接URL if (id === 1) { result = ''; } else { if (vals === 0) { result = ''; } else if (vals === 1) { result = ''; } else { result = vals; } } return result; } //传入URL前缀及字段值 function operation(id) { var result = ' 重置密码'; return result; }