目录
一，增加
1.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"});
}写完方法后要有测试的习惯
<代码演示>
@Test
public void testAdd() {
User u = new User();
u.setName("熊二");
u.setLoginName("xionger");
u.setPwd("123");
try {
int n = ud.add(u);
System.out.println(n);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}显示为1，说明新增成功
数据库
2.子控制器代码
//用户增加
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;
}3.js代码
<代码演示>
//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("批量新增ruojuan");
}
});
}4.弹出框
<如图所示>
点击新增
补充说明:
此处的...为添加其他相关按钮
btn:['保存','关闭','...'],
....
btn3: function(index, layero){
layer.msg("批量新增");
return false;
},
btn4: function(index, layero){
layer.closeAll("批量新增ruojuan");
}<效果图> 
二，删除
1.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"});
}当写完方法后还是要测试的，这里就不一一测试了
2.子控制器代码
<代码演示>
//用户删除
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;
}3.删除弹出框
4.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{
}
});三，修改
1.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"});
}2.子控制器编写
//用户修改
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;
}3.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.效果图
四，查看
1.dao方法
<代码演示>
补充：
两个super的区别：
1.super.executeQuery(sql, clz, pageBean);当实体类的属性完全包含数据库查询出来的列段的时候使用
2.return super.executeQuery(sql, pageBean);返回list<Map<String,object>>,对应的是连表查询，单个实体类对象不完全包含
//查询用户信息及对应的角色，角色是通过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" +
"from \r\n" +
"t_oa_user where 1=1";
String name = user.getName();
if(StringUtils.isNotBlank(name)) {
sql+=" and name like '%"+name+"%' ";
}
return super.executeQuery(sql, pageBean);
}
测试效果
2.子控制器代码
<代码演示>
//用户查询
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;
}3.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'},
]]
});
}4.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/commom/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<script src="static/js/mian.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<!-- 登录用户信息 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="-1">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页内容</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script>
</script>
</body>
</html>《效果图》
当进行查询后
//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
}
});《效果图》
可进行模糊查询
数据库数据
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
