layui(谐音:类ui) 是一款采用自身模块规范编写的前端 ui 框架,遵循原生 html/css/js 的书写与组织形式,门槛极低,拿来即用。
layui常用的方法：
layui中的input radio单选框监听选择触发事件：
根据给input绑定的 lay-filter 进行查找input，然后进入函数判断
value="长期" title="长期有效" lay-filter="term">
form.on('radio(term)', function(data) { if (data.value == "短期") { $("#termtime").removeClass("layui-hide"); } else if (data.value == "长期") { $("#termtime").addClass("layui-hide"); } });设置按钮根据状态条件显示不同的按钮：
<ｓｃｒｉｐｔ type="text/html" id="toolbtn">{{# if(d.state == true){}} 下线 {{# } else { }} 发布 {{# } }}各种弹窗：
注：因为有的模块中已经声明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遮罩层，上传开始，成功后关闭遮罩层
<ｓｃｒｉｐｔ type="text/javascript">function tanchu(){ layui.use('layer', function(){ var layer = layui.layer; var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); }); }function tanchuclose(){ layui.use('layer', function(){ var layer = layui.layer; layer.close(layer.index); }); }<ｓｃｒｉｐｔ type="text/javascript"> function upload(){ tanchu(); var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: '<%=basePath%>/knowledge/upload' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { tanchuclose(); alert(returndata); }, error: function (returndata) { alert(returndata); } }); } 点击修改：
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/ｕｐｄａｔｅ", 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.ｕｐｄａｔｅ({ sign: value }); }); }格式化日期到时分秒：
<ｓｃｒｉｐｔ type="text/html" id="timeTpl">{{# var fn = function(){var date=new Date(d.uptime);var d1=date.getDate();var y=date.getFullYear();var m=date.getMonth() + 1;var HH=date.getHours();var mm=date.getMinutes(); var ss=date.getSeconds(); return y+'/'+m+'/'+d1+' '+HH+':'+mm+':'+ss;}; if(true){ }} {{ fn() }}{{# } }}格式化时间日期：
<ｓｃｒｉｐｔ type="text/html" id="timeTpl">{{# var fn = function(){var date=new Date(d.createtime);var d1=date.getDate();var y=date.getFullYear();var m=date.getMonth() + 1; return y+'/'+m+'/'+d1;}; if(true){ }} {{ fn() }}{{# } }}密码显示 ***** ：
<ｓｃｒｉｐｔ type="text/html" id="pwd"> {{# var fn = function(){ return '***';}; if(true){ }} {{ fn() }}{{# } }} 状态栏：
<ｓｃｒｉｐｔ type="text/html" id="barDemo1">保存冻结
<ｓｃｒｉｐｔ type="text/html" id="usernameTpl"> {{ d.username }}
远程获取数据：
<ｓｃｒｉｐｔ type="text/javascript"> layui.use('form', function() { var form = layui.form; $("#tname").children().remove(); $.ajax({ type : "post", url : "../user/selectallusersrole.do?role=3", dataType : "json", sync : "false", success : function(data) { for (var a = 0; a < data.data.length; a++) { $("#tname").append( "") } form.render('ｓｅｌｅｃｔ'); //用ajax追加的需要这样渲染一下 }, error : function() { } }) $("#urealname").children().remove(); $.ajax({ type : "post", url : "../user/selectallusersrole.do?role=4", dataType : "json", sync : "false", success : function(data) { for (var a = 0; a < data.data.length; a++) { $("#urealname").append( "") } form.render('ｓｅｌｅｃｔ'); //用ajax追加的需要这样渲染一下 }, error : function() { } }) $("#cname").children().remove(); $.ajax({ type : "post", url : "../class/selectclass.do", dataType : "json", sync : "false", success : function(data) { for (var a = 0; a < data.data.length; a++) { $("#cname").append( "") } form.render('ｓｅｌｅｃｔ'); //用ajax追加的需要这样渲染一下 }, error : function() { } }) //form.on('ｓｅｌｅｃｔ(username)', function(data) {//给隐藏的input赋值（机构id） //$("#yincang").val(data.value); //}); }); 表单获取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，然后再where里面传参数
<ｓｃｒｉｐｔ>layui.use('table', function(){ var table = layui.table; var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table.reload('idTest', { page: { curr: 1 //重新从第 1 页开始 }, where: { name: demoReload.val() } }); } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });});添加或修改打开一个页面后，关闭页面重载原来页面数据表格
$("#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"); }); } }); });更多layui相关知识请关注layui框架。
