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' //主要是这里哦
});

【3】检测select的change事件

页面代码如下：

<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是固定写法 不是选择器
});

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