美文网首页
layui-滑块验证的动态修改及初始化

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

作者: EndPein | 来源:发表于2019-11-03 00:33 被阅读0次

    先说一下背景:

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

    先上代码:

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

    相关文章

      网友评论

          本文标题:layui-滑块验证的动态修改及初始化

          本文链接:https://www.haomeiwen.com/subject/spqkbctx.html