学习layui分享
先给大家介绍一下什么是layui
file
layui的存在价值（摘自百度百科）
file
甩一个layui的官网
- layui官网下载layui的开发包 目录结构如下：
file
- 然后就可以进行开发了。
我给大家甩一个很简单的数据表格使用：
file
(adsbygoogle =window.adsbygoogle ||[]).push({});
<!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.给数据表格加一个名字
file
2.写查询方法
//监听查询按钮
form.on("submit(query)", function (data) {
console.info(data)
var keyWord = data.field.keyWord;
//表格重新加载
search.reload({
where: {
keyword: keyWord
}
});
return false;
});Q:数据表格的回显 数据表格放到后台即可。返回参数map加上这个参数即可
file
以上就是数据表格的基本使用欢迎大家可以给我交流。
下面继续跟大家分享一下弹出层。
file
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动态三级菜单展示。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读