摘要
上一篇分享了layui美化按钮开关checkbox,具体可以到我的主页阅览
但是很遗憾的是我没有用table.on或者是form.on,因为渲染的问题我不想纠结了,毕竟保护头发才是重要的事情,那接下来我就展示我是如何解决监听按钮修改用户账号状态
先声明:业务、思考方向、代码等,大家认为可以改进的,留言版见 [手动滑稽]
业务场景
可以看到下方是一个用户管理界面,点击按钮去实现用户账号的启用和禁用,并且状态保存到数据库
表格字段代码
如果没有耐心看完代码,就往下看我写的思路吧
table.render({
elem:....
, cols: [
[....
{field: 'status', title: '账号状态', sort: true, align: 'center', minWidth: 130, templet: function (d) {
return d.status === 0 ?
'<input name="status" value="'+ d.status +'" type="checkbox" checked="checked" lay-event="checkedStatus" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用">'
: '<input name="status" value="'+d.status+'" type="checkbox" lay-event="checkedStatus" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用">';
}
}
..
]], done: function (res, curr, count) {
//启用禁用监听
let arr = $("[data-field='status']");
for (let i = 1; i < arr.length; i++) {
$(arr[i]).on('click',function () {
let userId = $(this).parent("tr").children('td').eq(1).text();
let checked = true;
if ('禁用'=== this.innerText){
checked = false
}
switchStatus(userId,checked);
})
}
//form.render();这里不加也不影响按钮渲染
};
/*禁用启用账号*/
function switchStatus(userId,checked) {
let param = {
userId: userId
};
//监听指定开关
if (checked) {
param.status = '0';
layer.msg('启用', {
offset: '6px', time: 1000
});
} else {
param.status = '1';
layer.msg('禁用', {
offset: '6px', time: 1000
});
}
$.ajax({
url: '..写自己的url',
type: 'get',
data: param,
dataType: 'JSON',
headers: {"token": layui.data(layui.setter.tableName)['token']},
success: function (res) {
if (res.code == '0') {
layer.msg(res.msg, {offset: '6px'});
} else {
layer.msg(res.msg, {offset: '15px', icon: 2, time: 2000})
}
},
error: function (res) {
layer.msg(res.msg, {offset: '15px', icon: 2, time: 2000})
}
});
return false;
}
参考思路
1. 首先通过jQuery获取$("[data-field='status']"); 字段名字为"status"的 td 数组,再遍历,
当然我这里用for循环只是为了更直观,当然用jQuery中的each遍历也行,只不过对应的arr[i]
就要换成$("[data-field='status']").each(function(){....}),然后调用监听事件
2. 改变用户账号状态,必要两个字段值,一个是“userId”一个是改变的状态值“status”,所以使用jQuery获取
3. 点击了那个按钮就获取对应按钮中的this.innerText值,进行判断,之后就把获取到的值传过去搞定了
官方操作(简便方法)
https://www.layui.com/demo/table/form.html
- 三个关键点:
checkbox中value值存当前行id字段值,后面要用;
lay-filte必须要写;
{{ d.status == ‘0’ ? ‘checked’ : ‘’ }}服务端返回状态值判断是选择还是未选中状态
<script type="text/html" id="switchStatus">
<input name="status" value="{{d.userId}}" type="checkbox" lay-skin="switch" lay-text="启用|禁用" lay-filter="checkedStatus" {{ d.status == '0' ? 'checked' : '' }}>
</script>
2、字段
{field: 'status', title: '账号状态', sort: true, align: 'center', minWidth: 130, templet: '#switchStatus', unresize: true}
3、调用
/*监听禁用启用账号开关*/
form.on('switch(checkedStatus)', function(obj){
switchStatus(this.value,obj.elem.checked);//方法在上面有
});
小结
遇到问题不要慌,这个问题解决还有下一个问题。头发才是重要的,换个思路解决掉就好,哈哈哈
ps:这张图忘记是从哪个大哥哪里拿来的