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文件
使用时加载自己需要的模块就行
layui.use(['jquery', 'layedit', 'form'], function () {
var $ = layui.jquery,
layedit = layui.layedit,
form = layui.form,
layer = layui.layer;
})
如果觉得麻烦，也可以直接引入全部：
这样就可以直接使用全部模块了；
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
image.png
2
image.png
3
image.png
4
image.png
5
image.png
6
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 抖动
(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
以上大多是使用时我遇到的一些问题，希望对同样遇到此问题的能有所帮助。
其他：
2019/04/14更新：
在上周修改数据的时候，类似这种：
image.png
，在点击编辑的时候，有些行可以正常的使用，有些行会报这个错误，
image.png
Uncaught SyntaxError: Invalid or unexpected token
使用的toolbar入下：
image.png
后来发现reportingConditions这个参数中有空格，而onclick属性中不允许有空格
最终解决：
image.png
在传参数之前先encodeURIComponent(d.reportingConditions)编码，然后使用的时候用decodeURIComponent()解码就行了！
6053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
