小饶学编程之JAVA EE第三部分——前端框架：1LayUI

女爷i 2022-12-31 06:21 99阅读 0赞

### LayUI ###

*  一、LayUI简介
 *   *  1.1 下载
     *  1.2 入门
 *  二、 栅格布局
 *  三、 图标
 *  四、按钮
 *   *  4.1 主题
     *  4.2 尺寸
     *  4.3 圆角
     *  4.4 图标按钮
     *  4.5 按钮组
 *  五、后台布局
 *  六、 数据表格
 *  七、弹出层
 *  八、 表单
 *  九、 删除跟修改功能

# 一、LayUI简介 #

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]

## 1.1 下载 ##

官网：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和所有模块的合并文件

## 1.2 入门 ##

# 二、 栅格布局 #

如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用 layui 排版你的响应式网站和后台系统了。layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui 终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。

*  采用 *layui-row* 来定义行，如：`<div class="layui-row"></div>`
 *  列可以同时出现最多四种不同的组合，分别是：*xs*（超小屏幕，如手机）、*sm*（小屏幕，如平板）、*md*（桌面中等屏幕）、*lg*（桌面大型屏幕），以呈现更加动态灵活的布局。

# 三、 图标 #

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 *font-class* 或 *unicode* 来定义不同的图标。

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

或者

# 四、按钮 #

向任意HTML元素设定*class=“layui-btn”*，建立一个基础按钮。通过追加格式为\*layui-btn-\{type\}\*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

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

## 4.1 主题 ##

## 4.2 尺寸 ##

<button type="button" class="layui-btn  layui-btn-lg">大型按钮</button>
     <button type="button" class="layui-btn  ">默认按钮</button>
     <button type="button" class="layui-btn  layui-btn-sm">小型按钮</button>
     <button type="button" class="layui-btn  layui-btn-xs">迷你按钮</button>
    <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

## 4.3 圆角 ##

## 4.4 图标按钮 ##

*  图标字体参考图标列表。

## 4.5 按钮组 ##

# 五、后台布局 #

layui 之所以赢得如此多人的青睐，更多是在于它前后台系统通吃的能力。既可编织出绚丽的前台页面，又可满足繁杂的后台功能需求。layui 致力于让每一位开发者都能轻松搭建自己的后台。下面是 layui 提供的一个现场的方案。

<%@ 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 class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">layui 后台布局</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="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:;" data-url="user.jsp">用户管理</a></dd>
                <dd><a href="javascript:;"  data-url="good.jsp">商品管理</a></dd>
              </dl>
            </li>
             
          </ul>
        </div>
      </div>
      
      <div class="layui-body">
        
        <div style="padding: 15px;" class="pagenav">内容主体区域</div>
      </div>
      
      <div class="layui-footer">
        
        © layui.com - 底部固定区域
      </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
    //JavaScript代码区域
    layui.use('element', function(){
       /* 使用layui内置的jquery */
      var $=layui.$;
       /* 给菜单添加点击事件 */
      $('dl.layui-nav-child>dd').click(function (){
    	  /* 获取点击后的跳转页面url */
    	  var url = $(this).find("a").attr("data-url");
    	  /* 将URL部分内容显示在主体区域  */
    	  $('.pagenav').load(url);
      })
      
    });
    </script>
    </body>
    </html>

# 六、 数据表格 #

table 模块是layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

这里的数据表格的演示我们采用前台跟后台交互的方式，故我们先准备后台的表格数据。

> 数据准备

我们在后台封装100条用户数据，由于前端接收数据的时候接收的是json格式字符串，所以后台在传递数据时候需要进行数据处理。

public class UserData {
        
    	
    //	用户数据的集合
    	public static List<User> userList = new ArrayList<User>();
    
    }

public class User {
        
    
        private String id ;
    
        private String name ;
    
        private String password ;
        
        private String userImg ;
     
        // setter and getter
    }

@WebServlet("/TableDataServlet")
    public class TableDataServlet extends HttpServlet {
        
    	
     
    	
    //	构造方法中创建100条用户数据
    	public TableDataServlet() {
        
    		for(int i=1;i<=100;i++){
        
    			User u = new User(i,"seven"+i,"123456","1.png");
    			UserData.userList.add(u);
    		}
    	}
    	
    	
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    //		获取前端传递需要的页号跟每页显示数量
    		String pageNum = req.getParameter("page");
    		String limit = req.getParameter("limit");
    		
    //		获取当页数量的集合
    		List<User> pageList = getPageList(Integer.parseInt(pageNum),Integer.parseInt(limit));
    		
    		resp.setContentType("text/json;charset=utf-8");
    		
    //		将数据封装成前端需要的格式
    		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);
    		
    		resp.getWriter().write(data.toString());
    	}
    	
    //	获取当页数量的集合
    	public List<User> getPageList(int pageNo ,int pageLimit){
        
    		List<User> list = new ArrayList<>();
    		int maxSize = UserData.userList.size()> pageNo*pageLimit? 			pageNo*pageLimit:UserData.userList.size() ;
    		for(int i=(pageNo-1)*pageLimit;i<maxSize;i++){
        
    			list.add(UserData.userList.get(i));
    		}
    		return list ;
    	}
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		doGet(req, resp);
    	}
    
    }

*  参数的`page`表示页码。
 *  参数`limit`表示每页显示的数量。

前台页面`user.jsp`

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>用户列表</title>
      <link rel="stylesheet" href="layui/css/layui.css" media="all">
      <style>
      /* 设置表格行高自适应   */
      .layui-table-cell {
                height: auto !important;
            }
            </style>
    </head>
    
    
    <body>
    	<div><button type="button" class="layui-btn" id="add_btn">新增</button></div>	
    	
    	<table id="demo" lay-filter="demo"  ></table>
    	 
    <script>
    layui.use('table',function(){
      var table = layui.table;
      
      //第一个实例
      table.render({
        elem: '#demo'  //指定原始 table 容器的选择器或 DOM，方法渲染方式必填 
        ,toolbar:true // 是否显示工具条
        ,url: 'TableDataServlet' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头，里面的name必须保证返回的json数组的bean的属性名为name，titile为页面表头显示的字段名
          {field: 'id', title: 'ID', width:'20%',sort:true}
          ,{field: 'name', title: '姓名', width: '20%',sort:true}
          ,{field: 'password', title: '密码', width:'20%'}
          ,{field: 'userImg', title: '密码',templet : '#proImg'} 
          ,{fixed: 'right',title : '操作',align:'center', toolbar: '#opt'}
        ]]
      });
      
    });
    </script>
    
    <script id="opt" type="text/html">
    		<a lay-event="update_event" href="javascript:;" ><button type="button" class="layui-btn  layui-btn-radius layui-btn-xs layui-btn-normal">修改</button></a>
    		<a lay-event="del_event" href="javascript:;" ><button type="button" class="layui-btn  layui-btn-radius layui-btn-xs layui-btn-normal">删除</button></a>
    </script>
        
    
    <script id="proImg" type="text/html">
    	<img src="ImageServlet?imgName={
       {d.user_img}}"  />
    </script>
    
    </body>
    </html>

@WebServlet("/ImageServlet")
    public class ImageServlet extends HttpServlet{
        
    	
    //	假设图片都是存在这个路径下
    	private static String path = "D://upload//";
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    //		获取传递过来的文件名
    		String imgName = req.getParameter("imgName");
    //		取path路径下找到这个文件，作为流数据读取踹，然后通过OutputStream写到客户端
    //		如果看不懂这段代码，把当时课堂上讲的图片上传视频再重复看下
    		FileInputStream inputStream = new FileInputStream(path+imgName);
    		int i = inputStream.available();
    		byte[] buff = new byte[i];
    		inputStream.read(buff);
    		inputStream.close();
    		resp.setContentType("image/*");
    		OutputStream out = resp.getOutputStream();
    		out.write(buff);
    		out.close();
    	}
    	
    	
    }

*  最后一列加上了操作列，为后续功能做准备。
 *  由于`user.jsp`是内嵌在导航页面中，所以`user.jsp`不需要再次引入layui的css跟js。
 *  `sort:true`表示是否给列加上排序功能。
 *  `templet`是为了设置自定义列内容跟结构。
 *  `.layui-table-cell`是为了设置列高度自适应。

# 七、弹出层 #

layer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，*layer已成为国内最多人使用的 Web 弹层组件*，GitHub) 自然Stars*5000+*，官网累计下载量达50w+，大概有30万不同规模的 Web 平台使用过 layer。

之所以列举上面这些数字，并非是在夸夸其谈，而是懂 layer 的人都知道，这是一种怎样不易的沉淀。而由于 layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。

> layer作为独立组件使用，你可以去layer独立版本官网下载组件包。你需要在你的页面引入*jQuery*1.8以上的任意版本，并引入*layer.js*。且jquery的引入位置必须放到layer引入之前，否则无效。

*  layer的独立版本：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作为 layui 模块化使用，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入*layui.css*和*layui.js*。

*  使用方式
    
        <script>
            layui.use('layer', function(){
              var layer = layui.layer;
        
              layer.msg('hello');
            });    
        </script>
 *  type
    
    layer提供了5种层类型。可传入的值有：*0*（信息框，默认）*1*（页面层）*2*（iframe层）*3*（加载层）*4*（tips层）。 若你采用\*layer.open(\{type: 1\})\*方式调用，则type为必填项（信息框除外）
 *  title
    
    title支持三种类型的值，若你传入的是普通的字符串，如*title :‘我是标题’*，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以*title: \[‘文本’, ‘font-size:18px;’\]*，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以*title: false*
 *  content
    
    content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
 *  area
    
    在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以*area: ‘500px’*，高度仍然是自适应的。当你宽高都要定义时，你可以*area: \[‘500px’, ‘300px’\]*
 *  btn
    
    信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以*btn: ‘我知道了’*，当你要定义两个按钮时，你可以*btn: \[‘yes’, ‘no’\]*。当然，你也可以定义更多按钮，比如：*btn: \[‘按钮1’, ‘按钮2’, ‘按钮3’, …\]*，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function()\{\}，以此类推。
 *  closeBtn
    
    layer提供了两种风格的关闭按钮，可通过配置*1*和*2*来展示，如果不显示，则*closeBtn: 0*
 *  shade
    
    即弹层外区域。默认是0.3透明度的黑色背景（’\#000’）。如果你想定义别的颜色，可以*shade: \[0.8, ‘\#393D49’\]*；如果你不想显示遮罩，可以*shade: 0*
 *  shadeClose
    
    如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
 *  time
    
    默认不会自动关闭。当你想自动关闭时，可以*time: 5000*，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
 *  layer.open(options)
    
    基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走*layer.open()*，创建任何类型的弹层都会返回一个当前层索引，上述的*options即是基础参数*
 *  layer.alert(content, options, yes) - 普通信息框
    
    它的弹出似乎显得有些高调，一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。
 *  layer.confirm(content, options, yes, cancel) - 询问框
    
    类似系统confirm，但却远胜confirm，另外它*不是和系统的confirm一样阻塞*你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。
 *  layer.msg(content, options, end) - 提示框
    
    我们在源码中用了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后*自动消失*所有这一切都决定了我对msg的爱。因此*我赋予了它许多可能*在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。
 *  layer.load(icon, options) - 加载层
    
    type:3的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格，你还有选择空间。icon支持传入*0-2*如果是0，无需传。另外特别注意一点：*load默认是不会自动关闭的*，因为你一般会在ajax回调体中关闭它。
 *  layer.close(index) - 关闭特定层
    
    关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个*index*了吧。事实上它非常容易得到。
    
        //当你在iframe页面关闭自身时
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭  
        //如果你想关闭最新弹出的层，直接获取layer.index即可
          layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

# 八、 表单 #

我们通常会在最常用的模块上耗费更多的精力，用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见，form 是我们非常看重的一块。于是它试图用一贯极简的姿态，去捕获你对它的深深青睐。寄托在原始表单元素上的属性设定，及其全自动的初始渲染，和基于事件驱动的接口书写方式，会让你觉得，传统模式下的组件调用形式，也可以是那样的优雅、简单。然而文字的陈述始终是苍白的，所以用行动慢慢感受 layui.form 给你的项目带来的效率提升吧。

> 元素组件

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上*class="layui-form"*，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子：

<!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"> 
      <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);

<table> 
 <thead> 
  <tr> 
   <th align="center">event</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">select</td> 
   <td align="center">监听select下拉选择事件</td> 
  </tr> 
  <tr> 
   <td align="center">checkbox</td> 
   <td align="center">监听checkbox复选框勾选事件</td> 
  </tr> 
  <tr> 
   <td align="center">switch</td> 
   <td align="center">监听checkbox复选框开关事件</td> 
  </tr> 
  <tr> 
   <td align="center">radio</td> 
   <td align="center">监听radio单选框事件</td> 
  </tr> 
  <tr> 
   <td align="center">submit</td> 
   <td align="center">监听表单提交事件</td> 
  </tr> 
 </tbody> 
</table>

*  监听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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    
    再次温馨提示：上述的\*submit(\*)\*中的 \*\*\* 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：
    
        <button lay-submit lay-filter="*">提交</button>
    
    你可以把\*号换成任意的值，如：*lay-filter=“go”*，但监听事件时也要改成 *form.on(‘submit(go)’, callback);*

> 表单赋值 / 取值

语法：*form.val(‘filter’, object);*

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

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

第二个参数中的键值是表单元素对应的 *name* 和 *value*。

> 应用：新增用户(基于之前的后台布局)

@WebServlet("/UserAddServlet")
    public class UserAddServlet  extends HttpServlet {
        
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		
    		String userName = req.getParameter("user_name");
    		User u = new User(userName,"123456",100);
    		UserData.userList.add(u);
    		
    	}
    
    }

# 九、 删除跟修改功能 #

上面基于后台布局的demo有了表格列表数据的显示功能，还有了添加功能，现将删除跟修改功能也补全完整。

上面已经把修改跟删除的界面显示定义出来，我们这里只需要通过`table.on`将点击事件进行绑定即可。

table.on('tool(demo)', function(obj){
        
    	 var data = obj.data; //获得当前行数据
    	 var layEvent = obj.event; //获得 lay-event 对应的值 
    	 var userName = data.name;// 表单中的name字段
    	 var userId = data.id;// 表单中的id字段
    	 var $ = layui.$ ;
    	 
    	 if(layEvent === 'del_event'){
        
    		 
    		 layer.confirm("你确定真的要删除"+userName+"的数据吗?",{
        icon: 2},function(index){
        
    			 // 异步请求去后台删除数据
    			$.post("UserDeleteServlet",{
        "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:'UserUpdatePageServlet?user_id='+userId
    		  });
    	 }	 	 
      });

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

删除的后台功能

@WebServlet("/UserDeleteServlet")
    public class UserDeleteServlet extends HttpServlet{
        
    
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		String userId = req.getParameter("user_id");
    		
    		for(int i=0;i<UserData.userList.size();i++){
        
    			Integer id = UserData.userList.get(i).getId() ;
    			if(id.equals(Integer.parseInt(userId))){
        
    				UserData.userList.remove(i);
    				break;
    			}
    		}
    		resp.setContentType("text/json;charset=utf-8");
    		resp.getWriter().write("{\"flag\":true}"); 
    			
    	}
    	
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		// TODO Auto-generated method stub
    		doPost(req, resp);
    	}
    	
    }

进入修改页面时需要先到后台获取要修改的用户信息

@WebServlet("/UserUpdatePageServlet")
    public class UserUpdatePageServlet extends HttpServlet {
        
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		String userId = req.getParameter("user_id");
    		for(int i=0;i<UserData.userList.size();i++){
        
    			Integer id = UserData.userList.get(i).getId() ;
    			if(id.equals(Integer.parseInt(userId))){
        
    				req.setAttribute("updateUser", UserData.userList.get(i)); 
    				break;
    			}
    		}
    		
    		req.getRequestDispatcher("user_update.jsp").forward(req, resp);
    		
    	}
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		doPost(req,resp);
    	}
    }

然后才能打开修改页面

修改操作要提交到后台完成

@WebServlet("/UserUpdateServlet")
    public class UserUpdateServlet extends HttpServlet{
        
    	
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		String userName = req.getParameter("user_name");
    		String userId = req.getParameter("user_id");
    		for(int i=0;i<UserData.userList.size();i++){
        
    			Integer id = UserData.userList.get(i).getId() ;
    			if(id.equals(Integer.parseInt(userId))){
        
    				UserData.userList.get(i).setName(userName);; 
    				break;
    			}
    		}
    		
    	}
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
        
    		doGet(req, resp);
    	}
    
    }

到这里，基于layui的后台增删改差功能就全部完成了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6b88df6e961c4c14a2e5980c4edf3093.png