LayUi之用户(URUD)

讨厌下雨天。

已于 2022-07-20 19:09:45 修改

阅读量1k

点赞数

文章标签： layui servlet java

于 2022-07-20 19:02:33 首次发布

本文链接：https://blog.csdn.net/m0_68211831/article/details/125897546

版权

1.查询

主界面：main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>    
<!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>Insert title here</title>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <!-- <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      左侧导航区域（可配合layui已有的垂直导航）
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
         <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:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div> -->
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
	<div class="layui-tab"  lay-filter="demo" lay-allowclose="true">
	  <ul class="layui-tab-title">
	    <li class="layui-this" lay-id="11">首页</li>
	  </ul>
	  <div class="layui-tab-content" >
	    <div class="layui-tab-item layui-show">1</div>
	  </div>
	</div> 
	</div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 

let $,element;
layui.use(['jquery','element'],function(){
	 $ = layui.jquery,element=layui.element;
	$.ajax({
		url:'${pageContext.request.contextPath}/permission.action?methodName=menus'
		,dataType:'json'
		,success:function(data){
			let htmlstr = '';
			$.each(data,function(i,n){
				htmlstr += ' <li class="layui-nav-item layui-nav-itemed">';
				htmlstr += '   <a class="" href="javascript:;">'+data[i].text+'</a>';
				//判断一级节点是否存在子节点
				if(data[i].hasChildren){
					htmlstr += '<dl class="layui-nav-child">';
					let children = data[i].children;
					$.each(children,function(index,node){
						htmlstr +='<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';
					});
					htmlstr += '</dl>';
				}
				htmlstr += '</li>';
			});
			$("#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 : "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",
				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源代码：

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

查询到方法测试类：

查询测试代码：


	@Test
	public void testList() {
		User user = new User();
		PageBean pageBean = new PageBean();
		try {
			List<Map<String, Object>> list = userDao.list(user, pageBean);
		for(Map<String, Object> map:list) {
			System.out.println(map);
		}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

运行结果展示：

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

action代码

	//用户查询
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> users = userdao.list(user, pageBean);
			//注意：layui中的数据的格式
			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据查询失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}

js代码:

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

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

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

2.增加

增加的dao方法：

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

增加dao方法测试：

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

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

增加action代码：

	//用户增加
	public String add(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = userdao.add(user);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}

js代码：

let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
	
	//绑定新增按钮的点击事件
	$('#btn_add').click(function(){
		row=null;
		open('新增');
	});
});
 
 
//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
	
	
	//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{
 
		}
	});
	
}
//2.点击查询
function query(){
//	console.log($("#ctx").val());
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
        	'methodName':'list',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
   });
}
 
 
//3.对话框
function open(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭','批量新增'],
       yes: function(index, layero){
    	   //jquery.find
    	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);
           //判断title标题
           let methodName="add";
           if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){
        	   if(rs.success){
        		   //关闭对话框
        		   layer.closeAll();
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
           },'json');
       },
       btn2: function(index, layero){
    	   layer.closeAll();
       },
       btn3: function(index, layero){
    	   layer.msg("批量新增");
    	   return false;
       },
       btn4: function(index, layero){
    	   layer.closeAll("批量新增碎冰冰");
       }
    });
 }

界面运行效果展示：点击新增按钮会弹出一个模态框

3修改

修改的dao方法：


//修改
	public int edit(User user) throws Exception{
		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	}

修改dao测试类：

修改成功

修改action代码：

	//用户修改
	public String edit(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = userdao.edit(user);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}

js代码：

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});
 
function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
		 //table的数据在父页面userManager.js
		 //点击编辑按钮的时候，当前
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//<form class="layui-form layui-form-pane" lay-filter="user">
	//取 user from中的值
	return form.val('user');
}

4.删除

删除的dao方法：

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

删除的dao方法测试：

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

删除成功，没有冰冰怕热这个用户了，什么我们的删除的dao方法没有问题

删除action代码：

	//用户删除
	public String del(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = userdao.del(user);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}

js代码：

	//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{
 
		}
	});

界面效果：

5.完整代码

userManage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/common/header.jsp" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="static/js/system/userManage.js"></script>

<title>Insert title here</title>
</head>
<body>  

<!-- 搜索栏 -->
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">用户名：</label>
	    <div class="layui-input-inline">
	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-inline">
	    <div class="layui-input-inline">
	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
	      	<i class="layui-icon layui-icon-search"></i>
	      	查询
	      </button>
	      <button id="btn_add" type="button" class="layui-btn">新增</button>
	    </div>
	  </div>
	  
	</div>
	<!-- 数据表格及分页 -->
	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;"></table>
	<!-- 对话框（新增和编辑共用一个页面） -->
	
	<script type="text/html" id="toolbar">
 		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
 		<button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
 		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码</button>
	</script>

 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
               
          
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });
  
  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});


layer.open({
  title: '在线调试'
  ,content: '可以填写任意的layer代码'
});
 

</script>



</body>
</html>

userManage.js

let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
	
	//绑定新增按钮的点击事件
	$('#btn_add').click(function(){
		row=null;
		open('新增');
	});
});
 
 
//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
	
	
	//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{
 
		}
	});
	
}
//2.点击查询
function query(){
//	console.log($("#ctx").val());
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
        	'methodName':'list',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
   });
}
 
 
//3.对话框
function open(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭','批量新增'],
       yes: function(index, layero){
    	   //jquery.find
    	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);
           //判断title标题
           let methodName="add";
           if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){
        	   if(rs.success){
        		   //关闭对话框
        		   layer.closeAll();
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
           },'json');
       },
       btn2: function(index, layero){
    	   layer.closeAll();
       },
       btn3: function(index, layero){
    	   layer.msg("批量新增");
    	   return false;
       },
       btn4: function(index, layero){
    	   layer.closeAll("批量新增碎冰冰");
       }
    });
 }

userEdit.js

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});
 
function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
		 //table的数据在父页面userManager.js
		 //点击编辑按钮的时候，当前行赋值给子界面userEdit.jsp
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//<form class="layui-form layui-form-pane" lay-filter="user">
	//取 user from中的值
	return form.val('user');
}

userEdit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{
	max-height:150px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <select name="rid">
                    <option value="">---请选择---</option>
                    <option value="1">管理员</option>
                    <option value="2">发起者</option>
                    <option value="3">审批者</option>
                    <option value="4">参与者</option>
                    <option value="5">会议管理员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>

讨厌下雨天。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LayUi之用户(URUD)

界面修改展示点用户管理会展示用户名，文本框，查询按钮以及新增按钮。界面运行效果展示点击新增按钮会弹出一个模态框。when5then'会议室管理员'when1then'管理员'when2then'发起者'when3then'审批者'when4then'参与者'上面都完成了就可以进行模糊查询了。else'其他'end。运行结果为1，去数据库查询。............
复制链接

扫一扫