• layui增删改查

    目录

    一，查

            1.主界面代码（mian.jsp）

            2.查询dao方法

            3.action代码

            4.js代码

    二，增

            1.增加dao方法

            2.增加action代码

            4.弹出的模态框

            5.js代码

    三，删

            1.删除dao方法

            2.删除action代码

            4.删除的模态框

            5.js代码

    四，改

            1.修改dao方法

            2.修改action代码

            4.修改的模态框

            5.js代码        

    五，完整展示

    一，查

            1.主界面代码（mian.jsp）

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.  <%@include file="/commom/header.jsp" %>
    4. html >
    5. <html>
    6. <head>
    7. <script src="static/js/mian.js">script>
    8. head>
    9. <body class="layui-layout-body">
    10. <div class="layui-layout layui-layout-admin">
    11.   <div class="layui-header">
    12.     <div class="layui-logo">layui 后台布局div>
    13.     
    14.     <ul class="layui-nav layui-layout-left">
    15.       <li class="layui-nav-item"><a href="">控制台a>li>
    16.       <li class="layui-nav-item"><a href="">商品管理a>li>
    17.       <li class="layui-nav-item"><a href="">用户a>li>
    18.       <li class="layui-nav-item">
    19.         <a href="javascript:;">其它系统a>
    20.         <dl class="layui-nav-child">
    21.           <dd><a href="">邮件管理a>dd>
    22.           <dd><a href="">消息管理a>dd>
    23.           <dd><a href="">授权管理a>dd>
    24.         dl>
    25.       li>
    26.     ul>
    27.     
    28.     
    29.     <ul class="layui-nav layui-layout-right">
    30.       <li class="layui-nav-item">
    31.         <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心a>
    32.         <dl class="layui-nav-child">
    33.           <dd><a href="">基本资料a>dd>
    34.           <dd><a href="">安全设置a>dd>
    35.         dl>
    36.       li>
    37.       <li class="layui-nav-item"><a href="">退了a>li>
    38.     ul>
    39.     
    40.   div>
    41.   
    42.   <div class="layui-side layui-bg-black">
    43.     <div class="layui-side-scroll">
    44.       
    45.       <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
    46.  
    47.       ul>
    48.     div>
    49.   div>
    50.   
    51.   <div class="layui-body">
    52.     
    53.    <div style="padding: 15px;">
    54.     	<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    55. 		  <ul class="layui-tab-title">
    56. 		    <li class="layui-this" lay-id="-1">首页li>
    57. 		  ul>
    58. 		  <div class="layui-tab-content">
    59. 		    <div class="layui-tab-item layui-show">首页内容div>
    60. 		  div>
    61. 		div>
    62.     div>
    63.   div>
    64.   
    65.   <div class="layui-footer">
    66.     
    67.     © layui.com - 底部固定区域
    68.   div>
    69. div>
    70. <script>
    71.  
    72.  
    73.  
    74. script>
    75. body>
    76. html>

    效果：

            2.查询dao方法

    要查询表中的数据：

     dao方法：

    1. 	//查询用户信息及对应的角色，角色是通过case when得来的
    2. 	
    3. 	public List> list(User user,PageBean pageBean) throws Exception{
    4. 		String sql = "select * \r\n" + 
    5. 				",(case rid \r\n" + 
    6. 				"when 1 then '管理者' \r\n" + 
    7. 				"when 2 then '发起者' \r\n" + 
    8. 				"when 3 then '审批者' \r\n" + 
    9. 				"when 4 then '参与者' \r\n" + 
    10. 				"when 5 then '会议室管理员' \r\n" + 
    11. 				"else '其他' end \r\n" + 
    12. 				") roleName \r\n" + 
    13. 				"from \r\n" + 
    14. 				"t_oa_user where 1=1";
    15. 		String name = user.getName();
    16. 		if(StringUtils.isNotBlank(name)) {
    17. 			sql+=" and name like '%"+name+"%' ";
    18. 		}
    19. 		//实体类的属性完全包含数据库查询出来的列段的时候使用
    20. 		//super.executeUpdate(sql, User.cl, pageBean)
    21. 		//返回List>对应的是联表查询，单个实体类对象不完全包含查询的列段
    22. 		return super.executeQuery(sql, pageBean);
    23. 	}

    可以测试一下：

    先选中要测试的dao，然后输入junit，再选择第一个然后点击next

    选择一些按钮： 

     

     则自动生成：

    查询的dao方法没问题 

     

            3.action代码

     

    1. 	//用户查询
    2. 	public String list(HttpServletRequest req,HttpServletResponse resp) {
    3. 		
    4. 		try {
    5. 			PageBean pageBean = new PageBean();
    6. 			pageBean.setRequest(req);
    7. 			List> users = userdao.list(user, pageBean);
    8. 			//注意：layui中的数据的格式
    9. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
    10. 		} catch (Exception e) {
    11. 			e.printStackTrace();
    12. 			try {
    13. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据查询失败"));
    14. 			} catch (Exception e1) {
    15. 				e1.printStackTrace();
    16. 			}
    17.  
    18. 		}
    19. 			return null;
    20. 	
    21. 	}

            4.js代码

    此时还不能直接加载数据：

    1. //1.初始化数据表格
    2. function initTable(){
    3. 	table.render({           //执行渲染
    4.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    5. //        url: 'user.action?methodName=list',     //请求地址
    6.         height: 340,         //自定义高度
    7.         loading: false,      //是否显示加载条（默认 true）
    8.         cols: [[             //设置表头
    9.             {field: 'id', title: '用户编号', width: 120},
    10.             {field: 'name', title: '用户名', width: 120},
    11.             {field: 'loginName', title: '登录账号', width: 140},
    12.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
    13.         ]]
    14.     });
    15. }

     还没有数据：

     点击查询才会有数据：

    1. //2.点击查询
    2. function query(){
    3. 	table.reload('tb', {
    4.         url: $("#ctx").val()+'/user.action',     //请求地址
    5.         method: 'POST',                    //请求方式，GET或者POST
    6.         loading: true,                     //是否显示加载条（默认 true）
    7.         page: true,                        //是否分页
    8.         where: {                           //设定异步数据接口的额外参数，任意设
    9.         	'methodName':'list',
    10.         	'name':$('#name').val()
    11.         },  
    12.         request: {                         //自定义分页请求参数名
    13.             pageName: 'page', //页码的参数名称，默认：page
    14.             limitName: 'rows' //每页数据量的参数名，默认：limit
    15.         }
    16.    });
    17. }

    点击查询便会有数据了： 

     

     还可进行查询：

     

    二，增

            1.增加dao方法

    1. 	//增加
    2. 	public int add(User user) throws Exception {
    3. 		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    4. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
    5. 	}

     测试一下：

    返回为1说明增加成功：

    数据库也有： 

     

            2.增加action代码

    1. 	//用户增加
    2. 	public String add(HttpServletRequest req,HttpServletResponse resp) {
    3. 		
    4. 		try {
    5. 			//影响行数
    6. 			int rs = userdao.add(user);
    7. 			if(rs>0) {
    8. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
    9. 			}
    10. 			else {
    11. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
    12. 			}
    13. 		} catch (Exception e) {
    14. 			e.printStackTrace();
    15. 			try {
    16. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
    17. 			} catch (Exception e1) {
    18. 				e1.printStackTrace();
    19. 			}
    20.  
    21. 		}
    22. 			return null;
    23. 	
    24. 	}

            4.弹出的模态框

     

            5.js代码

    注意layui版本问题：

    1. //3.对话框
    2. function open(title){
    3.     layer.open({
    4.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    5.        title:title,
    6.        area: ['660px', '340px'],   //宽高
    7.        skin: 'layui-layer-rim',    //样式类名
    8.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    9.        btn:['保存','关闭','...'],
    10.        yes: function(index, layero){
    11.     	   //jquery.find
    12.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    13.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    14.            console.log(data);
    15.            //判断title标题
    16.            let methodName="add";
    17.            if(title=="编辑")
    18.         	   methodName="edit";
    19.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    20.         		   data,function(rs){
    21.         	   if(rs.success){
    22.         		   //关闭对话框
    23.         		   layer.closeAll();
    24.         		   //调用查询方法刷新数据
    25.         		   query();
    26.         	   }else{
    27.         		   layer.msg(rs.msg,function(){});
    28.         	   }
    29.            },'json');
    30.        },
    31.        btn2: function(index, layero){
    32.     	   layer.closeAll();
    33.        },
    34.        btn3: function(index, layero){
    35.     	   layer.msg("批量新增");
    36.     	   return false;
    37.        },
    38.        btn4: function(index, layero){
    39.     	   layer.closeAll("批量新增ruojuan");
    40.        }
    41.     });
    42.  }

     补充：

    添加相关按钮：

     

     

    三，删

            1.删除dao方法

    1. 	//删
    2. 	public int del(User user) throws Exception {
    3. 		String sql = "delete from t_oa_user where id=?";
    4. 		return super.executeUpdate(sql, user, new String[] {"id"});
    5. 	}

            2.删除action代码

    1. 	//用户删除
    2. 	public String del(HttpServletRequest req,HttpServletResponse resp) {
    3. 		
    4. 		try {
    5. 			//影响行数
    6. 			int rs = userdao.del(user);
    7. 			if(rs>0) {
    8. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    9. 			}
    10. 			else {
    11. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
    12. 			}
    13. 		} catch (Exception e) {
    14. 			e.printStackTrace();
    15. 			try {
    16. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
    17. 			} catch (Exception e1) {
    18. 				e1.printStackTrace();
    19. 			}
    20.  
    21. 		}
    22. 			return null;
    23. 	
    24. 	}

            4.删除的模态框

     

            5.js代码

    1. 	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    2. 	table.on('tool(tb)', function (obj) {
    3. 		row = obj.data;
    4. 		if (obj.event == "edit") {
    5. 			open("编辑");
    6. 		}else if(obj.event == "del"){
    7. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    8. 			  $.post($("#ctx").val()+'/user.action',{
    9. 				  'methodName':'del',
    10. 				  'id':row.id
    11. 			  },function(rs){
    12. 				  if(rs.success){
    13. 	        		   //调用查询方法刷新数据
    14. 	        		   query();
    15. 	        	   }else{
    16. 	        		   layer.msg(rs.msg,function(){});
    17. 	        	   }
    18. 			  },'json');
    19. 			  layer.close(index);
    20. 			});
    21. 		}else{
    22.  
    23. 		}
    24. 	});
      25. 四，改
              1.修改dao方法
      1. 	//改
      2. 	public int edit(User user) throws Exception {
      3. 		String sql = "update  t_oa_user set name=?,loginName=?,pwd=? where id=?";
      4. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
      5. 	}
              2.修改action代码
      1. 	//用户修改
      2. 	public String edit(HttpServletRequest req,HttpServletResponse resp) {
      3. 		
      4. 		try {
      5. 			//影响行数
      6. 			int rs = userdao.edit(user);
      7. 			if(rs>0) {
      8. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
      9. 			}
      10. 			else {
      11. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
      12. 			}
      13. 		} catch (Exception e) {
      14. 			e.printStackTrace();
      15. 			try {
      16. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
      17. 			} catch (Exception e1) {
      18. 				e1.printStackTrace();
      19. 			}
      20.  
      21. 		}
      22. 			return null;
      23. 	
      24. 	}
              4.修改的模态框
       
              5.js代码        
      代码：
      1. let layer,form,$;
      2. layui.use(['layer','form','jquery'],function(){
      3. 	layer=layui.layer,form=layui.form,$=layui.jquery;
      4. 	initData();
      5. });
      6.  
      7. function initData(){
      8. 	console.log(parent.row);
      9. 	if(null!=parent.row){
      10. 	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
      11. 	     //parent.row：表格行对象
      12. 		 //table的数据在父页面userManager.js
      13. 		 //点击编辑按钮的时候，当前
      14. 	     form.val('user',$.extend({}, parent.row||{}));
      15. 	     $('#name').attr('readonly','readonly');
      16. 	}
      17. }
      18.  
      19. function getData(){
      20. 	//
      21. 	//取 user from中的值
      22. 	return form.val('user');
      23. }
       

      五，完整展示
      userdao:
      1. package com.zking.dao;
      2.  
      3. import java.sql.SQLException;
      4. import java.util.List;
      5. import java.util.Map;
      6.  
      7. import com.zking.entity.User;
      8. import com.zking.util.BaseDao;
      9. import com.zking.util.PageBean;
      10. import com.zking.util.StringUtils;
      11.  
      12. public class UserDao extends BaseDao{
      13. 	public User login(User user) throws Exception {
      14.  
      15. 		String sql = "select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
      16. 		List users = super.executeQuery(sql, User.class,null);
      17. 		//根据sql查询符合条件的用户，通常只会返回一条数据
      18. 		return users == null || users.size() ==0 ? null : users.get(0);
      19. 		//return super.executeQuery(sql, clz, pageBean);
      20. 	}
      21. 	
      22. 	//查询用户信息及对应的角色，角色是通过case when得来的
      23. 	
      24. 	public List> list(User user,PageBean pageBean) throws Exception{
      25. 		String sql = "select * \r\n" + 
      26. 				",(case rid \r\n" + 
      27. 				"when 1 then '管理者' \r\n" + 
      28. 				"when 2 then '发起者' \r\n" + 
      29. 				"when 3 then '审批者' \r\n" + 
      30. 				"when 4 then '参与者' \r\n" + 
      31. 				"when 5 then '会议室管理员' \r\n" + 
      32. 				"else '其他' end \r\n" + 
      33. 				") roleName \r\n" + 
      34. 				"from \r\n" + 
      35. 				"t_oa_user where 1=1";
      36. 		String name = user.getName();
      37. 		if(StringUtils.isNotBlank(name)) {
      38. 			sql+=" and name like '%"+name+"%' ";
      39. 		}
      40. 		//实体类的属性完全包含数据库查询出来的列段的时候使用
      41. 		//super.executeUpdate(sql, User.cl, pageBean)
      42. 		//返回List>对应的是联表查询，单个实体类对象不完全包含查询的列段
      43. 		return super.executeQuery(sql, pageBean);
      44. 	}
      45. 	
      46. 	//增加
      47. 	public int add(User user) throws Exception {
      48. 		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
      49. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
      50. 	}
      51. 	
      52. 	//删
      53. 	public int del(User user) throws Exception {
      54. 		String sql = "delete from t_oa_user where id=?";
      55. 		return super.executeUpdate(sql, user, new String[] {"id"});
      56. 	}
      57.  
      58. 	//改
      59. 	public int edit(User user) throws Exception {
      60. 		String sql = "update  t_oa_user set name=?,loginName=?,pwd=? where id=?";
      61. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
      62. 	}
      63.  
      64. 	
      65. 	
      66. 	
      67. 	
      68. 	
      69. 	
      70. 	
      71. 	
      72. 	
      73. }
      userAction:
      1. package com.zking.web;
      2.  
      3. import java.util.HashMap;
      4. import java.util.List;
      5. import java.util.Map;
      6.  
      7. import javax.servlet.http.HttpServletRequest;
      8. import javax.servlet.http.HttpServletResponse;
      9.  
      10. import com.zking.dao.UserDao;
      11. import com.zking.entity.User;
      12. import com.zking.framework.ActionSupport;
      13. import com.zking.framework.ModelDriver;
      14. import com.zking.util.PageBean;
      15. import com.zking.util.R;
      16. import com.zking.util.ResponseUtil;
      17.  
      18. public class UserAction extends ActionSupport implements ModelDriver{
      19.  
      20. 	private User user = new User();
      21. 	private UserDao userdao = new UserDao();
      22. 	
      23. 	
      24. 	//写一个方法处理前台的请求
      25. 	
      26. //	public String login(HttpServletRequest req,HttpServletResponse resp) {
      27. //		
      28. //		Map map = new HashMap();
      29. //		if("ruojuan".equals(user.getUsername())&& "1234567".equals(user.getPassword())) {
      30. //			//登陆成功
      31. //			map.put("code", 200);
      32. //			map.put("msg","登陆成功");
      33. //		}
      34. //		else {
      35. //			//登陆失败
      36. //			map.put("code", 0);
      37. //			map.put("msg","登陆失败");
      38. //		}
      39. //		try {
      40. //			ResponseUtil.writeJson(resp, map);
      41. //		} catch (Exception e) {
      42. //			// TODO Auto-generated catch block
      43. //			e.printStackTrace();
      44. //		}
      45. //		//return super.execute(req, resp);
      46. //		return null;
      47. //	
      48. //	}
      49. 	public String login(HttpServletRequest req,HttpServletResponse resp) {
      50. 		
      51. 		try {
      52. 			User u = userdao.login(user);
      53. 			if(u !=null) {
      54. 				//登陆成功
      55. 				//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg","登陆成功"));
      56. 				ResponseUtil.writeJson(resp,R.ok(200, "成功"));
      57. 				
      58. 			}
      59. 			else {
      60. 				//登陆失败
      61. 				//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","登陆失败"));
      62. 				ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));
      63. 			}
      64. 		} catch (Exception e) {
      65. 			e.printStackTrace();
      66. 			try {
      67. 				ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));
      68. 			} catch (Exception e1) {
      69. 				e1.printStackTrace();
      70. 			}
      71.  
      72. 		}
      73. 			return null;
      74. 	
      75. 	}
      76. 	
      77. 	//用户查询
      78. 	public String list(HttpServletRequest req,HttpServletResponse resp) {
      79. 		
      80. 		try {
      81. 			PageBean pageBean = new PageBean();
      82. 			pageBean.setRequest(req);
      83. 			List> users = userdao.list(user, pageBean);
      84. 			//注意：layui中的数据的格式
      85. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
      86. 		} catch (Exception e) {
      87. 			e.printStackTrace();
      88. 			try {
      89. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据查询失败"));
      90. 			} catch (Exception e1) {
      91. 				e1.printStackTrace();
      92. 			}
      93.  
      94. 		}
      95. 			return null;
      96. 	
      97. 	}
      98. 	
      99. 	//用户增加
      100. 	public String add(HttpServletRequest req,HttpServletResponse resp) {
      101. 		
      102. 		try {
      103. 			//影响行数
      104. 			int rs = userdao.add(user);
      105. 			if(rs>0) {
      106. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
      107. 			}
      108. 			else {
      109. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
      110. 			}
      111. 		} catch (Exception e) {
      112. 			e.printStackTrace();
      113. 			try {
      114. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
      115. 			} catch (Exception e1) {
      116. 				e1.printStackTrace();
      117. 			}
      118.  
      119. 		}
      120. 			return null;
      121. 	
      122. 	}
      123. 	
      124. 	//用户删除
      125. 	public String del(HttpServletRequest req,HttpServletResponse resp) {
      126. 		
      127. 		try {
      128. 			//影响行数
      129. 			int rs = userdao.del(user);
      130. 			if(rs>0) {
      131. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
      132. 			}
      133. 			else {
      134. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
      135. 			}
      136. 		} catch (Exception e) {
      137. 			e.printStackTrace();
      138. 			try {
      139. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
      140. 			} catch (Exception e1) {
      141. 				e1.printStackTrace();
      142. 			}
      143.  
      144. 		}
      145. 			return null;
      146. 	
      147. 	}
      148. 	
      149. 	
      150. 	//用户修改
      151. 	public String edit(HttpServletRequest req,HttpServletResponse resp) {
      152. 		
      153. 		try {
      154. 			//影响行数
      155. 			int rs = userdao.edit(user);
      156. 			if(rs>0) {
      157. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
      158. 			}
      159. 			else {
      160. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
      161. 			}
      162. 		} catch (Exception e) {
      163. 			e.printStackTrace();
      164. 			try {
      165. 				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
      166. 			} catch (Exception e1) {
      167. 				e1.printStackTrace();
      168. 			}
      169.  
      170. 		}
      171. 			return null;
      172. 	
      173. 	}
      174. 	
      175. 	
      176. 	
      177. 	@Override
      178. 	public User getModel() {
      179. 		// TODO Auto-generated method stub
      180. 		return user;
      181. 	}
      182.  
      183. }
      userManeger:
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2.     pageEncoding="UTF-8"%>
      3.     <%@include file="/commom/header.jsp" %>
      4. html >
      5. <html>
      6. <head>
      7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      9. <script src="static/js/system/userManage.js">script>
      10.  
      11. <title>用户管理title>
      12. head>
      13. <body>
      14. 	
      15. 	<div class="layui-form-item">
      16. 	  <div class="layui-inline">
      17. 	    <label class="layui-form-label">用户名：label>
      18. 	    <div class="layui-input-inline">
      19. 	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      20. 	    div>
      21. 	  div>
      22. 	  
      23. 	  <div class="layui-inline">
      24. 	    <div class="layui-input-inline">
      25. 	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
      26. 	      	<i class="layui-icon layui-icon-search">i>
      27. 	      	查询
      28. 	      button>
      29. 	      <button id="btn_add" type="button" class="layui-btn">新增button>
      30. 	    div>
      31. 	  div>
      32. 	  
      33. 	div>
      34. 	
      35. 	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;">table>
      36. 	
      37. 	
      38. 	<script type="text/html" id="toolbar">
      39.  		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑button>
      40.  		<button class="layui-btn layui-btn-sm" lay-event="del">删除button>
      41.  		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码button>
      42. 	script>
      43. body>
      44. html>
      userManger.js:
      1. let layer,$,table;
      2. var row;
      3. layui.use(['jquery', 'layer', 'table'], function(){
      4. 	layer = layui.layer
      5. 	,$ = layui.jquery
      6. 	,table = layui.table;
      7. 	//初始化数据表格
      8. 	initTable();
      9. 	//绑定查询按钮的点击事件
      10. 	$('#btn_search').click(function(){
      11. 		query();
      12. 	});
      13. 	
      14. 	//绑定新增按钮的点击事件
      15. 	$('#btn_add').click(function(){
      16. 		row=null;
      17. 		open('新增');
      18. 	});
      19. });
      20.  
      21.  
      22. //1.初始化数据表格
      23. function initTable(){
      24. 	table.render({           //执行渲染
      25.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
      26. //        url: 'user.action?methodName=list',     //请求地址
      27.         height: 340,         //自定义高度
      28.         loading: false,      //是否显示加载条（默认 true）
      29.         cols: [[             //设置表头
      30.             {field: 'id', title: '用户编号', width: 120},
      31.             {field: 'name', title: '用户名', width: 120},
      32.             {field: 'loginName', title: '登录账号', width: 140},
      33.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
      34.         ]]
      35.     });
      36. 	
      37. 	
      38. 	//在页面中的
       
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

      中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    25. 	table.on('tool(tb)', function (obj) {
    26. 		row = obj.data;
    27. 		if (obj.event == "edit") {
    28. 			open("编辑");
    29. 		}else if(obj.event == "del"){
    30. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    31. 			  $.post($("#ctx").val()+'/user.action',{
    32. 				  'methodName':'del',
    33. 				  'id':row.id
    34. 			  },function(rs){
    35. 				  if(rs.success){
    36. 	        		   //调用查询方法刷新数据
    37. 	        		   query();
    38. 	        	   }else{
    39. 	        		   layer.msg(rs.msg,function(){});
    40. 	        	   }
    41. 			  },'json');
    42. 			  layer.close(index);
    43. 			});
    44. 		}else{
    45.  
    46. 		}
    47. 	});
    48. 	
    49. }
    50. //2.点击查询
    51. function query(){
    52. 	table.reload('tb', {
    53.         url: $("#ctx").val()+'/user.action',     //请求地址
    54.         method: 'POST',                    //请求方式，GET或者POST
    55.         loading: true,                     //是否显示加载条（默认 true）
    56.         page: true,                        //是否分页
    57.         where: {                           //设定异步数据接口的额外参数，任意设
    58.         	'methodName':'list',
    59.         	'name':$('#name').val()
    60.         },  
    61.         request: {                         //自定义分页请求参数名
    62.             pageName: 'page', //页码的参数名称，默认：page
    63.             limitName: 'rows' //每页数据量的参数名，默认：limit
    64.         }
    65.    });
    66. }
    67.  
    68.  
    69. //3.对话框
    70. function open(title){
    71.     layer.open({
    72.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    73.        title:title,
    74.        area: ['660px', '340px'],   //宽高
    75.        skin: 'layui-layer-rim',    //样式类名
    76.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    77.        btn:['保存','关闭','...'],
    78.        yes: function(index, layero){
    79.     	   //jquery.find
    80.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    81.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    82.            console.log(data);
    83.            //判断title标题
    84.            let methodName="add";
    85.            if(title=="编辑")
    86.         	   methodName="edit";
    87.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    88.         		   data,function(rs){
    89.         	   if(rs.success){
    90.         		   //关闭对话框
    91.         		   layer.closeAll();
    92.         		   //调用查询方法刷新数据
    93.         		   query();
    94.         	   }else{
    95.         		   layer.msg(rs.msg,function(){});
    96.         	   }
    97.            },'json');
    98.        },
    99.        btn2: function(index, layero){
    100.     	   layer.closeAll();
    101.        },
    102.        btn3: function(index, layero){
    103.     	   layer.msg("批量新增");
    104.     	   return false;
    105.        },
    106.        btn4: function(index, layero){
    107.     	   layer.closeAll("批量新增ruojuan");
    108.        }
    109.     });
    110.  }
      111. userEdit.jsp:
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2. 	pageEncoding="UTF-8"%>
      3. <%@include file="/commom/header.jsp"%>
      4. html>
      5. <html>
      6. <head>
      7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js">script>
      9. <title>用户新增title>
      10. head>
      11. <style>
      12. .layui-form-select dl{
      13. 	max-height:150px;
      14. }
      15. style>
      16. <body>
      17. <div style="padding:10px;">
      18.     <form class="layui-form layui-form-pane" lay-filter="user">
      19.         <input type="hidden" name="id"/>
      20.         <div class="layui-form-item">
      21.             <label class="layui-form-label">用户名称label>
      22.             <div class="layui-input-block">
      23.                 <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
      24.             div>
      25.         div>
      26.         <div class="layui-form-item">
      27.             <label class="layui-form-label">用户角色label>
      28.             <div class="layui-input-block">
      29.                 <select name="rid">
      30.                     <option value="">---请选择---option>
      31.                     <option value="1">管理员option>
      32.                     <option value="2">发起者option>
      33.                     <option value="3">审批者option>
      34.                     <option value="4">参与者option>
      35.                     <option value="5">会议管理员option>
      36.                 select>
      37.             div>
      38.         div>
      39.         <div class="layui-form-item">
      40.             <label class="layui-form-label">登录账号label>
      41.             <div class="layui-input-block">
      42.                 <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
      43.             div>
      44.         div>
      45.         <div class="layui-form-item">
      46.             <label class="layui-form-label">登录密码label>
      47.             <div class="layui-input-block">
      48.                 <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
      49.             div>
      50.         div>
      51.     form>
      52. div>
      53. body>
      54. html>
      userEdit.js:
      1. let layer,form,$;
      2. layui.use(['layer','form','jquery'],function(){
      3. 	layer=layui.layer,form=layui.form,$=layui.jquery;
      4. 	initData();
      5. });
      6.  
      7. function initData(){
      8. 	console.log(parent.row);
      9. 	if(null!=parent.row){
      10. 	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
      11. 	     //parent.row：表格行对象
      12. 		 //table的数据在父页面userManager.js
      13. 		 //点击编辑按钮的时候，当前
      14. 	     form.val('user',$.extend({}, parent.row||{}));
      15. 	     $('#name').attr('readonly','readonly');
      16. 	}
      17. }
      18.  
      19. function getData(){
      20. 	//
      21. 	//取 user from中的值
      22. 	return form.val('user');
      23. }
      
                
                    
                

                
    111. 

                    相关阅读:
      
                    
SpringMVC入门（工作原理、框架流程、小实例的创建）                            
      
JVM参数调优                            
      
linux查看es节点使用情况,elasticsearch（es） 如何查看当前集群中哪个节点是主节点（master）                            
      
每日一题 2678. 老人的数目（简单）                            
      
微服务整合公众号告警系统                            
      
疫情重压下，屈臣氏为何上半年仍盈利？                            
      
ElasticSearch 批量查询                            
      
LeetCode 19. 删除链表的倒数第 N 个结点                            
      
笔试强训(二)                            
      
实验9 交换网络综合实验                            
      
                          
                
    112. 
                    原文地址：https://blog.csdn.net/weixin_67338832/article/details/125880166
                
      113.