layUI框架
由职业前端倾情打造，面向全层次的前后端开发者，易上手开源免费的 Web UI 组件库
官网下载：https://www.ilayuis.com/
安装运行
1、下载框架包
2、解压放到项目的根目录
3、在页面中引用css和js文件
4、我们编写的代码写在layui.use()方法的回调函数里
组件的使用
1、简单的组件（不包含js）
直接复制到body
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
2、复杂组件（包含js）
-
先放一个容器标签
-
导入对应的组件模块
-
js添加render方法
3、如果基本例子不能满足要求，进一步查看文档
数据表格
1、JSON的数据样式：
2、数据表格html
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<table id="book"></table>
<script src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use(['table'], function(){
var table = layui.table table.render({
elem: '#book' ,
url: 'book.json' ,
cellMinWidth: 80 //全局定义常规单元格的最小宽度，
layui 2.2.1 新增 ,
cols: [[
{field:'bookId', width:80, title: '编号'} , {field:'bookName', title: '书名'} , {field:'bookAuthor', width:80, title: '作者'}, {field:'bookPrice', width:80, title: '价格'} , {field:'bookDate',width:80, title: '出版日期'}, {field:'bookNum', width:80,title: '库存数量'} , {field:'typeId',width:80, title: '类别'} ]] });
})
</script>
</body>
</html>
3、给每行添加工具按钮
-
增加一列， 设置toolbar属性
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} -
添加一段按钮标签
<script type="text/html" id="barDemo"> <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> -
行工具按钮的事件
//监听行工具事件, tool行工具按钮事件，test是table标签的lay-filter属性的值 table.on('tool(test)', function(obj){ //obj对象的data属性是这行数据对象； // event属性是按钮的lay-event属性的值，用来判断点的是哪个按钮 var data = obj.data; //console.log(obj) if(obj.event === 'del'){ //删除 } else if(obj.event === 'edit'){ //修改 } });
4、 表头头部工具栏
-
在基础参数添加toolbar属性. defaultToolbar控制是否显示默认工具栏
,toolbar: '#toolbarDemo' //开启头部工具栏 ,defaultToolbar: [] //头部工具栏上的默认工具按钮，可以按需要显示['filter', 'print', 'exports'] -
表头工具栏事件
function forUpdate() { //多窗口模式，层叠置顶 layer.open({ type: 2 //iframe content可以设为URL ,title: '修改图书信息' ,area: ['390px', '260px'] //宽， 高 ,shade: 0.5 //透明度，0~1 ,maxmin: true //是否显示最大最小按钮 ,offset: [ //居中显示 ($(window).height()-260)/2 , ($(window).width()-390)/2 ] ,content: 'bookupdate.html' }); }
5、 form表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style type="text/css">
body {
padding: 10px;
}
</style>
</head>
<body>
<form class="layui-form" action="" lay-filter="formUpdateBook">
<input type="hidden" name="bookId">
<div class="layui-form-item">
<label class="layui-form-label">书名</label>
<div class="layui-input-block">
<input type="text" name="bookName" autocomplete="off" placeholder="请输入书名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<div class="layui-input-block">
<input type="text" name="bookAuthor" autocomplete="off" placeholder="请输入作者" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">价格</label>
<div class="layui-input-block">
<input type="text" name="bookPrice" autocomplete="off" placeholder="请输入价格" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出版日期</label>
<div class="layui-input-block">
<input type="text" class="layui-input" name="bookDate" id="bookDate" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数量</label>
<div class="layui-input-block">
<input type="text" name="bookNum" autocomplete="off" placeholder="请输入数量" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类别</label>
<div class="layui-input-block">
<select name="typeId" lay-filter="aihao">
<option value=""></option>
<option value="0">文学</option>
<option value="1">历史</option>
<option value="2">计算机</option>
<option value="3">小说</option>
<option value="4">教辅</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitUpdateBook">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use(['laydate', 'form'], function() {
var laydate = layui.laydate;
var form = layui.form
//常规用法
laydate.render({
elem: '#bookDate'
});
// 表单赋值（回写表单数据），formUpdateBook是form标签的lay-filter属性的值
// 弹出窗口是列表页面的子页面，所以在弹出窗口里可以用paret.xxx去访问父页面的全局变量
form.val('formUpdateBook', parent.data);
//表单提交事件，submitUpdateBook是提交按钮的lay-filter属性值
form.on('submit(submitUpdateBook)', function(data) {
// data.field是表单数据对象
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function() {
// 关闭窗口
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
})
//修改功能的ajax请求省略
return false; //阻止form标签的提交刷新
});
})
</script>
</body>
</html>
6、数据写到表单中
-
表格中定义一个数据的全局变量
var data = {} -
行工具按钮事件中，把当前行的数据给全局变量
-
在弹出修改窗口里面用parent.data获取父页面的数据，然后调用form.val()回写数据到表单
7、form提交和关闭窗口
待完成。。。后续连接数据库
-
用ajax请求后台的修改接口，表单数据传给后台
-
在ajax回调函数中，关闭窗口，刷新父页面的表格
8、删除
-
在行工具栏按钮和表头工具栏按钮事件中写如下代码;
layer.confirm('确认要删除当前行吗?', function(index){ //ajax提交后台去删除，在回调函数刷新表格 //刷新表格，test就是表格标签的id（或者是基础参数的id） table.reload('test', { page: { curr: 1 //重新从第 1 页开始 } }); layer.close(index); });
首页
-
点击菜单显示内容两种方法：
-
内容区域用iframe.每个功能页面可以完整页面
-
内容区域用div，每个功能页面的片段，用ajax获取页面内容，填充div
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 - Layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">图书管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">图书录入</a></dd>
<dd><a href="book.html" target="main">图书查询</a></dd>
<dd><a href="table.html" target="main">图书查询</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">会员管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">借阅管理</a></li>
<li class="layui-nav-item"><a href="">系统管理</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<iframe src="" name="main" frameborder="0" width="100%" height="820px"></iframe>
</div>
</div>
<div class="layui-footer">
底部固定区域
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
</html>
其他
其他组件参考官方文档
组件官方文档
https://www.ilayuis.com/demo/index.htm
8934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
