• });
  • $("#menu").html(htmlstr);
  • }
  • })
  • })
  • /**
  • * 1.查找layui的选项卡页面布局代码
  • 2.动态的添加选项卡
  • 3.将选项卡名称换成菜单名
  • 4.重复的tab选项卡不添加，改为选中
  • 5.跳转页面
  • */
  • function openTabs(title,url,id){
  • let $node = $("li[lay-id='"+id+"']");
  • if($node.length == 0){
  • // 新增一个Tab项
  • element.tabAdd('demo', {
  • title : title,//用于演示
  • content : "",
  • id : id
  • })
  • }
  • //切换到指定选项卡
  • element.tabChange('demo', id);
  • }
  • script>
  • body>
  • html>

    • 界面修改展示：点用户管理会展示用户名，文本框，查询按钮以及新增按钮

    查询 dao方法

    查询数据库中的数据

     sql语句：

    select * 
    ,(case rid 
    when 1 then '管理员'
    when 2 then '发起者'
    when 3 then '审批者'
    when 4 then '参与者'
    when 5 then '会议室管理员'
    else '其他'end 
    )roleName

    from t_oa_user

    dao方法：

     查询的dao源代码：

    1. //查询用户信息及对应的角色，角色是通过case when得来的
    2. 	public List> list(User user,PageBean pageBean) throws Exception{
    3. 		String sql ="select * \r\n" + 
    4. 				",(case rid \r\n" + 
    5. 				"when 1 then '管理员' \r\n" + 
    6. 				"when 2 then '发起者' \r\n" + 
    7. 				"when 3 then '审批者' \r\n" + 
    8. 				"when 4 then '参与者' \r\n" + 
    9. 				"when 5 then '会议室管理员' \r\n" + 
    10. 				"else '其他'end \r\n" + 
    11. 				")roleName\r\n" + 
    12. 				"\r\n" + 
    13. 				"from t_oa_user where 1=1 ";
    14. 		String name = user.getName();
    15. 		if(StringUtils.isNotBlank(name)) {
    16. 			sql+="and name like '%"+name+"%'";
    17. 		}
    18. 		return super.executeQuery(sql, pageBean);
    19. 	}

    查询到方法测试类：

     

     

    查询测试 代码：

    1.  
    2. 	@Test
    3. 	public void testList() {
    4. 		User user = new User();
    5. 		PageBean pageBean = new PageBean();
    6. 		try {
    7. 			List> list = userDao.list(user, pageBean);
    8. 		for(Map map:list) {
    9. 			System.out.println(map);
    10. 		}
    11. 		} catch (Exception e) {
    12. 			// TODO Auto-generated catch block
    13. 			e.printStackTrace();
    14. 		}
    15. 	}

    运行结果展示：

     所运行出来的数据就是数据库里面所存储的数据，如果有表示查询方法没有问题

    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. 	}

    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. }

    上面都完成了就可以进行模糊查询了

    2.增加 

            增加的dao方法：

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

    增加dao方法测试：

     运行结果显示1，就可以去数据库查看是否增加了冰冰

     增加成功，数据库也查询到冰冰，说明增加的dao 方法没有问题

     增加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. 	}

    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"属性才能触发属性!!!
    39. 	table.on('tool(tb)', function (obj) {
    40. 		row = obj.data;
    41. 		if (obj.event == "edit") {
    42. 			open("编辑");
    43. 		}else if(obj.event == "del"){
    44. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    45. 			  $.post($("#ctx").val()+'/user.action',{
    46. 				  'methodName':'del',
    47. 				  'id':row.id
    48. 			  },function(rs){
    49. 				  if(rs.success){
    50. 	        		   //调用查询方法刷新数据
    51. 	        		   query();
    52. 	        	   }else{
    53. 	        		   layer.msg(rs.msg,function(){});
    54. 	        	   }
    55. 			  },'json');
    56. 			  layer.close(index);
    57. 			});
    58. 		}else{
    59.  
    60. 		}
    61. 	});
    62. 	
    63. }
    64. //2.点击查询
    65. function query(){
    66. //	console.log($("#ctx").val());
    67. 	table.reload('tb', {
    68.         url: $("#ctx").val()+'/user.action',     //请求地址
    69.         method: 'POST',                    //请求方式，GET或者POST
    70.         loading: true,                     //是否显示加载条（默认 true）
    71.         page: true,                        //是否分页
    72.         where: {                           //设定异步数据接口的额外参数，任意设
    73.         	'methodName':'list',
    74.         	'name':$('#name').val()
    75.         },  
    76.         request: {                         //自定义分页请求参数名
    77.             pageName: 'page', //页码的参数名称，默认：page
    78.             limitName: 'rows' //每页数据量的参数名，默认：limit
    79.         }
    80.    });
    81. }
    82.  
    83.  
    84. //3.对话框
    85. function open(title){
    86.     layer.open({
    87.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    88.        title:title,
    89.        area: ['660px', '340px'],   //宽高
    90.        skin: 'layui-layer-rim',    //样式类名
    91.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    92.        btn:['保存','关闭','批量新增'],
    93.        yes: function(index, layero){
    94.     	   //jquery.find
    95.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    96.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    97.            console.log(data);
    98.            //判断title标题
    99.            let methodName="add";
    100.            if(title=="编辑")
    101.         	   methodName="edit";
    102.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    103.         		   data,function(rs){
    104.         	   if(rs.success){
    105.         		   //关闭对话框
    106.         		   layer.closeAll();
    107.         		   //调用查询方法刷新数据
    108.         		   query();
    109.         	   }else{
    110.         		   layer.msg(rs.msg,function(){});
    111.         	   }
    112.            },'json');
    113.        },
    114.        btn2: function(index, layero){
    115.     	   layer.closeAll();
    116.        },
    117.        btn3: function(index, layero){
    118.     	   layer.msg("批量新增");
    119.     	   return false;
    120.        },
    121.        btn4: function(index, layero){
    122.     	   layer.closeAll("批量新增碎冰冰");
    123.        }
    124.     });
    125.  }
      126. 界面运行效果展示：点击新增按钮会弹出一个模态框
        
      3修改
              修改的dao方法：
      1.  
      2. //修改
      3. 	public int edit(User user) throws Exception{
      4. 		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?";
      5. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
      6. 	}
      修改dao测试类：
       

       修改成功
       修改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. 	}
      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. }
      4.删除
      删除的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. 	}
      删除的dao方法测试：
       

      运行结果为1，去数据库查询
       
       

      删除成功，没有冰冰怕热这个用户了，什么我们的删除的dao方法没有问题 
       
      删除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. 	}
      js代码：
      1. 	//在页面中的
       
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

      中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    126. 	table.on('tool(tb)', function (obj) {
    127. 		row = obj.data;
    128. 		if (obj.event == "edit") {
    129. 			open("编辑");
    130. 		}else if(obj.event == "del"){
    131. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    132. 			  $.post($("#ctx").val()+'/user.action',{
    133. 				  'methodName':'del',
    134. 				  'id':row.id
    135. 			  },function(rs){
    136. 				  if(rs.success){
    137. 	        		   //调用查询方法刷新数据
    138. 	        		   query();
    139. 	        	   }else{
    140. 	        		   layer.msg(rs.msg,function(){});
    141. 	        	   }
    142. 			  },'json');
    143. 			  layer.close(index);
    144. 			});
    145. 		}else{
    146.  
    147. 		}
    148. 	});
      149. 界面效果：
       5.完整代码
      userManage.jsp
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2.     pageEncoding="UTF-8"%>
      3.     <%@ include file="/common/header.jsp" %>
      4.  
      5. <html>
      6. <head>
      7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      8. <script src="static/js/system/userManage.js">script>
      9.  
      10. <title>Insert title heretitle>
      11. head>
      12. <body>  
      13.  
      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.  
      44.  
      45. <script type="text/html" id="barDemo">
      46.   <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看a>
      47.   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑a>
      48.   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除a>
      49. script>
      50.                
      51.           
      52. <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8">script>
      54. <script>
      55. layui.use('table', function(){
      56.   var table = layui.table;
      57.   //监听表格复选框选择
      58.   table.on('checkbox(demo)', function(obj){
      59.     console.log(obj)
      60.   });
      61.   //监听工具条
      62.   table.on('tool(demo)', function(obj){
      63.     var data = obj.data;
      64.     if(obj.event === 'detail'){
      65.       layer.msg('ID：'+ data.id + ' 的查看操作');
      66.     } else if(obj.event === 'del'){
      67.       layer.confirm('真的删除行么', function(index){
      68.         obj.del();
      69.         layer.close(index);
      70.       });
      71.     } else if(obj.event === 'edit'){
      72.       layer.alert('编辑行：
        '        + JSON.stringify(data))
      73.     }
      74.   });
      75.   
      76.   var $ = layui.$, active = {
      77.     getCheckData: function(){ //获取选中数据
      78.       var checkStatus = table.checkStatus('idTest')
      79.       ,data = checkStatus.data;
      80.       layer.alert(JSON.stringify(data));
      81.     }
      82.     ,getCheckLength: function(){ //获取选中数目
      83.       var checkStatus = table.checkStatus('idTest')
      84.       ,data = checkStatus.data;
      85.       layer.msg('选中了：'+ data.length + ' 个');
      86.     }
      87.     ,isAll: function(){ //验证是否全选
      88.       var checkStatus = table.checkStatus('idTest');
      89.       layer.msg(checkStatus.isAll ? '全选': '未全选')
      90.     }
      91.   };
      92.   
      93.   $('.demoTable .layui-btn').on('click', function(){
      94.     var type = $(this).data('type');
      95.     active[type] ? active[type].call(this) : '';
      96.   });
      97. });
      98.  
      99.  
      100. layer.open({
      101.   title: '在线调试'
      102.   ,content: '可以填写任意的layer代码'
      103. });
      104.  
      105.  
      106. script>
      107.  
      108.  
      109.  
      110. body>
      111. html>
      userManage.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"属性才能触发属性!!!
    149. 	table.on('tool(tb)', function (obj) {
    150. 		row = obj.data;
    151. 		if (obj.event == "edit") {
    152. 			open("编辑");
    153. 		}else if(obj.event == "del"){
    154. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    155. 			  $.post($("#ctx").val()+'/user.action',{
    156. 				  'methodName':'del',
    157. 				  'id':row.id
    158. 			  },function(rs){
    159. 				  if(rs.success){
    160. 	        		   //调用查询方法刷新数据
    161. 	        		   query();
    162. 	        	   }else{
    163. 	        		   layer.msg(rs.msg,function(){});
    164. 	        	   }
    165. 			  },'json');
    166. 			  layer.close(index);
    167. 			});
    168. 		}else{
    169.  
    170. 		}
    171. 	});
    172. 	
    173. }
    174. //2.点击查询
    175. function query(){
    176. //	console.log($("#ctx").val());
    177. 	table.reload('tb', {
    178.         url: $("#ctx").val()+'/user.action',     //请求地址
    179.         method: 'POST',                    //请求方式，GET或者POST
    180.         loading: true,                     //是否显示加载条（默认 true）
    181.         page: true,                        //是否分页
    182.         where: {                           //设定异步数据接口的额外参数，任意设
    183.         	'methodName':'list',
    184.         	'name':$('#name').val()
    185.         },  
    186.         request: {                         //自定义分页请求参数名
    187.             pageName: 'page', //页码的参数名称，默认：page
    188.             limitName: 'rows' //每页数据量的参数名，默认：limit
    189.         }
    190.    });
    191. }
    192.  
    193.  
    194. //3.对话框
    195. function open(title){
    196.     layer.open({
    197.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    198.        title:title,
    199.        area: ['660px', '340px'],   //宽高
    200.        skin: 'layui-layer-rim',    //样式类名
    201.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    202.        btn:['保存','关闭','批量新增'],
    203.        yes: function(index, layero){
    204.     	   //jquery.find
    205.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    206.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    207.            console.log(data);
    208.            //判断title标题
    209.            let methodName="add";
    210.            if(title=="编辑")
    211.         	   methodName="edit";
    212.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    213.         		   data,function(rs){
    214.         	   if(rs.success){
    215.         		   //关闭对话框
    216.         		   layer.closeAll();
    217.         		   //调用查询方法刷新数据
    218.         		   query();
    219.         	   }else{
    220.         		   layer.msg(rs.msg,function(){});
    221.         	   }
    222.            },'json');
    223.        },
    224.        btn2: function(index, layero){
    225.     	   layer.closeAll();
    226.        },
    227.        btn3: function(index, layero){
    228.     	   layer.msg("批量新增");
    229.     	   return false;
    230.        },
    231.        btn4: function(index, layero){
    232.     	   layer.closeAll("批量新增碎冰冰");
    233.        }
    234.     });
    235.  }
      236. 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. 		 //点击编辑按钮的时候，当前行赋值给子界面userEdit.jsp
      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. }
      userEdit.jsp
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2. 	pageEncoding="UTF-8"%>
      3. <%@include file="/common/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>
      
                
                    
                

                
    236. 

                    相关阅读:
      
                    
【Android】Bugly使用                            
      
苍穹外卖集成 Apache POI Java实现Excel文件的读写下载                            
      
python爬虫实战之异步爬取数据                            
      
Android源码——SparseArray源码解析                            
      
idea 本地项目上传到 Git 步骤                            
      
CVPR2020：Seeing Through Fog Without Seeing Fog                            
      
专注效率提升「GitHub 热点速览 v.22.36」                            
      
【Flutter】三个Channel(Android-java / Ios-swift)                            
      
win7升级到win10系统后，node13升级为node16，node版本node-sass版本与不匹配，导致出现npm ERR! ERESOLVE could not resolve                            
      
腾讯云死磕政务云？                            
      
                          
                
    237. 
                    原文地址：https://blog.csdn.net/m0_68211831/article/details/125897546
                
      238.