layui使用实践总结

【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事件

① form监听

页面代码如下：

<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">&#xe615;</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中的方法
  })
  

③ 多个select级联动态更新

页面代码：：

<div class="layui-form-item">
    <label for="name" class="layui-form-label">
        <span class="we-red">*</span>所属学院
    </label>
    <div class="layui-input-inline">
        <select id="facultyId" name="facultyId"  class="layui-select"  lay-filter="checkType">
            <option v-for="item in facultyList" :value="item.id">{{item.name}}</option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label for="name" class="layui-form-label">
        <span class="we-red">*</span>所属专业
    </label>
    <div class="layui-input-inline">
        <select id="majorId" name="majorId"  class="layui-select"  >
            <option v-for="item in majorList" :value="item.id">{{item.name}}</option>
        </select>
    </div>
</div>

期望通过学院的选择动态获取学院下的专业列表，测试发现专业select不能再次渲染，这里采用VUE的updated钩子实现效果。

// 监听变动
form.on('select(checkType)', function (data) {
   console.log(data.value);//得到被选中的值
   console.log(data.elem);//得到select原始DOM对象
   app.getMajorList(data.value);//调用Vue中的方法

})
updated: function () {
    this.$nextTick(function () {
        layui.use(['form'], function(){
            layui.form.render('select')
        });
    });
},

【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")