layui目录介绍：

 ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

layui可以采用全部加载或者按需加载两种方式使用
如果想要提高性能可以按需加载：
引入layui.js文件

      <script src="/lib/layui/layui.js"></script>

使用时加载自己需要的模块就行

layui.use(['jquery', 'layedit', 'form'], function () {
    var $ = layui.jquery,
        layedit = layui.layedit,
        form = layui.form,
        layer = layui.layer;
})

如果觉得麻烦，也可以直接引入全部：

 <script src="/lib/layui/layui.all.js"></script>

这样就可以直接使用全部模块了；
layui自带了稳定jquery模块，你可以使用layui中的jquery，也可以导入其他的jquery库；

因为layui是重新渲染了页面的，所以在数据更新时会出现很多问题。
使用笔记：

常用layui属性：

lay-filter 一般用于监听
lay-verify 用于表单验证
lay-submit 表单提交

1、 表单元素初始化值

form.val('addArticleForm', {  //form的lay-filter属性
        'remarks': sortid        //元素的name属性
    });

2、监听事件

 //release 为元素的lay-filter属性
//submit为监听的事件或者标签
form.on('submit(release)', function (data) {
  
}）;

3、表单验证(表单验证要写在表单提交之前，在提交时会自动验证)

form.verify({
        title: function (val) {
            if (val.trim().length == 0) {
                return '文章标题不能为空';
            }
        },
    });

4、表单提交

(1)form提交

form.on('submit(release)', function (data) {
  var field = data.field;

})；

(1)ajax提交（return false 代表禁止form提交）

form.on('submit(release)', function (data) {
  var field = data.field;
  retrun false；
})；

5、分页器

  laypage.render({
        elem: 'indexPage' //注意，这里的 indexPage是 ID，不用加 # 号
        , count: count //数据总数，从服务端得到
        , theme: '#CDB5CD'  //颜色
        , limit: 2  //每页显示数量
        , curr: 1//获取起始页
        , prev: '上一页'
        , next: '下一页'
        , skip: true 
        , layout: ['count', 'prev', 'page', 'next', 'skip']
        , jump: function (obj, first) {
            //首次不执行
            //do something
            if (!first) {
                location.href = "/admin/Index/toArticles_drafts?sortid=" + sortid + "&page=" + obj.curr;
            }
        }
    });

6、layui表格

table_sort = table.render({
        id: 'sortid',  //这里可以作为保留字段，当你不想将某个字段显示出来却要使用它时，可以将此字段写在这里，用逗号隔开
        elem: '#sort_table',
        cols: [[
            {title: '序号', type: 'numbers', width: '10%', align: 'center', fixed: 'left'}
            , {field: 'sortname', title: '分类名', align: 'center', width: '25%'}
            , {field: 'createtime', title: '创建时间', align: 'center', width: '25%'}
            , {title: '操作', align: 'center', toolbar: '#bar'}
        ]],
        url: '/admin/ArticlesSort/getArticlesSortByPage',
        where: {  //参数
            key: ''
        },
        page: true,  //开启分页
        limit: 10,
        limits: [10, 20, 30, 40],
        loading: true,  //加载动画
        text: {
            none: '没有找到数据QAQ'
        }
    });

7、layui弹出层

基础参数

layuiicon 显示的icon

image.png

image.png

image.png

image.png

image.png

image.png

time 自动关闭所需毫秒

例：time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒），如果不写一般默认是为0，提示框默认为3000

anim 弹出动画

anim: -1 不显示动画
anim: 0 平滑放大。默认
anim: 1 从上掉落
anim: 2 从最底部往上滑入
anim: 3 从左滑入
anim: 4 从左翻滚
anim: 5 渐显
anim: 6 抖动

详细参数见文档：https://www.layui.com/doc/modules/layer.html

（1）带输入框的弹出层(可用于敏感操作前的密码验证)

//formType： 0（文本）默认1（密码）2（多行文本）
layer.prompt({formType: 1,title: "请输入密码"}, function (val, index) {
 if (val == "xxx") {
    layer.msg("密码正确")
}else{
   layer.msg("密码错误")
}
}）；

（2）layui确认提示框

layer.confirm("确定要公之于众吗QVQ？", {btn: ['是的,我确定', '还是算了吧']}, function (index) {
 layer.close(index);
}）

layer.confirm("执行哪个操作？", {btn: ['A操作', 'B操作']},
 function () {
  //A操作
}，
function () {
//B操作
})

layer.confirm('执行哪个操作？', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

（3）layui提示：

信息框：

layer.alert('信息框', {icon:1},function(index){
 //回调事件
  layer.close(index);
}); 

提示框：

layer.msg('提示框', {
  icon: 1,
  time: 1500//1.5秒关闭（如果不配置，默认是3秒）
}, function(){
  //回调事件
});  

7、layui富文本编辑器

  /**
     * 初始化富文本编辑器
     */
    var edit = layedit.build('whisperEditor', {
        uploadImage: {  //图片上传接口
            url: '/admin/Index/uploadImg'
        }
    });

ps:

layedit修改预览图片的style(修改大小)：

   打开layedit.js文件,搜索“img{”，然后再后边添加需要的style

image.png

layedit修改表情图片的style：

打开layedit.js文件,搜索“img{”，在后边增加style：""

image.png

layedit修改上传的图片储存时的style(即编辑器里未解析的img标签)：

打开layedit.js文件,搜索“src: e.data.src,”，然后再后边添加需要的style

image.png

以上大多是使用时我遇到的一些问题，希望对同样遇到此问题的能有所帮助。

其他：

基于layui的下拉多选框：https://hnzzmsf.github.io/example/example_v4.html

2019/04/14更新：

在上周修改数据的时候，类似这种：

image.png

，在点击编辑的时候，有些行可以正常的使用，有些行会报这个错误，

image.png

Uncaught SyntaxError: Invalid or unexpected token
使用的toolbar入下：

image.png

后来发现reportingConditions这个参数中有空格，而onclick属性中不允许有空格
最终解决：

image.png

链接：https://wmelon.cn/134.html