项目结构
功能说明
该项目的删除功能均为逻辑删除
【批量删除】选中一个或者多个，点击后即可删除
【删除】点击该行的删除按键，删除该行
【修改】点击该行的修改按钮，修改该行数据
【搜索框】在下拉框选择相对应的栏目，输入搜索内容完成搜索
代码讲解
实体类
Users.java
package cn.domain;
public class Users {
@Override
public String toString() {
return "Users [id=" + id + ", name=" + name + ", number=" + number + ", telephone=" + telephone + ", password="
+ password + ", status=" + status + ", deleted=" + deleted + "]";
}
public Users() {
super();
// TODO Auto-generated constructor stub
}
private Integer id;
private String name;
private String number;
private String telephone;
private String password;
private boolean status;
private boolean deleted;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getNumber() {
return number;
}
public void setNumber(String number) {
this.number = number;
}
public String getTelephone() {
return telephone;
}
public void setTelephone(String telephone) {
this.telephone = telephone;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public boolean isStatus() {
return status;
}
public void setStatus(boolean status) {
this.status = status;
}
public boolean isDeleted() {
return deleted;
}
public void setDeleted(boolean deleted) {
this.deleted = deleted;
}
public Users(Integer id, String name, String number, String telephone, String password, boolean status,
boolean deleted) {
super();
this.id = id;
this.name = name;
this.number = number;
this.telephone = telephone;
this.password = password;
this.status = status;
this.deleted = deleted;
}
}
接口
Usersdao.java
package cn.dao;
import java.util.List;
import java.util.Map;
import cn.domain.Users;
public interface Usersdao {
//查找全部数据
public List<Users> findall();
//保存用户数据
public void save(Users u);
//修改数据回显
public Users findById(Integer id);
//修改后的数据保存
public void edit_save(Users u);
//删除一个
public void delete_one(Integer id);
//批量删除
public void deletebanches(Integer[] id);
//根据id查找
public List<Users> sID(Integer id);
//根据学工号（number）查找
public List<Users> snumber(String number);
public List<Users> sname(String name);
public List<Users> stelephone(String telephone);
}
Userservice.java
同Usersdao.java
Userserviceimpl.java
package cn.service.impl;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import cn.dao.Usersdao;
import cn.domain.Users;
import cn.service.Userservice;
@Service("Userservice")
@Transactional
public class Userserviceimpl implements Userservice{
@Resource
private Usersdao udao;
@Override
public List<Users> findall() {
return udao.findall();
}
@Override
public void save(Users u) {
udao.save(u);
}
@Override
public Users findById(Integer id) {
return udao.findById(id);
}
@Override
public void edit_save(Users u) {
udao.edit_save(u);
}
@Override
public void delete_one(Integer id) {
udao.delete_one(id);
}
@Override
public void deletebanches(Integer[] id) {
udao.deletebanches(id);
}
@Override
public List<Users> sID(Integer id) {
return udao.sID(id);
}
@Override
public List<Users> snumber(String number){
return udao.snumber(number);
}
@Override
public List<Users> sname(String name){
return udao.sname(name);
}
@Override
public List<Users> stelephone(String telephone){
return udao.stelephone(telephone);
}
}
数据库配置文件
Usersdao.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.dao.Usersdao">
<!-- 根据ID查找用户 -->
<select id="sID" parameterType="Integer" resultType="cn.domain.Users">
select * from list1 where id=#{id} and deleted=0
order by id
</select>
<!-- 根据姓名name -->
<select id="sname" parameterType="String" resultType="cn.domain.Users">
select * from list1
where name like concat(concat('%',#{name}),'%')
and deleted=0
order by id
</select>
<!-- 根据学工号number -->
<select id="snumber" parameterType="String" resultType="cn.domain.Users">
select * from list1
where lower(number) like concat(concat('%',#{number}),'%')
and deleted=0
order by id
</select>
<!-- 根据手机telephone -->
<select id="stelephone" parameterType="String" resultType="cn.domain.Users">
select * from list1
where lower(telephone) like concat(concat('%',#{telephone}),'%')
and deleted=0
order by id
</select>
<!-- 显示用户列表 -->
<select id="findall" resultType="cn.domain.Users">
select * from list1 where deleted = 0
order by id
</select>
<!-- 单项删除 -->
<update id="delete_one" parameterType="Integer">
update list1
set deleted=1
where id = #{id}
</update>
<!-- 批量删除 -->
<update id="deletebanches" parameterType="Integer[]">
update list1
set deleted=1
<where> id
<foreach collection="array" item="id" open="in (" close=")" separator=",">
#{id}
</foreach>
</where>
</update>
<!-- 修改数据回显 -->
<select id="findById" parameterType="Integer" resultType="cn.domain.Users">
select id, name, number, telephone
from list1 where id = #{value}
</select>
<!-- 数据修改保存 -->
<update id="edit_save" parameterType="cn.domain.Users">
update list1
set name=#{name},number=#{number},telephone=#{telephone}
where id=#{id}
</update>
</mapper>
其它资源文件
jdbc.properties
jdbc.url=jdbc:sqlserver://127.0.0.1:1433;DatabaseName=ssm
jdbc.driverClass=com.microsoft.sqlserver.jdbc.SQLServerDriver
jdbc.user=sa
jdbc.password=542810
log4j.properties
### direct log messages to stdout ###
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.err
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### direct messages to file mylog.log ###
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=c\:mylog.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### set log levels - for more verbose logging change 'info' to 'debug' ###
log4j.rootLogger=info, stdout
applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!-- 读取jdbc.properties -->
<context:property-placeholder location="classpath:jdbc.properties"/>
<!-- 创建DataSource -->
<bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource">
<property name="url" value="${jdbc.url}"/>
<property name="driverClassName" value="${jdbc.driverClass}"/>
<property name="username" value="${jdbc.user}"/>
<property name="password" value="${jdbc.password}"/>
<property name="maxTotal" value="10"/>
<property name="maxIdle" value="5"/>
</bean>
<!-- 创建SqlSessionFactory对象 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 关联连接池 -->
<property name="dataSource" ref="dataSource"/>
<!-- 加载sql映射文件 -->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
<!-- 引入插件-->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
helpDialect=sqlserver
</value>
</property>
</bean>
</array>
</property>
</bean>
<!-- Mapper接口的扫描 -->
<!--
注意：如果使用Mapper接口包扫描，那么每个Mapper接口在Spring容器中的id名称为类名： 例如 CustomerMapper -> customerMapper
-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 配置Mapper接口所在包路径 -->
<property name="basePackage" value="cn.dao"/>
</bean>
<!-- 开启Spring的IOC注解扫描 -->
<context:component-scan base-package="cn"/>
</beans>
spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:contenxt="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd">
<!-- 扫描Controller所在的包 -->
<contenxt:component-scan base-package="cn.controller"/>
<!-- 注解驱动 -->
<mvc:annotation-driven></mvc:annotation-driven>
<!-- 视图解析器:简化在Controller类编写的视图路径 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix" value="/WEB-INF/jsp/"/>
<!-- 后缀 -->
<property name="suffix" value=".jsp"/>
</bean>
</beans>
controller类
userscontroller.java
package cn.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.apache.catalina.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import cn.dao.Usersdao;
import cn.domain.Users;
import cn.service.Userservice;
@Controller
@RequestMapping("/first")
public class userscontroller {
@Resource
private Userservice userservice;
//设计 Map 聚合存储需要给页面的对象数据
private Map<String,Object> result = new HashMap<String,Object>();
@RequestMapping("/listpage")
@ResponseBody
public Map<String, Object> listpage(Integer page,Integer rows){
//设置分页参数
PageHelper.startPage(page,rows);
//查询数据
List<Users> list = userservice.findall();
//PageInfo封装查询结果
PageInfo<Users> pageInfo = new PageInfo<Users>(list);
long total = pageInfo.getTotal();
List<Users> cList = pageInfo.getList();
result.put("total", total);
result.put("rows", cList);
return result;
}
@RequestMapping("/delete_one")
@ResponseBody
public Map<String,Object> delete_one(Integer index){
try {
System.out.println(index);
userservice.delete_one(index);
result.put("success", true);
}
catch (Exception e) {
e.printStackTrace();
result.put("success", false);
result.put("msg", e.getMessage());
}
return result;
}
@RequestMapping("/deletebanches")
@ResponseBody
public Map<String,Object> deletebanches(Integer[] id){
try {
userservice.deletebanches(id);
result.put("success", true);
}
catch (Exception e) {
e.printStackTrace();
result.put("success", false);
result.put("msg", e.getMessage());
}
return result;
}
@RequestMapping("/findById")
@ResponseBody
public Users findById(int id){
Users cust = userservice.findById(id);
return cust;
}
@RequestMapping("/edit_save")
@ResponseBody
public Map<String,Object> save(Users customer){
try {
userservice.edit_save(customer);
result.put("success", true);
}
catch (Exception e) {
e.printStackTrace();
result.put("success", false);
result.put("msg", e.getMessage());
}
return result;
}
@RequestMapping("/create")
@ResponseBody
public Users create(){
Users list = userservice.createid();
System.out.println(list.getId());
return list;
}
@RequestMapping("/findID")
@ResponseBody
public Map<String, Object> findID(Integer id,Integer page,Integer rows){
//设置分页参数
PageHelper.startPage(page,rows);
//查询数据
List<Users> list = userservice.sID(id);
//PageInfo封装查询结果
PageInfo<Users> pageInfo = new PageInfo<Users>(list);
long total = pageInfo.getTotal();
List<Users> cList = pageInfo.getList();
result.put("total", total);
result.put("rows", cList);
return result;
}
@RequestMapping("/findnumber")
@ResponseBody
public Map<String, Object> findnumber(String number,Integer page,Integer rows){
PageHelper.startPage(page,rows);
List<Users> list = userservice.snumber(number);
PageInfo<Users> pageInfo = new PageInfo<Users>(list);
long total = pageInfo.getTotal();
List<Users> cList = pageInfo.getList();
result.put("total", total);
result.put("rows", cList);
return result;
}
@RequestMapping("/findname")
@ResponseBody
public Map<String, Object> findname(String name,Integer page,Integer rows){
PageHelper.startPage(page,rows);
List<Users> list = userservice.sname(name);
PageInfo<Users> pageInfo = new PageInfo<Users>(list);
long total = pageInfo.getTotal();
List<Users> cList = pageInfo.getList();
result.put("total", total);
result.put("rows", cList);
return result;
}
@RequestMapping("/findtelephone")
@ResponseBody
public Map<String, Object> findtelephone(String telephone,Integer page,Integer rows){
PageHelper.startPage(page,rows);
List<Users> list = userservice.stelephone(telephone);
PageInfo<Users> pageInfo = new PageInfo<Users>(list);
long total = pageInfo.getTotal();
List<Users> cList = pageInfo.getList();
result.put("total", total);
result.put("rows", cList);
return result;
}
}
jsp页面代码
<%@ 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>
<title>新功能</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 导入easyui的资源文件 -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link id="themeLink" rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
</head>
<body>
<table id="list"></table>
<!-- 添加工具条 -->
<div id="tb">
<a id="deletebanchesBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">批量删除</a>
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:Find,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:120px">
<div data-options="name:'id',iconCls:'icon-ok'">ID</div>
<div data-options="name:'name'">用户姓名</div>
<div data-options="name:'number'">学工号</div>
<div data-options="name:'telephone'">用户手机</div>
</div>
</div>
<!-- 编辑保存窗口 -->
<div id="win" class="easyui-window" title="客户数据保存" style="width:500px;height:300px" data-options="iconCls:'icon-save',modal:true,closed:true">
<form id="editForm" method="post">
用户ID：<input type="text" name="id" class="easyui-validatebox" data-options="required:true"/><br/>
用户姓名：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/><br/>
学工号：<input type="text" name="number" class="easyui-validatebox" data-options="required:true"/><br/>
用户手机：<input type="text" name="telephone" class="easyui-validatebox" data-options="required:true"/><br/>
<a id="saveBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
</form>
</div>
<script type="text/javascript">
/* 显示列表 */
function MainDataTable(){
$(function(){
$("#list").datagrid({
url:"first/listpage.action",
columns:[[
{
field:"id",
title:"客户编号",
width:100,
checkbox:true
},
{
field:"name",
title:"用户姓名",
width:120,
align:"center"
},
{
field:"number",
title:"学工号",
width:120,
align:"center"
},
{
field:"telephone",
title:"手机号",
width:120,
align:"center"
},
{
field:"operate",
title:"操作",
width:150,
align:"center",
formatter:function(value, row, index){
var str = '<a href="#" name="editBtn" class="easyui-linkbutton" οnclick="edit(\''+ index +'\')"></a>'
var str2 = '<a href="#" name="deleteBtn" class="easyui-linkbutton" οnclick="del(\''+ index +'\')"></a>'
return str+str2;
}
}
]],
pagination:true, //分页条
toolbar:"#tb", //工具条
//单击行不选中
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
},
//加载操作列按钮图标
onLoadSuccess:function(data){
$("a[name='editBtn']").linkbutton({
text:"修改",
plain:true,
iconCls:"icon-edit",
});
$("a[name='deleteBtn']").linkbutton({
text:"删除",
plain:true,
iconCls:"icon-remove",
});
},
});
});
}
/* 根据搜索栏的项目和数据搜索相应的结果 */
function DataTable(name,URL,value){
if(name=="id"){
$(function(){
$("#list").datagrid({
url:"first/findID.action?id="+value,
columns:[[
{
field:"id",
title:"客户编号",
width:100,
checkbox:true
},
{
field:"name",
title:"用户姓名",
width:120,
align:"center"
},
{
field:"number",
title:"学工号",
width:120,
align:"center"
},
{
field:"telephone",
title:"手机号",
width:120,
align:"center"
},
{
field:"operate",
title:"操作",
width:150,
align:"center",
formatter:function(value, row, index){
var str = '<a href="#" name="editBtn" class="easyui-linkbutton" οnclick="edit(\''+ index +'\')"></a>'
var str2 = '<a href="#" name="deleteBtn" class="easyui-linkbutton" οnclick="del(\''+ index +'\')"></a>'
return str+str2;
}
}
]],
pagination:true, //分页条
toolbar:"#tb", //工具条
//单击行不选中
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
},
//加载操作列按钮图标
onLoadSuccess:function(data){
$("a[name='editBtn']").linkbutton({
text:"修改",
plain:true,
iconCls:"icon-edit",
});
$("a[name='deleteBtn']").linkbutton({
text:"删除",
plain:true,
iconCls:"icon-remove",
});
},
});
});
}
else
$(function(){
$("#list").datagrid({
url:URL,
queryParams:{name:value},
columns:[[
{
field:"id",
title:"客户编号",
width:100,
checkbox:true
},
{
field:"name",
title:"用户姓名",
width:120,
align:"center"
},
{
field:"number",
title:"学工号",
width:120,
align:"center"
},
{
field:"telephone",
title:"手机号",
width:120,
align:"center"
},
{
field:"operate",
title:"操作",
width:150,
align:"center",
formatter:function(value, row, index){
var str = '<a href="#" name="editBtn" class="easyui-linkbutton" οnclick="edit(\''+ index +'\')"></a>'
var str2 = '<a href="#" name="deleteBtn" class="easyui-linkbutton" οnclick="del(\''+ index +'\')"></a>'
return str+str2;
}
}
]],
pagination:true, //分页条
toolbar:"#tb", //工具条
//单击行不选中
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
},
//加载操作列按钮图标
onLoadSuccess:function(data){
$("a[name='editBtn']").linkbutton({
text:"修改",
plain:true,
iconCls:"icon-edit",
});
$("a[name='deleteBtn']").linkbutton({
text:"删除",
plain:true,
iconCls:"icon-remove",
});
},
});
});
}
/* 根据姓名匹配url */
function findurl(name){
var str;
if(name=="name")
str="first/findname.action";
else if(name=="number")
str="first/findnumber.action";
else
str="first/findtelephone.action";
return str;
}
/* 搜索函数 */
function Find(value,name){
DataTable(name,findurl(name),value);
}
//修改后保存
$("#saveBtn").click(function(){
$("#editForm").form("submit",{
url:"first/edit_save.action",
onSubmit:function(){
return $("#editForm").form("validate");
},
success:function(data){
data = eval("("+data+")");
if(data.success){
$("#win").window("close");
$("#list").datagrid("reload");
$.messager.alert("提示","保存成功","info");
}
else{
$.messager.alert("提示","保存失败："+data.msg,"error");
}
}
});
});
//批量删除
$("#deletebanchesBtn").click(function(){
var rows =$("#list").datagrid("getSelections");
if(rows.length==0){
$.messager.alert("提示","删除操作至少选择一行","warning");
return;
}
$.messager.confirm("提示","确认删除数据吗?",function(value){
if(value){
var idStr = "";
$(rows).each(function(i){
idStr+=("id="+rows[i].id+"&");
});
idStr = idStr.substring(0,idStr.length-1);
$.post("first/deletebanches.action",idStr,function(data){
if(data.success){
//刷新 datagrid
$("#list").datagrid("reload");
$.messager.alert("提示","删除成功","info");
}
else{
$.messager.alert("提示","删除失败： "+data.msg,"error");
}
},"json");
}
});
});
//修改回显
function edit(index){
var rows = $("#list").datagrid("getRows");
$("#editForm").form("load","first/findById.action?id="+rows[index].id);
$("#win").window("open");
}
//删除操作
function del(index){
var rows = $("#list").datagrid("getRows");
$.messager.confirm("提示","确认删除数据吗?",function(value){
if(value){
$.post("first/delete_one.action",{"index":rows[index].id},function(data){
if(data.success){
//刷新 datagrid
$("#list").datagrid("reload");
$.messager.alert("提示","删除成功","info");
}
else{
$.messager.alert("提示","删除失败： "+data.msg,"error");
}
},"json");
}
});
}
MainDataTable();
</script>
写在最后
记录自己在写web项目的一点体会，希望能够与大家多多交流。
扫一扫
3042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
