layui使用总结

1.富文本编辑器（在官方文档上的导航栏找不到，但是确实是存在，哈哈）

https://www.layui.com/doc/modules/layedit.html

2.layui的日期的限制（写法很多，以下为在整个项目中用的较多的一个方法）

开始日期选中后，结束日期必须在开始日期之后

   layui.use('laydate', function () {
        var laydate = layui.laydate;
        //开始日期
        var startDate = laydate.render({
            elem: '#startTime'
        , type: 'date'
        , done: function (value, date) {
            endDate.config.min = {
                year: date.year,
                month: date.month - 1,
                date: date.date
            };
        }
        });
        //结束日期
        var endDate = laydate.render({
            elem: '#endTime'
              , type: 'date'
              , done: function (value, date) {
                  startDate.config.max = {
                      year: date.year,
                      month: date.month - 1,
                      date: date.date
                  }
              }
        });
    })

3.layui分页

利用layui实现新闻列表的分页 

    //ajax请求后台数据
    function getPageInfo(limit, current) {
        $.ajax({
            type: "post",
            url: "/PolicyPublish/NewsTableList",
            data: {
                page: current,
                rows: limit,
                StartTime: $("#startTime").val(),
                EndTime: $("#endTime").val(),
                newsTitle: $(".titleInput").val(),
                NewsType: $(".typeSelect").val(),
            },
            success: function (data, status) {
                ContentRender(data);//渲染页面数据
                toPage(data.count, limit, current);//然后进行分页的初始化
            }
        });
    }
  function ContentRender(data) {
        $(".contentBox").html("");
        $.each(data.data, function (i, v) {
            $(".contentBox").append(" <div data=" + v.UUID + " class=\"layui-col-xs12 layui-col-sm12 layui-col-md12 newsList\"> <div class=\"layui-col-xs10 layui-col-sm10 layui-col-md10\"><div class=\"newsTop\"><input type=\"checkbox\" class=\"checked\"><a   target=\"_parent\"  href=\"/PolicyPublish/PolicyPublishContent?uuid=" + v.UUID + "&page=" + page + "&view=" + '政策' + "\"><h4>" + v.NewsTitle + "</h4></a> </div><div class=\"newsBottom\"> <p>" + v.NewsTextPlain + "</p><div><span>" + v.StrNewsTime + "</span><a target=\"_parent\" href=\"/PolicyPublish/PolicyPublishContent?uuid=" + v.UUID + "&page=" + page + "\">" + '阅读原文' + "</a></div></div></div><div class=\"layui-col-xs2 layui-col-sm2 layui-col-md2 toolbar\"><span class=\"read\">" + '解读' + "</span><span><a href=\"/PolicyPublish/EditPolicyPublish?uuid=" + v.UUID + "\" class=\"edit\">" + '编辑' + "</a></span><span class=\"delete\">" + '删除' + "</span></div></div>");
            Power();
        });
    }
    //分页
    function toPage(total, limit, current) {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //调用分页
            laypage.render({
                elem: 'paged'
                , count: total //这个是后台返回的数据的总条数
                , curr: current
                , hash: 'fenye' //自定义hash值
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {
                    if (!first) { //一定要加此判断，否则初始时会无限刷新
                        var currentPage = obj.curr;
                        }
                }
            });
        });
    };

4.layui的弹出层

这边只有一个问题，就是右上角的按钮的样式，刚开始设置  closeBtn: 1或者  closeBtn: 2都不会改变样式，后来加上title：“导出”后才生效，具体原因不明，title不能为空；

5.layui动态赋值select下拉框

首次使用是明明已经ajax取到数据，并且append到select框，但下拉框中确实是没有，开发者模式下查看也显示已经渲染上去,后来仔细查看官方文档发现，需要form,render()一下才会渲染上去。详细用法可查看官方文档https://www.layui.com/doc/modules/form.html

  $.ajax({
                    url: "/EnvironmentMonitor/GetAnalogSensor",
                    type: "GET",
                    dataType: "json",
                    data: {
                        mineCode: data.value,
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            if (data.count == 0) {
                                layer.msg("当前煤矿没有传感器类型！")
                            } else {
                                for (var i = 0; i < data.data.length; i++) {
                                    $("#equcode").append("<option value=" + data.data[i].Value + ">" + data.data[i].Text + "</option>")
                                }
                                //需要渲染一下
                                form.render();
                            }
                        }
                    },
                    error: function () {
                        console.log("error")
                    }
                });

6.获取select下拉框选中的value和text

查看文档只有获取value的方法，没找到获取text的方法，以下为在项目中获取text和value的方法。

如若官方文档有获取text的方法，请大家留言提供，谢谢了；

​
 <form class="layui-form" action="">
        <div class="layui-inline" style="width:100%">
             <div class="layui-input-inline" style="width:50%;">
               <select name="modules" lay-verify="required" lay-search="" lay-filter="test" id="CoalSelect"></select>
             </div>
        </div>
 </form>
  layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            ,layer = layui.layer
        form.on('select(test)', function (data) {
            coalName = data.elem[data.elem.selectedIndex].text;//获取选中值的text
            coalCode = data.value;//获取选中值的value
           
        });
  })

​

7.上传附件（此功能很好用，官方文档也很齐全）

 <button type="button" class="layui-upload-button layui-btn" id="test1" style="padding:0 5px!important;flex-shrink:0;">
                    上传附件
     <i class="layui-icon">&#xe67c;</i>
 </button>
<script>
   //文件上传
        var uploadFlag = 0;
        var uploadInst = upload.render({
            elem: '#test1'   //绑定元素
        , url: '/InsureStitution/Upload'//上传接口
        , accept: 'file'
        , exts: 'doc|docx|pdf|bmp|jpg|png'
        , multiple: true
        , size: 51200
        , alldone: function (obj) {//上传完毕回调
            console.log(obj.total);//得到总文件数
            console.log(obj.successful);//请求修改成功的文件数
            console.log(obj.aborted);//请求失败的文件数
        }
        , before: function (obj) {
          layer.load(); //上传loading
         //在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。
        }
        , done: function (res, index, upload) {
          layer.closeAll('loading'); //关闭loading
         //上传接口请求成功的回调,在上传接口请求完毕后触发，但文件不一定是上传成功的，只是接口的响应状态正常（200）
        }
        , error: function () {
            //请求异常回调
            layer.closeAll('loading');
        }
        });
</script>

未完，待续。。。