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;
}