先说一下背景:
有一个如下页面,我需要能通过页面的开关来设置是否允许某个用户登录站点,在点击滑块后直接就可以发送请求。同时页面在打开后自动会加载当前的用户状态列表。
先上代码:
<div class="weadmin-body">
<table class="layui-hide" lay-filter="test" id="demo">
<script type="text/html" id="titleTplm">
<input type="checkbox" name="{{ d.id }}" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭" {{ d.opening?"checked":""}} >
<script src="../../lib/layui/layui.js" charset="utf-8">
layui.use(['jquery','table','form','layer','laytpl'], function(){
var layer =layui.layer;
var table =layui.table;
var form =layui.form;
var laytpl =layui.laytpl;
var $ =layui.$;
//第一个实例
table.render({
elem:'#demo'
,url:'http://127.0.0.1:8000/login/login' //数据接口
,page:true //开启分页
,cols: [[//表头
{field:'id', title:'ID'}
,{field:'age', title:'年龄'}
,{field:'sex', title:'性别'}
,{field:'name', title:'姓名'}
,{switch:'opening',title:'允许登录',templet:'#titleTplm',nresize:true}
]]
});
form.on('switch(switchTest)',function (obj) {
var sid =this.name;
var status = obj.elem.checked;
layer.msg('发送请求:'+status);
$.ajax({
type:"PUT",
data:{'sid':sid,'status':status},
url:'http://127.0.0.1:8000/login/login',
success:function (req) {
if (req.code==0){
return;
}else {
return;
}
l
}
})
});
});
</script>
----------------------------
然后在来说说遇到的问题:
1、在默认获得开关状态的问题时自己不够仔细,官方文档是有说明”checked“来进行控制,可是自己不够仔细,没有细致的去看,造成这个问题浪费了比较多的时间;
2、模板语言、js的不熟练,通过三目运算可以简单解决状态的切换。{ d.opening?"checked":""}}
网友评论