学习layui分享
嘿，我回来。感觉好久好久没有维护博客了。 这篇文章应该是2019年第一篇文章。。 又换一份工作， 是不是感觉博主一点都不稳定，一年换了三家公司呵呵呵呵呵。。。
既然说到这里做为一个北漂打工来说，我真心觉得稳定点好，感觉真的老了。。。
选工作一定要选好公司！！！选好公司！！！选好公司！！！
北漂是一种情怀，但是没人会认这种情怀，在这适者生存的大环境里你只能加倍努力，充实自己。。加油北漂游子。
最近玩layui回显玩的挺爽的。。给大家分享一下。
说到写layui，我前两家公司基本没写过前段代码，做app开发和小程序开发做多了，真的感觉很省事，直接提供API接口就可以了。一个超级牛逼的前段真的很让后端省劲啊。给大家爆一张前端技术超牛逼的小哥哥（单身哦！）。
我刚到我新换的这家公司，写layui代码都写哭了。。各种回显--数据表格回显、复选框回显、单选框回显 各种js各种写，第一次用layui感觉这么难用。很晚的时候独自发了一个朋友圈，北上广深不相信眼泪（加油~北漂游子们 越努力越幸运！）然后通宵把layui文档吃了一遍。。真的好艰难。。。
熬过来了，就是春天呢。不过现在layui基本的开发我感觉已经没问题了。
终、 我的故事结束了。现在给大家分享一下layui爬过的坑，已经各种回显的使用。
先给大家介绍一下什么是layui 
layui的存在价值（摘自百度百科）
甩一个layui的官网 点我chua的一下就进官网了
- layui官网下载layui的开发包 目录结构如下：
- 然后就可以进行开发了。
我给大家甩一个很简单的数据表格使用： 点我快速进layui的数据表格DOC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态数据表格dev</title>
<link rel="stylesheet" href="layui.css路径" media="all">
</head>
<body>
<table id="dataTable" lay-filter="user"></table>
<script src="layui.js路径"></script>
<script>
//使用layui的table
layui.use('table', function(){
//用layui的table
var table = layui.table;
//第一个实例
serach = table.render({
elem: 'dataTable'
,height: 312
,url: 'user/getUsers' //后台数据接口路径如果有参数直接用get形式发送？拼接
,page: true //开启分页 layui的分页我觉得真的好强大。。。直接开启然后就会往后台传输页面和每页显示大小layui分页加上mybatisPlus一起用真的是绝配。
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}//field是数据接口返回的字段名称 自动填充数据
,{field: 'username', title: '用户名', width:80}//width ：宽度 title数据表格的标题
,{field: 'sex', title: '性别', width:80, sort: true}//sort排序
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>
以上就是数据表格的基本使用。
下面是我自己总结的常用问题解决方案。
Q：返回的数据格式怎么出 答：随意格式取出即可，把下面的代码放入即可取参数。
parseData: function (res) { //res 即为原始返回的数据
return {
"code": 0, //解析接口状态
"msg": "ok", //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows //解析数据列表
};
}
Q:数据表格的序号怎么处理： 答：直接在标题添加下面代码
//表头
{
field: 'index',
title: '序号',
width: '6%',
templet: '#indexTpl'
}
<!--序号自增-->
<script type="text/html" id="indexTpl">
{{d.LAY_TABLE_INDEX+1}}
</script>
Q:如果把数据表格根据状态回显相应的信息 比如1可用 0不可用 答：
{
field: 'status',//后端返回的字段值
title: '状态',
templet:'#statusTypes'
}
<script type="text/html" id="statusTypes">
//d是固定写法不用管。
{{# if (d.status=='1') { }}
<span>可用</span>
{{# } else if(d.status=='2'){ }}
<span>不可用</span>
{{# } else{ }}
<span>数据有误</span>
{{# }}}
</script>
Q:数据表格的查询 答： 1.给数据表格加一个名字 
2.写查询方法
//监听查询按钮
form.on("submit(query)", function (data) {
console.info(data)
var keyWord = data.field.keyWord;
//表格重新加载
search.reload({
where: {
keyword: keyWord
}
});
return false;
});
Q:数据表格的回显 数据表格放到后台即可。返回参数map加上这个参数即可 
以上就是数据表格的基本使用欢迎大家可以给我交流。
下面继续跟大家分享一下弹出层。 点我快速进入弹出层地址：
layer.open({
type: 2,//layui类型
title: ['添加用户'],
area: ['73%', '90%'],//弹出层的大小
shadeClose: true,//是否显示关闭按钮
btnAlign: 'c',//
btn: ['确定', '取消'],//弹出层按钮
content: 'user_add.html',//弹出层页面
success: function (layero, index) {
打开弹出层执行方法
},
yes: function (index, layero) {
//点击弹出层确定执行方法
},
cancel: function (index, layero) {
//取消弹出层执行的放
}
});
弹出层多少东西，可以从layui直接粘代码，就是最后三个按钮事件使用方法。 给大家说一下下拉框的数据动态填充
<div class="layui-inline">
<label class="layui-form-label">KingYiFan是男是女：</label>
<div class="layui-input-inline layui-form">
<select lay-verify="" lay-search="" id="sex">
<option value="">请选择</option>
</select>
</div>
</div>
//初始化下拉框数据 页面数据
function initSexData() {
$.ajax({
type: "get",//接口请求方式
url: "initSex",//接口地址
async: false,//是否异步
dataType: 'json',
success: function (res) {
$.each(res, function (index, data) {
var option = $("<option>").val(data.id).text(data.sex);
$("select[id=sex]").append(option);
});
}
});
}
以上是下拉框动态添加 下面是数据下拉框回显
$("[name='sex']").val("1");
以上就是下拉框的回显。layui是双向绑定的所以直接赋val值即可回显
//多选框赋值
var sex = $("input[name='sex']");
for (var i = 0; i < sex.length; i++) {
var val = sex[i].value;
if (data.sex == val) {//data的sex是后台传过来的
sex[i].checked = true;
}
}
不管怎么操作别忘记
layui.form.render();//重新绘制表单，让修改生效
由于有公司信息我部分打码，请大家理解。
这就是layui学习分享，哪里不懂可以私信我哦！下一篇文章给大家分享layui动态三级菜单展示。
鼓励作者写出更好的技术文档，就请我喝一瓶哇哈哈哈哈哈哈哈。。
微信：
支付宝：
感谢一路支持我的人。。。。。
Love me and hold me
QQ:69673804（16年老号）
EMAIL:69673804@qq.com
友链交换
如果有兴趣和本博客交换友链的话，请按照下面的格式在评论区进行评论，我会尽快添加上你的链接。
网站名称：KingYiFan’S Blog
网站地址：http://blog.cnbuilder.cn
网站描述：年少是你未醒的梦话，风华是燃烬的彼岸花。
网站Logo/头像：[头像地址](https://blog.cnbuilder.cn/upload/2018/7/avatar20180720144536200.jpg)
