layui基础--实现简单图书管理页面

最新推荐文章于 2024-03-29 11:00:08 发布

沐12138

最新推荐文章于 2024-03-29 11:00:08 发布

阅读量686

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_52173610/article/details/132607300

版权

layui介绍

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。

官网：https://www.ilayuis.com/doc/index.htm

实现效果

主页面（layui布局）

数据表格（单击图书录入显示表格）

修改页面(layui弹出层)

删除行内容

项目结构

book.html为数据表格,

,book.json为数据,

bookupdaate.html实现修改按钮弹出表单和删除提示,

layout.html为页面布局.

jquery-1.12.4.min.js为本地引用layui

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui-v2.7.6/layui/css/layui.css">
	</head>
	<body>
		<script src="layui-v2.7.6/layui/layui.js">
		</script>
	</body>
</html>

详细过程

项目采用json数据导入，暂时无后端数据库。

json文件格式，格式需要统一，否则将出现无法读取数据问题。

构建数据表格(参考layui提供的样式修改)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="js/layui-v2.7.6/layui/css/layui.css">
	</head>
	<body>
		<table id="test" lay-filter="test"></table>
		
		<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="edit">修改</button>
		    <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
		  </div>
		</script>
		
		<script src="js/layui-v2.7.6/layui/layui.js"></script>
		<script type="text/javascript">
			var data = {}  //选中行的数据，全局变量，方便弹出窗口来使用
			
			layui.use(['table','jquery'], function(){
				var table = layui.table
				var $ = layui.jquery
				
				table.render({
				    elem: '#test'
				    ,url: 'book.json'
				    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					,page: true
					,limit: 50
					,limits: [50,100,200]
					,toolbar: '#toolbarDemo'   //开启头部工具栏
					,defaultToolbar: [] //头部工具栏上的默认工具按钮，可以按需要显示['filter', 'print', 'exports']
				    ,cols: [[
					  {type:'checkbox'}
				      ,{field:'bookId', width:80, title: '编号'}
				      ,{field:'bookName', title: '书名'}
				      ,{field:'bookAuthor', width:120, title: '作者'}
				      ,{field:'bookPrice', width:120, title: '价格'}
				      ,{field:'bookDate',width:120, title: '出版日期'}
				      ,{field:'bookNum', width:120,title: '库存数量'}
				      ,{field:'typeId',width:120, title: '类别'},
					  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
				    ]]
				  })			  
				 	 //监听行工具事件, tool行工具按钮事件，test是table标签的lay-filter属性的值
				  table.on('tool(test)', function(obj){
					//obj对象的data属性是这行数据对象； 
					//        event属性是按钮的lay-event属性的值，用来判断点的是哪个按钮
				    data = obj.data;  //给全局变量data赋值
				    //console.log(obj)
				    if(obj.event === 'del'){
				      layer.confirm('is not?', function(index){
				        //do something
				        
				        layer.close(index);
				      });   
				    } else if(obj.event === 'edit'){
						
						forUpdate()
				    }
				  });  
				  
			   //头工具栏事件， toolbar头部工具栏事件，test是table标签的lay-filter属性的值
				table.on('toolbar(test)', function(obj){
				  //读取选中行的数据， checkStatus.data就是选中行的数据，它是数组类型
				  var checkStatus = table.checkStatus(obj.config.id);
				  switch(obj.event){
					case 'add':  //新增
					 
					break;
					case 'edit': //修改
					  	if(checkStatus.data.length == 1){
							data = checkStatus.data[0]
							forUpdate()
						}else{
							layer.msg('请选择一行数据进行修改')
						}
					break;
					case 'del':  //删除
						layer.confirm('is not?', function(index){
						  //do something
						  
						  layer.close(index);
						});   
					break;
					
				  };
				});	
			})
		</script>
	</body>
</html>

实现下列数据表格

引用layui布局(参考layui的管理系统大布局)

<!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="js/layui-v2.7.6/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-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
    </ul>
    <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="book.html" target="main">图书录入</a></dd>
            <dd><a href="javascript:;">图书查询</a></dd>
            <dd><a href="javascript:;"></a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</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:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div> 
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;"></div>
		<!-- iframe添加小窗口 -->
		<iframe src="" name="main" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</div>
<script src="js/layui-v2.7.6/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>

实现下列布局

点击图书录入时引入数据表格book.html实现方法

在layout.html使用超链接跳转book.html形成页面或者使用iframe链接book.html

修改&&删除按钮实现(参考layui示例>>数据表格>>开启单选框)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="js/layui-v2.7.6/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="demo1">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		  </div>
		</form>
		<script src="js/layui-v2.7.6/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);
				
				  //表单提交事件
				  form.on('submit(demo1)', function(data){
				    layer.alert(JSON.stringify(data.field), {
				      title: '最终的提交信息'
				    })
					//当你在iframe页面关闭自身时
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index); //再执行关闭 
					//修改
				    return false;
				  });
			})
		</script>
	</body>
</html>

修改弹出框实现(参考layui文档>>弹出层)

function forUpdate(){
					// 弹出修改窗口
				  var that = this; 
				  //多窗口模式，层叠置顶
				  layer.open({
					type: 2 //iframe
					,title: '修改图书信息'
					,area: ['390px', '500px']  //宽， 高
					,shade: 0.5  //透明度，0~1
					,maxmin: true  //是否显示最大最小按钮
					,offset: [ //居中显示
					  ($(window).height()-500)/2
					  ,($(window).width()-390)/2
					] 
					,content: 'bookupdate.html'
				  });
				}

弹出层样式设置

	<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="demo1">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		  </div>
		</form>

实现效果(选中哪一行会在弹出页面显示一行信息)

<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);
				
				  //表单提交事件
				  form.on('submit(demo1)', function(data){
				    layer.alert(JSON.stringify(data.field), {
				      title: '最终的提交信息'
				    })
					//当你在iframe页面关闭自身时
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index); //再执行关闭 
					//修改
				    return false;
				  });
			})
		</script>

删除按钮(参考layui文档>>

 //监听行工具事件, tool行工具按钮事件，test是table标签的lay-filter属性的值
				  table.on('tool(test)', function(obj){
					//obj对象的data属性是这行数据对象； 
					//        event属性是按钮的lay-event属性的值，用来判断点的是哪个按钮
				    data = obj.data;  //给全局变量data赋值
				    //console.log(obj)
				    if(obj.event === 'del'){
				      layer.confirm('is not?', function(index){
				        //do something
				        
				        layer.close(index);
				      });   
				    } else if(obj.event === 'edit'){
						
						forUpdate()
				    }
				  });

具体样式可根据需求修改.

沐12138

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
layui基础--实现简单图书管理页面

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。
复制链接

扫一扫