Layui官方网站
官方网站:https://www.layui.com/
下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v=
创建项目
省略
创建static目录 将下载的项目复制到static目录中
SMS:. ├─.idea └─static ├─css │ └─modules │ ├─laydate │ │ └─default │ └─layer │ └─default ├─font ├─images │ └─face └─lay └─modules
创建index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>电商后台系统title>
<link rel="stylesheet" href="static/css/layui.css">
head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">电商后台系统div>
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台a>li>
<li class="layui-nav-item"><a href="">设置a>li>
<li class="layui-nav-item"><a href="">会员a>li>
<li class="layui-nav-item"><a href="">商品a>li>
<li class="layui-nav-item"><a href="">交易a>li>
<li class="layui-nav-item"><a href="">门店a>li>
<li class="layui-nav-item"><a href="">网站a>li>
<li class="layui-nav-item"><a href="">营销a>li>
<li class="layui-nav-item"><a href="">统计a>li>
<li class="layui-nav-item"><a href="">手机端a>li>
<li class="layui-nav-item"><a href="">微信a>li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理a>dd>
<dd><a href="">消息管理a>dd>
<dd><a href="">授权管理a>dd>
dl>
li>
ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
张三
a>
<dl class="layui-nav-child">
<dd><a href="">基本资料a>dd>
<dd><a href="">安全设置a>dd>
dl>
li>
<li class="layui-nav-item"><a href="">退出系统a>li>
ul>
div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<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="javascript:;">品牌管理a>dd>
<dd><a href="javascript:;">类型管理a>dd>
<dd><a href="javascript:;">规格管理a>dd>
<dd><a href="javascript:;">商品管理a>dd>
dl>
li>
<li class="layui-nav-item">
<a href="javascript:;">其他管理a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">地区管理a>dd>
<dd><a href="javascript:;">空间管理a>dd>
<dd><a href="javascript:;">到货通知a>dd>
dl>
li>
<li class="layui-nav-item"><a href="">云市场a>li>
<li class="layui-nav-item"><a href="">发布商品a>li>
ul>
div>
div>
<div class="layui-body">
<div style="padding: 5px;height:100%;width:100%">
<iframe src="good.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%;">iframe>
div>
div>
<div class="layui-footer">
© blb.com - 底部固定区域
div>
div>
<script src="static/layui.js">script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
script>
body>
html>
创建商品页面 good.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layuititle>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="static/css/layui.css" media="all">
head>
<body>
<table class="layui-hide" id="test" lay-filter="test">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">商品管理/商品信息div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">商品名称label>
<div class="layui-input-inline">
<input type="text" name="id" placeholder="请输入商品" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-inline">
<label class="layui-form-label">货号label>
<div class="layui-input-inline">
<input type="text" name="id" placeholder="请输入货号" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-inline">
<label class="layui-form-label">商品分类label>
<div class="layui-input-inline">
<div class="layui-form">
<select name="label" class="layui-form-item">
<option value="0" selected="selected">请选择分类option>
<option value="1">分类1option>
<option value="2">分类2option>
select>
div>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">上架label>
<div class="layui-input-inline">
<div class="layui-form">
<select name="label" class="layui-form-item">
<option value="0" selected="selected">请选择option>
<option value="1">出售中option>
<option value="2">仓库中option>
select>
div>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">品牌label>
<div class="layui-input-inline">
<input type="text" name="title" placeholder="请输入品牌" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn">i>
button>
div>
div>
form>
div>
div>
div>
div>
table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn" lay-event="isAll">全选</button>
<button class="layui-btn" lay-event="save">新增</button>
<button class="layui-btn" lay-event="remove">删除</button>
</div>
script>
<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>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js">script>
<script src="static/layui.js" charset="utf-8">script>
<script>
layui.use(['form','table'], function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'http://localhost:7300/mock/5e06d6ef83b40c266813ee7f/example/user/list'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '商品列表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'平台货号', width:120, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'商品名称', width:120, edit: 'text'}
,{field:'email', title:'品牌和分类', width:150, edit: 'text', templet: function(res){
return ''+ res.email +''
}}
,{field:'sex', title:'价格(元)', width:100, edit: 'text', sort: true}
,{field:'city', title:'库存', width:100}
,{field:'sign', title:'商品状态'}
,{field:'experience', title:'平台推荐', width:120, sort: true}
,{field:'logins', title:'排序', width:120, sort: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'save':
var data = checkStatus.data;
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
area: ['620px', '440px'], //宽高
content: $('#addForm'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
$(".layui-laypage-btn").click();//执行分页刷新当前页
}
});
break;
case 'remove':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
});
script>
body>
<div id="addForm" style="padding: 10px; background-color: #F2F2F2;display:none">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">商品名称label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" 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="password" name="price" placeholder="请输入密码" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">密码框label>
<div class="layui-input-block">
<div class="layui-form">
<select name="interest" class="layui-form-item" 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>
<div class="layui-form-item">
<label class="layui-form-label">密码框label>
<div class="layui-input-block">
<div class="layui-form">
<input type="checkbox" class="layui-form-item" name="like[write]" title="写作">
<input type="checkbox" class="layui-form-item" name="like[read]" title="阅读">
<input type="checkbox" class="layui-form-item" name="like[daze]" title="发呆">
div>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">开关label>
<div class="layui-input-block">
<div class="layui-form">
<input type="checkbox" class="layui-form-item" name="close" lay-skin="switch" lay-text="ON|OFF">
div>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">单选框label>
<div class="layui-input-block">
<div class="layui-form">
<input class="layui-form-item" type="radio" name="sex" value="男" title="男" checked="">
<input class="layui-form-item" type="radio" name="sex" value="女" title="女">
div>
div>
div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc">textarea>
div>
div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值button>
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值button>
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交button>
div>
div>
form>
div>
div>
div>
div>
div>
html>