layus

1、清除下拉框选择框 parent.$(“#sel”).empty();

2、获取form 的值 var forms = $(‘#forms’).serialize();

3、页面层 获取input输入框的值 layer.open({ type: 1, btn:[‘添加’,’取消’], content: (“#release-order-area”).html(),                  yes: function(index,layero){                      var ivalue = (“#release-order-area”).html(),                  yes: function(index,layero){                      var ivalue = (layero).find(“input[name=’destination’]”).val(); console.log(ivalue); } }）

4、三级联动

<div class="layui-form-item"> <label class="layui-form-label">出发地址：</label> <div class="layui-input-inline provinceId"> <select id="provinceId" name="provinceId" lay-filter="provinceId" class=" select "> {volist name="province" id="vo"} <option value="{$vo.adcode}">{$vo.name}</option> {/volist} </select> </div> <div class="layui-input-inline"> <select id="cityId" name="cityId" lay-filter="cityId" class=" select" > </select> </div> <div class="layui-input-inline"> <select id="areaId" name="areaId" class=" select" ></select> </div> </div> //省份 form.on('select(provinceId)', function(data) { var province = data.value; $('#cityId').html(""); $('#areaId').html(""); if(!province)return; $.ajax({ type: "POST", url: "{:url('address')}", dataType: 'json', data: {'adcode': province}, success: function (data) { console.log(data); $('#cityId').append(data); form.render('select'); }, error: function (data) { console.log(data); } }) }); //城市 form.on('select(cityId)', function(data) { var cityId = data.value; $('#areaId').html(""); if(!cityId)return; $.ajax({ type: "POST", url: "{:url('address')}", dataType: 'json', data: {'adcode': cityId}, success: function (data) { console.log(data); $('#areaId').append(data); form.render('select'); }, error: function (data) { console.log(data); } }) });

四、监听提交

<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> //Demo layui.use(['form','layer'], function(){ var form = layui.form ,$=layui.jquery ,layer=layui.layer; //监听提交 form.on('submit(formDemo)', function(data){ data=data.field; $.ajax({ type:"POST", url:"{:url('dd')}", dataType:"json", data:data, success:function (data) { if (data.code==200){ layer.msg(data.msg,{icon:6},function () { location.reload(); }) }else { layer.msg(data.msg,{icon:5}) } } }); return false; }); });

5、监听单选按钮事件 lay-filter=”tcszRadio”

<input type="radio" name="xzdl" value="DL1" id="rad1" title="一级" lay-filter="ss" checked="true"> layui.use('form', function(){ form = layui.form; form.on('radio(ss)', function(data){ console.log(data.elem); //得到radio原始DOM对象 console.log(data.value); //被点击的radio的value值 }); });

6、去掉指定样式 removeAttr 7、array_filter($data) 去除数组中的空字符 8、监听下拉框选择事件

<select lay-filter="test"></select> var form = layui.form(); form.on('select(test)', function(data){ console.log(data); });

9、选项卡 需要增加 element 10、单选多选按钮显示 需要增加

layui.use(['form', 'layedit', 'laydate','upload'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate ,upload = layui.upload; }）;

11、倒计时

var thisTimer, setCountdown = function(){ var date = $(".time1").val(); //时间 "2018-9-1 16:05:03" var endTime = new Date(date) //结束日期 ,serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的 clearTimeout(endTime); util.countdown(endTime, serverTime, function(date, serverTime, timer){ var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒'; lay('.time2').html(str); thisTimer = timer; }); }; setCountdown(); //倒计时

11、html 多选

指定的选择 其他的去掉 $(compensatevalue).attr("selected","selected").siblings().removeAttr("selected");

12、监听input 输入事件 $(“.text_box”).on(‘input’,function(){ })

13、限制最大最小日期(限制时间时要写日期)

var a = laydate.render({ elem: '#id', done: function(value, date, endDate) { d.config.min = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds } } }); var d = laydate.render({ elem: '#name', min: '2018-09-20' });

15、限制最小最大日期

//开始时间时间 var start = laydate.render({ elem: '#beginTime', min: '1900-1-1 00:00:00', max: '2099-6-16 23:59:59', trigger: 'click', //采用click弹出 done: function(value, date, endDate){ end.config.min = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds }; //开始日选好后，重置结束日的最小日期 end.config.value = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds }; //将结束日的初始值设定为开始日 } }); //结束时间 var end = laydate.render({ elem: '#endTime', min: '1900-1-1 00:00:00', max: '2099-6-16 23:59:59', trigger: 'click', //采用click弹出 done: function(value, date, endDate){ start.config.max = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds }; //结束日选好后，重置开始日的最大日期 } });