layui-滑块验证的动态修改及初始化

2019-11-03  本文已影响0人  EndPein

先说一下背景:

有一个如下页面,我需要能通过页面的开关来设置是否允许某个用户登录站点,在点击滑块后直接就可以发送请求。同时页面在打开后自动会加载当前的用户状态列表。

先上代码:

<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":""}}

上一篇下一篇

猜你喜欢

热点阅读