Layui常用方法

layui中的input radio单选框监听选择触发事件:

根据给input绑定的 lay-filter 进行查找input,然后进入函数判断

form.on('radio(term)', function(data) {

            if (data.value == "短期") {
                $("#termtime").removeClass("layui-hide");
            } else if (data.value == "长期") {
                $("#termtime").addClass("layui-hide");
            }
        });

设置按钮根据状态条件显示不同的按钮:

各种弹窗:

注:因为有的模块中已经声明layer有的则没有,所以这里都用layui.layer的方式来调用layer弹出层:

半透明黑色背景提示框,666毫秒自动关闭:

layui.layer.msg(returndata.msg,{time: 666});  

蓝色模块,左边跳出动画,有确定按钮

layui.use('layer', function() {
                 layer.alert(returndata.msg, {
                        skin: 'layui-layer-lan'
                        ,closeBtn: 0
                        ,anim: 4 //动画类型
                      });
                });

input只能输入数字,不能输入其他和小数点

layui遮罩层,上传开始,成功后关闭遮罩层

点击修改:

if(obj.event === 'setSign'){
        layer.prompt({
            formType: 2
            ,title: '修改 ID 为 ['+ data.id +'] 的角色页面'
            ,value: data.homePage
          }, function(value, index){
            layer.close(index);
            
            $.ajax({
                type:"post",
                url:"<%=basePath%>/sys/role/update",
                data:{role:JSON.stringify(data)},
                dataType:"text",//返回的
                success:function(data1) {
                    layer.alert(data1.result);
                    table.reload('idTest', {
                        //url: '../user/selectmsguser.do'
                        url: '<%=basePath%>/sys/role/list1?q=1'
                        ,where: {} 
                        //,height: 300
                      });
                },
                error:function(msg) {
                    cosole.log(msg);
                }
            }); 
            obj.update({
              sign: value
            });
          });
        }

格式化日期到时分秒:

格式化时间日期:

密码显示 ***** :

状态栏:

1 

表格中绑定时间或者图片

  
    

表格中绑定逻辑判断:

 
    
    

 

远程获取数据:

表单获取Value数据:

function formLoad(element,data){
   var input = document.getElementById(element).getElementsByTagName('input');
   for(var i =0;i < input.length;i++){ 
  var inputname = input[i].name;
      for(var j in data){
         if(inputname == j){
         input[i].value = data[j];
         }    
      }    
   }
  }

数据表格重载传参数,模糊查询:

这是搜索按钮,点击触发重载:

搜索角色:

这是重载事件:

不需要指定重载的url,只需要根据表格的ID就可以重载,这里的ID是在layui声明的的ID,不是普通的标签中id="idno"这样的id,然后再where里面传参数

添加或修改打开一个页面后,关闭页面重载原来页面数据表格

$("#addBookbtn").click(function(){
          layer.open({
              type: 2,
              title:['添加新书信息','font-size:22px'],
              area: ['400px', '420px'],
              content: '../jsp/addbook.jsp',
              cancel: function(index, layero){ 
                  layer.confirm('是否关闭?', {icon: 3, title:'提示'}, function(index){
                      layer.close(index);
                      table.reload("booktable");
                    });
                }   
            });
      });

借鉴文章:https://www.cnblogs.com/jiangwz/p/7899424.html

你可能感兴趣的:(Layui)