layui说明文档：layui.yiidian.com/doc/element…
layuiMiNi 后台管理系统：layuimini.99php.cn/
HBuilder
“文件”菜单→“新建”→“html文件”， 可以新建一个html文件输入关键字时，具有智能提示列表:用上下键移动到需要的条目,再用Ctrl+回车确定
下载layui
1.栅格系统
列偏移给右边的元素加
2.基本元素
2.1 按钮
2.2 导航
2.2.1 导航
需要加载模块
“徽章”效果直接放到标签内文字的旁边
2.2.2 选项卡
2.2.3 表格
2.2.4 表单
（2）复选框
（3） 开关
（4） 单选框
（5） 文本域
（6） 组装行内表单
（7） 忽略美化渲染
（8） 表单方框风格
2.3 组件
2.3.1 弹出层
下载后解压，把layer.js和layer.css拷贝到项目下（新建layer目录）
弹出层的使用，具体参考layui官方文档
2.3.2 日期和时间选择
2.3.3 分页
（1）分页
（2）切换分页的回调
当前是第几页，本页共多少条数据2.3.4 数据表格
表格初始化渲染3种方式：方法渲染常用！
`
<!-- 4.表头工具栏 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- lay-event绑定事件 -->
<!-- <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<!-- 5.行工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use('table', function(){
var table = layui.table;
// 第一个实例
table.render({
elem: '#demo'
,height: 312
,url: './js/user.json' //数据接口,创建自己的json数据文件,后期调用后端数据接口
,cols: [[ //表头
// 3.表头设置系列号
{field:'aa',type:'numbers'},
// {checkbox: true},
{field:'aa',type:'checkbox'},
{field: 'id', title: 'ID', width:100, sort: true, fixed: 'left',hide:true},
{field: 'username', title: '用户名', width:150,sort:true},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'city', title: '城市', width:80},
{field: 'sign', title: '签名', width: 177},
// 5.绑定行工具,可以给其加图标
{field:'操作',toolbar:"#barDemo"}
]],
// 1. 开启分页
page:true,
// 4.绑定表格头工具栏
toolbar:"#toolbarDemo"
});
});
</script>
</body>
表格重载
点击搜索按钮，会刷新页面，因为这是自己的json数据文件；需要和后端数据结合，调用后端数据接口，这块就可以显示搜索效果
<html>
<head>
<meta charset="utf-8">
<title>数据表格（开启分页）</title>
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
<script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<!-- 搜索框 -->
<div class="demoTable">
<span style="">搜索ID：</span>
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" placeholder="请输入内容",autocomplete="off">
</div>
<button id="searchBtn" class="layui-btn">搜索</button>
</div>
<!-- 准备容器 -->
<!-- test用来绑定事件 -->
<table id="demo" lay-filter="test"></table>
<!-- 4.表头工具栏 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- lay-event绑定事件 -->
<!-- <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<!-- 5.行工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
// 绑定事件 需要导入jquery，也可以不需要
var $ = layui.jquery; //获取jquery对象
// 第一个实例
table.render({
elem: '#demo'
,height: 312
,url: './js/user.json' //数据接口,创建自己的json数据文件,后期调用后端数据接口
,cols: [[ //表头
// 3.表头设置系列号
{field:'aa',type:'numbers'},
// {checkbox: true},
{field:'aa',type:'checkbox'},
{field: 'id', title: 'ID', width:100, sort: true, fixed: 'left',hide:true},
{field: 'username', title: '用户名', width:150,sort:true,edit:'text'},
{field: 'sex', title: '性别', width:80, sort: true,edit:'text'},
{field: 'city', title: '城市', width:80},
{field: 'sign', title: '签名', width: 177},
// 5.绑定行工具,可以给其加图标
{field:'操作',toolbar:"#barDemo"}
]],
// 1. 开启分页
page:true,
// 4.绑定表格头工具栏
toolbar:"#toolbarDemo"
});
// 6.给表头绑定事件,监听事件
// obj是事件对象,包含事件的相关信息,可以查询;checkStatus是当前选中对象
table.on('toolbar(test)',function(obj){
// console.log(obj)
// 获取表格当前选中记录对象,返回数据
var checkStatus = table.checkStatus(obj.config.id)
// console.log(checkStatus)
// 获取事件名
var eventName = obj.event;
// 判断事件名,执行对应的代码
switch (eventName){
case 'getCheckData':
// 获取被选中的记录数组
var arr = checkStatus.data;
// 打印出被选中的数据,将数组数据转换成json字符串形式
// 相当于数绑定了点击事件
layer.alert(JSON.stringify(arr));
break;
case 'getCheckLength':
// 获取被选中的记录数组
var arr = checkStatus.data;
// 获取选中了几条数据,弹出层显示
layer.msg('选中了'+arr.length+'条数据')
break;
case 'isAll':
// 获取isAll的值
var flag = checkStatus.isAll;
// 判断flag的返回值
var str = flag ? '全选':'未全选';
layer.msg(str)
break;
default:
break;
}
});
// 7. 监听右边工具栏事件
table.on('tool(test)',function(obj){
// 得到当前操作的行信息
var tr = obj.data;
console.log(tr);
// 得到事件名
var eventName = obj.event;
if(eventName =='detail'){ //查看
}else if (eventName == 'edit'){ //编辑
// 输出框
layer.prompt({
// 表单元素的类型:0=文本框, 1=密码框, 2=文本域
formType:0,
value: tr.username //设置输入框的值, 键值对形势
},function(value,index){
// 修改指定单元格的值
// value表示输入的值 ，调用update方法
obj.update({
username:value
});
// 关闭弹出层
layer.close(index);
})
}else if(eventName == 'del'){ //删除
// 弹出层
layer.confirm('您确认要删除吗？',function(index){
// 通过index删除指定的tr del()
obj.del();
// 关闭弹出层(index是当前弹出层的下标)
layer.close(index);
})
}
});
// 8.监听单元格编辑事件
// 表头设置为edit属性,单元格编辑类型(默认不开启)目前只支持:text(输入框)
table.on('edit(test)',function(obj){
console.log(obj);
// 获取修改后的值
var value = obj.value;
// 得到当前修改的tr对象
var data = obj.data;
// 得到修改的字段名
var field = obj.field;
// 弹出层
layer.msg("[Id:"+data.id+"]的"+field+'字段修改为：'+value)
});
// 给指定元素绑定点击事件
$(document).on('click','#searchBtn',function(data){
// console.log(data);
// 获取文本框对象
var search = $(demoReload);
// 调用数据表格的重载方法 table.reload(ID, options)
table.reload("demo",{
where:{
// 设置需要传递的参数
id : search.val(),
name:'zhangsan',
},
page:{
// 表示让条件查询从第一页开始;如果未设置就从当前页开始查询,此页之前所有的数据不纳入当前筛选
curr:1 //默认值
}
})
})
});
</script>
</body>
</html>
3.layuiMiNi 后台管理系统（快速搭建后台管理系统）
.json文件里面不能写注释
4.layuiMiNi 快速搭建自己的后台管理系统前端页面
（1）
（2）
（3）
（4）设置侧边栏
换侧边栏图标
（5）跳转页面
“添加”“编辑”“删除”按钮都是user_list.html里监听事件绑定的
用户列表>用户添加：点击用户列表里面的“添加”按钮，可以跳转到添加用户信息页面
“编辑”按钮 同理，删除按钮是layuimini官方系统集成的，可以直接操作
