【1】弹出层子元素获取父页面dom元素值
如下所示，点击添加关系数据会弹出子页面，在子页面需要获取父页面的8。
假设8对应dom id为orderId，子页面代码示例如下：
var text = parent.window.$('#orderId').val(); console.log("获取的父页面orderID："+text);
子页面直接获取父页面的变量
父页面设置变量如下：
var fieldType1=[1];//单选数量
那么子页面可以直接使用如下代码获取：
parent.fieldType1
【2】日期时间控件点击闪没
有时页面高度不够，会出现点击控件闪现一下就没有了的情况，可以修改代码如下：
laydate.render({ elem: '#deadTime', type: 'datetime', trigger: 'click' //主要是这里哦 });
监听日期时间空间的确定按钮
laydate.render({ elem: '#beginDate', type: 'datetime', trigger: 'click', done:function(value,data){ console.log($(this.elem)) console.log(value) app.$data.beginDate=value; console.log(data) } });
【3】检测select的change事件
① from监听
页面代码如下：
<div class="layui-input-inline"> <select id="type" name="type" lay-filter="type" > <option value="2">学生</option> <option value="3">企业</option> </select> </div>
JS如下：
form.on('select(type)', function(data){ console.log(data) if(data.value==2){ $("#companyDiv").hide(); } if(data.value==3){ $("#companyDiv").show(); } form.render('select');//select是固定写法 不是选择器 });
② layui-form表单中的select Vue使用@change监听
在layui中，使用form表单，需在form中添加class=“”layui-form“”，form属性才会生效，但是在配合使用Vue监听改变事件时，@change监听会失效：
<form style="float: left;" class="layui-form we-search"> <div class="layui-inline"> <select v-model="searchParam.provinceCode" name="provinceCode" @change="changeProvince" > <option v-for="item in provinceList" v-bind:value="item.code">{{item.name}}</option> </select> </div> <div class="layui-inline"> <input type="text" v-model="searchParam.name" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"> </div> <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon"></i></button> </form>
以下是解决办法：
- 删除form中的
class="layui-form"，但是需要注意会影响原始form表单 - 在select中添加
lay-filter="checkType"，在layui.use使用form.on进行监听，再调用Vue中的方法就可以了
// 修改select <select v-model="provinceCode" name="provinceCode" lay-filter="checkType" > // 监听省份变动 form.on('select(checkType)', function(data){ console.log(data.value);//得到被选中的值 console.log(data.elem);//得到select原始DOM对象 app.changeProvince(data.value);//调用Vue中的方法 })
【4】行工具头条件显示
<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>
【5】自定义校验
//自定义验证规则 form.verify({ email: [/(.+)@.+\..+$/, '请输入正确的邮箱'], score: function (value) { var regexStr=/\d*\.\d*$/; var regex = new RegExp(regexStr); if(value>100||value<10||regex.test(value)){ return "请输入合法值！"; } } });
【6】分页插件
HTML如下所示：
<div class="layui-row text-center"> <div id="laypage"></div> </div>
JS代码如下：
var pageIndex = 1; var pageSize = 6; var totalCount = 6; /*初始化layui的分页插件*/ function initLayui() { layui.use(['laydate','laypage'], function () { var laypage = layui.laypage, laydate = layui.laydate; //执行一个laypage实例 laypage.render({ elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号 , count: totalCount //数据总数，从服务端得到 ,theme: '#FF5722' ,groups:7 // 连续出现的页码个数 默认值5 , limit: pageSize //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 ,curr: pageIndex ,skip:true , limits: [ 6,8, 10] //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] , jump: function (obj, first) { //obj包含了当前分页的所有参数，比如： pageSize = obj.limit; pageIndex = obj.curr; //首次不执行 if (!first) { pagination(obj.curr, obj.limit); } } }); }); }
【7】整合Ajax发送请求
期望发送参数以FORM DATA窗格体格式发送，如下图所示：
这里需要注意processData、contentType设置的值。
$.ajax({ url: "/goods/reptile?goodsName="+$("#name").val()+"&secondCId="+$("#secondCId").val(), type: "post", data: {"number":$("#number").val()}, processData: true, contentType: "application/x-www-form-urlencoded", beforeSend: function(){ //返回的参数item，即为当前的input DOM对象 index = layer.load(1,{shade: [0.3,'grey']}); }, success: function (res) { //关闭遮罩层 layer.close(index); if (res.success == true) { layer.msg(res.msg, { icon: 1, time: 1500 },function () { table.reload('test-table-reload', { page: { curr: 1 //重新从第 1 页开始 } ,where: $('#search-form').parseForm() }); }); } else { layer.msg(res.msg, { icon: 2, time: 1500 },function () { table.reload('test-table-reload', { page: { curr: 1 //重新从第 1 页开始 } ,where: $('#search-form').parseForm() }); }); } }, error: function (res) { layer.msg(res, {icon: 2, time: 1500}); }, complete: function () { } });
【8】FormData的使用
初始化空对象
//通过FormData构造函数创建一个空对象 var formdata=new FormData();
追加数据
//可以通过append()方法来追加数据 formdata.append("name","jane");
读取数据
//通过get方法对值进行读取 console.log(formdata.get("name"));
修改数据
//通过set方法对值进行设置 formdata.set("name","janus");
判断key是否存在
formdata.has("name")
删除数据
//删除key为name的值 formdata.delete("name")
