本文介绍了如何使用layui框架构建后台管理系统，包括下载 Layui、项目结构设置、源码展示以及用户列表的搜索和表格操作。通过实例演示了如何实现导航栏菜单的动态加载和tab页的切换，以及表格数据的筛选和刷新功能。
先上最终效果图：
点击左侧的菜单树可以显示在导航栏中
下面是具体步骤：
①下载layui
新地址：开始使用 - Layui 文档
②项目结构介绍
html：存放静态界面
img：存放图片
json：模拟请求数据，展示用
layui：步骤一下载的文件
③源码
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台管理系统</title>
<link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2696345_ubdu47c0yba.css">
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-layout-admin">
<!--头部-->
<div class="layui-header">
<div class="layui-logo">后台管理系统</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href=""><img src="../img/1.jpg" class="layui-nav-img">admin</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
</ul>
</div>
//统一处理图标和文字之间的距离
<style>
.iconset {
margin-right: 5px;
}
</style>
<!--左侧-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"><i class="layui-icon layui-icon-set iconset"></i>系统管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="1" data-title="用户管理" data-url="userList.html"><i
class="iconfont icon-yonghu iconset"></i>用户管理</a></dd>
<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="2" data-title="系统配置管理" data-url=""><i
class="iconfont icon-ziyuan iconset"></i>系统配置管理</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"><i class="iconfont icon-choujiang iconset"></i>抽奖管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="3" data-title="奖品管理" data-url=""><i class="iconfont icon-jiangpin iconset"></i>奖品管理</a></dd>
<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="4" data-title="中奖查询" data-url=""><i class="iconfont icon-jilu iconset"></i>中奖查询</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<image></image>
<!--中间主体-->
<div class="layui-body" id="container">
<div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
<!--底部-->
<div class="layui-footer">
<center>XXX版权所有</center>
</div>
</div>
<script>
layui.use(['element'], function() {
var element = layui.element;
// var layer = layui.layer;
var $ = layui.$;
// 配置tab实践在下面无法获取到菜单元素
$('.subMenu').on('click', function() {
var dataid = $(this);
//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
} else {
//否则判断该tab项是否以及存在
var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function() {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
}
})
if (isData == false) {
//标志为false 新增一个tab项
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
});
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function(url, id, name) {
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
//tabs:中间主体的fiter名
element.tabAdd('tabs', {
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
'" style="width:100%;height:99%;"></iframe>',
id: id //规定好的id
})
FrameWH(); //计算ifram层的大小
},
tabChange: function(id) {
//切换到指定Tab项
element.tabChange('tabs', id); //根据传入的id传入到指定的tab项
},
tabDelete: function(id) {
element.tabDelete("tabs", id); //删除
}
};
function FrameWH() {
var h = $(window).height();
$("iframe").css("height", h + "px");
}
});
</script>
</body>
</html>
userList.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户列表</title>
<link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow">
<script src="../layui/layui.js"></script>
</head>
<body style="padding-left: 10px;padding-right: 10px;">
<div class="searchTable">
用户名：
<div class="layui-inline">
<input class="layui-input" name="userName" id="userName" autocomplete="off">
</div>
手机号：
<div class="layui-inline">
<input class="layui-input" name="phoneNo" id="phoneNo" autocomplete="off">
</div>
<button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#test',
url: '../json/user.json',
toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,
groups: 1 //只显示 1 个连续页码
,
limit: 10, //默认的第一个每页记录数
limits : [50,100,150], //记录数的选择范围
first: false //不显示首页
,
last: false //不显示尾页
},
cols: [
[{
type: 'checkbox',
fixed:'left'
}, {
field: 'id',
align:'center',
title: 'ID',
sort: true
}, {
field: 'username',
align:'center',
title: '用户名'
}, {
field:'phone',
align:'center',
title:'手机号'
},{
field: 'sex',
align:'center',
title: '性别',
sort: true
}, {
field: 'city',
align:'center',
title: '城市'
},{
fixed: 'right',
title: '操作',
toolbar: '#barDemo'
}]
]
});
var $ = layui.$, active = {
reload: function(){
//查询条件组装
var queryWhere = {};
//搜索框自定义的id
var companyName$_ = $('#companyName');
if(companyName$_.val()!=''){
queryWhere['companyName'] = companyName$_.val();
}
//执行重载
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: queryWhere
,done: function(res, curr, count){
this.where= queryWhere;
}
}, 'data');
}
};
$('.searchTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//头部工具栏
table.on('toolbar(test)', function(obj) {
// debugger;
//var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'add':
{
var addIndex = layer.open({
type: 2,
area: ['700px', '450px'],
fixed: false, //不固定
maxmin: true,
content: url, //url自定义
});
layer.full(addIndex);
}
break;
};
});
//监听操作工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
var updateIndex = layer.open({
type: 2,
area: ['700px', '450px'],
fixed: false, //不固定
maxmin: true,
content: url, //url自定义
});
layer.full(updateIndex);
}
});
});
</script>
<!-- 操作栏的两个内容，id要和toolbar的一样 -->
<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 type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
<button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
</div>
</script>
</body>
</html>
user.json
{
"code": 0,
"msg": "success",
"count": 14,
"data": [{
"id": 1,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 2,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 3,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 4,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 5,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 6,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 7,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 8,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 9,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 19,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 11,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 12,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 13,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 14,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
}]
}
更多使用技巧（radio的选择、下拉框回写、自定义数据展示模板等）查看：
④图标获取
通过这个地址：iconfont-阿里巴巴矢量图标库
扫一扫
7078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
