Layui常用方法
layui中的input radio單選框監聽選擇觸發事件：
根據給input綁定的?lay-filter 進行查找input，然后進入函數判斷
<div class="layui-form-item"><label class="layui-form-label">長期短期</label><div class="layui-input-block"><input type="radio" name="term" value="長期" title="長期有效"lay-filter="term"> <input type="radio" name="term"value="短期" title="短期有效" lay-filter="term"></div></div><div id="termtime" class="layui-hide"><div id="classdate" class="layui-form-item" style=""><label class="layui-form-label">開始時間：</label><div class="layui-input-block"><input type="text" name="startdate" id="startdate"lay-verify="startdate" autocomplete="off" class="layui-input"></div><label class="layui-form-label">結束時間：</label><div class="layui-input-block"><input type="text" name="enddate" id="enddate"lay-verify="enddate" autocomplete="off" class="layui-input"></div></div></div> form.on('radio(term)', function(data) {if (data.value == "短期") {$("#termtime").removeClass("layui-hide");} else if (data.value == "長期") {$("#termtime").addClass("layui-hide");}});?
設置按鈕根據狀態條件顯示不同的按鈕：
<script type="text/html" id="toolbtn">{{# if(d.state == true){}}<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="down">下線</a>{{# } else { }}<a class="layui-btn layui-btn-mini " lay-event="up">發布</a> {{# } }} </script>各種彈窗：
注：因為有的模塊中已經聲明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只能輸入數字，不能輸入其他和小數點
<input type="text" id="num" name="num" placeholder="請輸入" autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">?
layui遮罩層，上傳開始，成功后關閉遮罩層
1 <script type="text/javascript"> 2 3 function tanchu(){ 4 layui.use('layer', function(){ 5 var layer = layui.layer; 6 7 var index = layer.load(1, { 8 shade: [0.1,'#fff'] //0.1透明度的白色背景 9 }); 10 }); 11 } 12 function tanchuclose(){ 13 layui.use('layer', function(){ 14 var layer = layui.layer; 15 16 layer.close(layer.index); 17 }); 18 } 19 </script> 1 <script type="text/javascript"> 2 function upload(){ 3 tanchu(); 4 var formData = new FormData($( "#uploadForm" )[0]); 5 $.ajax({ 6 url: '<%=basePath%>/knowledge/upload' , 7 type: 'POST', 8 data: formData, 9 async: false, 10 cache: false, 11 contentType: false, 12 processData: false, 13 success: function (returndata) { 14 15 16 tanchuclose(); 17 alert(returndata); 18 }, 19 error: function (returndata) { 20 alert(returndata); 21 } 22 }); 23 } 24 25 26 </script>點擊修改：
1 if(obj.event === 'setSign'){ 2 layer.prompt({ 3 formType: 2 4 ,title: '修改 ID 為 ['+ data.id +'] 的角色頁面' 5 ,value: data.homePage 6 }, function(value, index){ 7 layer.close(index); 8 9 $.ajax({ 10 type:"post", 11 url:"<%=basePath%>/sys/role/update", 12 data:{role:JSON.stringify(data)}, 13 dataType:"text",//返回的 14 success:function(data1) { 15 layer.alert(data1.result); 16 table.reload('idTest', { 17 //url: '../user/selectmsguser.do' 18 url: '<%=basePath%>/sys/role/list1?q=1' 19 ,where: {} 20 //,height: 300 21 }); 22 }, 23 error:function(msg) { 24 cosole.log(msg); 25 } 26 }); 27 obj.update({ 28 sign: value 29 }); 30 }); 31 }格式化日期到時分秒：
1 <script type="text/html" id="timeTpl"> 2 {{# var fn = function(){ 3 var date=new Date(d.uptime); 4 var d1=date.getDate(); 5 var y=date.getFullYear(); 6 var m=date.getMonth() + 1; 7 var HH=date.getHours(); 8 var mm=date.getMinutes(); 9 var ss=date.getSeconds(); 10 return y+'/'+m+'/'+d1+' '+HH+':'+mm+':'+ss; 11 }; if(true){ }} 12 {{ fn() }} 13 {{# } }} 14 </script>格式化時間日期：
1 <script type="text/html" id="timeTpl"> 2 {{# var fn = function(){ 3 var date=new Date(d.createtime); 4 var d1=date.getDate(); 5 var y=date.getFullYear(); 6 var m=date.getMonth() + 1; 7 return y+'/'+m+'/'+d1; 8 }; if(true){ }} 9 {{ fn() }} 10 {{# } }} 11 </script>密碼顯示 ***** ：
1 <script type="text/html" id="pwd"> 2 {{# var fn = function(){ 3 return '***'; 4 }; if(true){ }} 5 {{ fn() }} 6 {{# } }} 7 </script>狀態欄：
1 <script type="text/html" id="barDemo1"> 2 <a class="layui-btn layui-btn-mini" id="edit" lay-event="edit">保存</a> 3 <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">凍結</a> 4 </script> 1 <script type="text/html" id="usernameTpl"> 2 <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a> 3 </script>遠程獲取數據：
1 <script type="text/javascript"> 2 3 layui.use('form', function() { 4 var form = layui.form; 5 $("#tname").children().remove(); 6 $.ajax({ 7 type : "post", 8 url : "../user/selectallusersrole.do?role=3", 9 dataType : "json", 10 sync : "false", 11 success : function(data) { 12 for (var a = 0; a < data.data.length; a++) { 13 $("#tname").append( 14 "<option class='tname' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>") 15 } 16 form.render('select'); //用ajax追加的需要這樣渲染一下 17 18 }, 19 error : function() { 20 } 21 }) 22 23 $("#urealname").children().remove(); 24 $.ajax({ 25 type : "post", 26 url : "../user/selectallusersrole.do?role=4", 27 dataType : "json", 28 sync : "false", 29 success : function(data) { 30 for (var a = 0; a < data.data.length; a++) { 31 $("#urealname").append( 32 "<option class='name' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>") 33 } 34 form.render('select'); //用ajax追加的需要這樣渲染一下 35 36 }, 37 error : function() { 38 } 39 }) 40 $("#cname").children().remove(); 41 $.ajax({ 42 type : "post", 43 url : "../class/selectclass.do", 44 dataType : "json", 45 sync : "false", 46 success : function(data) { 47 for (var a = 0; a < data.data.length; a++) { 48 $("#cname").append( 49 "<option class='tname' value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>") 50 } 51 form.render('select'); //用ajax追加的需要這樣渲染一下 52 53 }, 54 error : function() { 55 } 56 }) 57 58 //form.on('select(username)', function(data) {//給隱藏的input賦值（機構id） 59 //$("#yincang").val(data.value); 60 //}); 61 62 }); 63 </script>表單獲取Value數據：
1 function formLoad(element,data){ 2 var input = document.getElementById(element).getElementsByTagName('input'); 3 for(var i =0;i < input.length;i++){ 4 var inputname = input[i].name; 5 for(var j in data){ 6 if(inputname == j){ 7 input[i].value = data[j]; 8 } 9 } 10 } 11 }數據表格重載傳參數，模糊查詢：
這是搜索按鈕，點擊觸發重載：
1 <div class="demoTable"> 2 搜索角色： 3 <div class="layui-inline"> 4 <input class="layui-input" name="name" id="demoReload" 5 autocomplete="off"> 6 </div> 7 <button class="layui-btn" style="transform: translateY(-10px);" 8 data-type="reload">搜索</button> 9 </div>這是重載事件：
不需要指定重載的url，只需要根據表格的ID就可以重載，這里的ID是在layui聲明的的ID，不是普通的標簽中id="idno"這樣的id，然后再where里面傳參數
1 <script> 2 layui.use('table', function(){ 3 var table = layui.table; 4 var $ = layui.$, active = { 5 reload: function(){ 6 var demoReload = $('#demoReload'); 7 8 //執行重載 9 table.reload('idTest', { 10 page: { 11 curr: 1 //重新從第 1 頁開始 12 }, 13 where: { 14 name: demoReload.val() 15 } 16 }); 17 } 18 }; 19 20 $('.demoTable .layui-btn').on('click', function(){ 21 var type = $(this).data('type'); 22 active[type] ? active[type].call(this) : ''; 23 }); 24 }); 25 </script>添加或修改打開一個頁面后，關閉頁面重載原來頁面數據表格
1 $("#addBookbtn").click(function(){ 2 layer.open({ 3 type: 2, 4 title:['添加新書信息','font-size:22px'], 5 area: ['400px', '420px'], 6 content: '../jsp/addbook.jsp', 7 cancel: function(index, layero){ 8 layer.confirm('是否關閉?', {icon: 3, title:'提示'}, function(index){ 9 layer.close(index); 10 table.reload("booktable"); 11 }); 12 } 13 }); 14 });?
轉載于:https://www.cnblogs.com/jiangwz/p/7899424.html
總結
- 上一篇： 京东云Ubuntu下安装mysql
- 下一篇： 24.8. UNION