西瓜の

-人类是因为记录才进入文明-

2019/03/15
22:52
technology

layui使用笔记

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

1


2


3


4


5


6

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

layedit修改表情图片的style:

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

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

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


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

其他:

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

2019/04/14更新:

在上周修改数据的时候,类似这种:


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

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


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


在传参数之前先encodeURIComponent(d.reportingConditions)编码,然后使用的时候用decodeURIComponent()解码就行了!