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 });