欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

小汤学编程之JavaEE学习day06——LayUI

程序员文章站 2022-03-12 21:28:51
一、LayUI简介1.下载 2.入门案例二、栅格布局三、图标四、按钮1.按钮类型 2.主题 3.尺寸 4.圆角 5.按钮组五、后台布局六、表格数据1.前台页面 2.后台Servlet七、弹出层1.独立版 2.内嵌式八、表单....

小汤学编程之JavaEE学习day06——LayUI

一、LayUI简介
1.下载     2.入门案例
二、栅格布局
三、图标
四、按钮
1.按钮类型     2.主题     3.尺寸     4.圆角     5.按钮组
五、后台布局
六、表格数据
1.前台页面     2.后台Servlet
七、弹出层
1.独立版     2.内嵌式
八、表单
1.代码案例     2.事件监听     3.表单赋值
九、新增
1.打开新增页面
十、删除与修改功能


一、LayUI简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式。

下载

官网：https://www.layui.com/
下载后的目录结构如下：

├─css //css目录
│ │─modules //模块css目录
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

入门案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
    <!-- 引入layui的样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 使用layUI的按钮样式-->
<button type="button" class="layui-btn">一个标准的按钮</button>

<script src="layui/layui.js"></script>
<script>
	/* 使用layUI的弹出层模块  */
	layui.use(['layer'], function(){
	  var layer = layui.layer; 
	  /* 弹出hello world提示 */
	  layer.msg('Hello World');
	});
	
</script> 
</body>
</html>


二、栅格布局 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- <div class="layui-fluid"> : 铺满   -->
<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9 layui-col-lg6 layui-bg-blue">
      你的内容 9/12
    </div>
    <div class="layui-col-md3 layui-col-lg6 layui-bg-red">
      你的内容 3/12
    </div>
  </div>
 </div>
</body>
</html>
  • 采用 layui-row 来定义行，如：<div class="layui-row"></div>
  • 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。


三、图标

  • 方式一：<i class="layui-icon layui-icon-face-smile" ></i>
  • 方式二：<i class="layui-icon">&#xe69c;</i>

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标。


四、按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。还可以与字体图标一起用，构成图标按钮。

1.按钮类型 

<button type="button" class="layui-btn">一个标准的按钮</button>

<a href="http://www.bailiban.com" class="layui-btn">一个可跳转的按钮</a>

2.主题

主题 类型
class=“layui-btn layui-btn-primary” 原始按钮
class="layui-btn 默认按钮
class=“layui-btn layui-btn-normal” 百搭按钮
class=“layui-btn layui-btn-warm” 暖色按钮
class=“layui-btn layui-btn-danger” 警告按钮
class=“layui-btn layui-btn-disabled” 禁用按钮

3.尺寸

尺寸 类型
class=“layui-btn layui-btn-lg” 大型按钮
class="layui-btn " 默认按钮
class=“layui-btn layui-btn-sm” 小型按钮
class=“layui-btn layui-btn-xs” 迷你按钮
class=“layui-btn layui-btn-fluid” 流体按钮（最大化适应）

4.圆角

class="... layui-btn-radius ..."

5.按钮组

<div class="layui-btn-group"></div>


五、后台布局

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="../src/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <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="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">
      <!-- 左侧导航区域（可配合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="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</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="">超链接</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: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
});
</script>
</body>
</html>

小汤学编程之JavaEE学习day06——LayUI


六、表格数据

LayUI的数据表格可以将数据库查询出的集合通过转换为json传输给前台页面的一套固定模板，从而快速实现表格的渲染。

前台页面

<script>
    layui.use(['table'], function () { // 引入LayUI
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'  //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
            , toolbar: true // 是否显示工具条
            , url: '${path}/TableDataServlet?m=userTableData' //数据接口
            , page: true //开启分页
            , cols: [[ //表头，里面的name必须保证返回的json数组的bean的属性名为name，titile为页面表头显示的字段名
                {type:'checkbox'}
                ,{field: 'userId', title: 'ID', align: 'center', width: '25%', sort: true}
                , {field: 'userName', title: '姓名', align: 'center', width: '15%', sort: true}
                , {field: 'userPwd', title: '密码', align: 'center', width: '25%'}
                , {field: 'userType', title: '用户类型', align: 'center', width: '15%'}
            ]]
        });
    });
</script>

后台servlet

//用户维护
public void userTableData(HttpServletRequest req, HttpServletResponse res) throws IOException {
	//获取前端传递需要的页号跟每页显示数量
	List<User> pageList = tableDataService.pagingUser(Integer.parseInt(pageNum), Integer.parseInt(limit));
	List<User> userList = tableDataService.allUser();

	doJSON(pageList,userList,res);
}
// 转化为Json格式
public static <T> void doJSON(List<T> pageList,List<T> userList,HttpServletResponse res){
	try {
		JSONObject data = new JSONObject();
		data.put("code", 0);
		data.put("msg", "no data."); // 无数据显示的内容
		data.put("count", userList.size());
		JSONArray array = JSONArray.parseArray(JSON.toJSONString(pageList));
		data.put("data", array);
		res.getWriter().write(data.toString());
	} catch (IOException e) {
		e.printStackTrace();
	}
}


七、弹出层

独立版

官网：https://layer.layui.com/
使用：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

<script type="text/javascript">
	layer.msg('hello');
</script>

独立版 layer 需要去layer独立版官网下载组件包，且要先引入jQuery1.8以上版本，再引入layer.js。

内嵌版

使用：

<script>
    layui.use('layer', function(){
      var layer = layui.layer;

      layer.msg('hello');

	// 或者
	layer.open({type: 1})；
    });    
</script>
  • 内嵌版layer继承在layUI中，只需要引入layui.css和layui.js后即可使用。
  • layer还有许多参数和样式可以设置，详情可查阅官网。


八、表单

代码案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关关</label>
    <div class="layui-input-block">
      <input type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男">
      <input type="radio" name="sex" value="1" title="女" checked>
    </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"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  //各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

事件监听

form.on('event(过滤器值)',callback);

  • 常用监听事件
event 描述
select 监听select下拉选择事件
checkbox 监听checkbox复选框勾选事件
switch 监听checkbox复选框开关事件
radio 监听radio单选框事件
submit 监听表单提交事件
  • 监听select
form.on('select(test)', function(data){
  console.log(data);
});
  • 监听checkbox复选
form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});
  • 监听submit提交
form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

表单赋值

form.val('filter',object);

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
}//键值是表单元素对应的 name 和 value
);

//获取表单区域所有值
var data1 = form.val("formTest");

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。


九、新增

打开新增页面

<div><button  class="layui-btn" id="add_btn">新增</button></div>
<script>
$("#add_btn").on("click",function () {
	layer.msg(" add ") ;
	layer.open({
		type:2,
		title:"用户新增",
		area: ['700px', '600px'],
		maxmin:true,
		shadeClose :false,
		content:'add.jsp'
	});
});
</script>


十、删除与修改功能 

table.on('tool(demo)', function(obj){
	var layEvent = obj.event; //获得 lay-event 对应的值 
    
	var data = obj.data; //获得当前行数据
	var userName = data.name;// 表单中的name字段
	var userId = data.id;// 表单中的id字段
	var $ = layui.$ ;
	 
	if(layEvent === 'del_event'){
		layer.confirm("你确定真的要删除"+userName+"的数据吗?",{icon: 2},function(index){
			// 异步请求去后台删除数据
			$.post("DeleteServlet",{"user_id":userId},function(data){
				// 删除成功给出提示
				if(data.flag){
					// 操作成功的提示
					layer.msg("删除成功！",{icon:1});
					// 关闭最新的层
					layer.close(layer.index);
					// 刷新id为demo的table数据
					layui.table.reload("demo");
				}
			});
		}); 
	}else if(layEvent === 'update_event'){// 修改操作
		// 打开修改页面
		layer.open({
			type:2,
			title:"用户修改",
			area: ['700px', '600px'],
			maxmin:true,
			shadeClose :false,
			// 修改页面需要先访问Servlet获取修改的用户信息
			content:'UpdatePageServlet?user_id='+userId
		});
	}	 	 
});

table.on('tool(demo)中的demo是去找lay-filter="demo"的table。




写在最后，本文只是介绍和摘录了LayUI的一些常用的基本内容，想要深入学习的读者可以自行去LayUI官网，上面有最为详细的介绍与讲解。

本文地址：https://blog.csdn.net/SoupTC/article/details/112548276

相关标签： JavaEE javascript html layui

上一篇： SpringCloud中级篇之Hystrix

下一篇： 基于JavaScript的AES算法加密解密实现（源码）

推荐阅读