本文分享了使用Spring、SpringMVC及Mybatis搭建的数据录入系统实战经验，涵盖环境配置、增删改查功能实现等内容。
因公司需要做一些数据录入并且能够进行增删改查，所以花了几天完成了这些功能，框架东西掌握的不是很熟，所以过程中遇到了很多报错都一一解决了。而且写的可能有点粗糙，代码并不是特别的完善。但是基本的功能算是实现了。
环境：Spring(4.1)+SpringMVC(4.1)+Mybatis(3.2.7)
工程目录：
lib下 的所需要的SSM jar包
整合步骤：
1.首先在web.xml 中配置Spring容器和SpringMVC，字符集的相关配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>ym3</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- 配置Spring容器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 设置Spring容器加载所有的配置文件的路径 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 配置SpringMVC核心控制器 -->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<!-- 此处可以可以配置成*.do，对应struts的后缀习惯 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 解决工程编码过滤器 -->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>2.然后创建applicationContext.xml 配置文件>>>>
在Spring容器中配置主要的要点有：
1.配置数据库的连接，即数据源dataSource 这里是用的proxool-0.9.1.jar连接池
2.配置session会话工厂，获取session
3.配置MapperScannerConfigurer Mybatis 自动扫描加载sql的映射文件*mapper.xml,并且需要属性SqlSessionFactory
4.配置声明式事物，Spring事务管理,需要参照数据源
2.1 配置jdbc.properties 属性文件
driver=com.mysql.jdbc.Driver
driverUrl=jdbc:mysql://localhost:3306/ym?useUnicode=true&characterEncoding=UTF-8
user=root
password=1234
maximumConnectionCount=100
minimumConnectionCount=100<?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:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:task="http://www.springframework.org/schema/task"
xsi:schemaLocation="
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.1.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsd
http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-4.1.xsd">
<!-- 开启扫描包
<context:component-scan base-package="com.lw"></context:component-scan> -->
<!-- 分解配置jdbc.properites -->
<!-- 数据库连接 begin -->
<bean id="dataSource" name="dataSource" class="org.logicalcobwebs.proxool.ProxoolDataSource">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="driverUrl" value="jdbc:mysql://localhost:3306/ym?useUnicode=true&characterEncoding=UTF8"/>
<property name="user" value="root"/>
<property name="password" value="1234"/>
<property name="maximumConnectionCount" value="100"/>
<property name="minimumConnectionCount" value="10"/>
<property name="houseKeepingTestSql" value="select now()"/>
</bean>
<!-- 数据库连接 end -->
<!-- Session工厂 beign -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:SqlMapConfig.xml"/>
</bean>
<!-- Session 工厂 end -->
<!--
3. mybatis自动扫描加载Sql映射文件/接口 : MapperScannerConfigurer sqlSessionFactory
basePackage:指定sql映射文件/接口所在的包（自动扫描）
-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.lw.bpminfo.persistence"></property>
<property name="sqlSessionFactory" ref="sqlSessionFactory"></property>
</bean>
<!-- 事务 begin -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<!--事务 end -->
<!-- 事物管理注解 -->
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
3.配置mybatis相关环境和别名(SqlMapConfig.xml,application-mybatis.xml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!-- Mybatis 全局配置 begin -->
<settings>
<setting name="lazyLoadingEnabled" value="true"/> <!-- 延时加载 -->
<setting name="aggressiveLazyLoading" value="false"/>
</settings>
<!-- Mybatis 全局配置 end -->
<typeAliases>
<typeAlias type="com.lw.bpminfo.entity.BpmInfo" alias="BpmInfo"/>
</typeAliases>
<!--
<mappers>
<mapper resource="com/lw/bpminfo/persistence/BpmInfoMapper.xml"/>
</mappers> -->
</configuration>4.配置SpringMVC配置文件
1.配置注解
2.配置静态资源
3.配置视图
<?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:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.1.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 注解扫描包-->
<context:component-scan base-package="com.lw" />
<!-- 开启mvc注解 -->
<mvc:annotation-driven></mvc:annotation-driven>
<!-- 配置静态资源，直接映射到对应的文件夹，不被DispatcherServlet处理，3.04新增功能，需要重新设置spring-mvc-3.0.xsd-->
<mvc:resources mapping="/images/**" location="/images/" />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/helpdoc/**" location="/helpdoc/" />
<!-- 定义跳转的文件的前后缀 ，视图模式配置-->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>5. entity包下的实体类
package com.lw.bpminfo.entity;
import java.io.Serializable;
public class BpmInfo implements Serializable{
/**
*
*/
private static final long serialVersionUID = 1L;
private Integer id;
private String date;
private String sort;
private String remark;
private Integer order_no;
private String address;
private String address_name;
private String qa_type;
private Integer status;
private String dealing_people;
private String add_datetime;
private String deal_result;
private String deal_date;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public Integer getOrder_no() {
return order_no;
}
public void setOrder_no(Integer order_no) {
this.order_no = order_no;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getAddress_name() {
return address_name;
}
public void setAddress_name(String address_name) {
this.address_name = address_name;
}
public String getQa_type() {
return qa_type;
}
public void setQa_type(String qa_type) {
this.qa_type = qa_type;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getDealing_people() {
return dealing_people;
}
public void setDealing_people(String dealing_people) {
this.dealing_people = dealing_people;
}
public String getAdd_datetime() {
return add_datetime;
}
public void setAdd_datetime(String add_datetime) {
this.add_datetime = add_datetime;
}
public String getDeal_result() {
return deal_result;
}
public void setDeal_result(String deal_result) {
this.deal_result = deal_result;
}
public String getDeal_date() {
return deal_date;
}
public void setDeal_date(String deal_date) {
this.deal_date = deal_date;
}
public BpmInfo(Integer id, String date, String sort, String remark, Integer order_no, String address,
String address_name, String qa_type, Integer status, String dealing_people, String add_datetime,
String deal_result, String deal_date) {
super();
this.id = id;
this.date = date;
this.sort = sort;
this.remark = remark;
this.order_no = order_no;
this.address = address;
this.address_name = address_name;
this.qa_type = qa_type;
this.status = status;
this.dealing_people = dealing_people;
this.add_datetime = add_datetime;
this.deal_result = deal_result;
this.deal_date = deal_date;
}
public BpmInfo() {
super();
}
}6.配置dao持久层接口(增删改查)
package com.lw.bpminfo.persistence;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import com.lw.bpminfo.entity.BpmInfo;
public interface BpmInfoMapper {
/**
* 查询所有信息
* @return
*/
public List<BpmInfo> selectAll();
/**
* 根据id查询信息
* @param id
* @return
*/
public BpmInfo getBpmInfoById(@Param("id") int id);
/**
* 添加信息
* @param bpminfo
* @return
*/
public int addBpmInfo(BpmInfo bpminfo);
/**
* 删除信息
* @param id
* @return
*/
public boolean deleteBpmInfo(int id);
/**
* 修改信息
* @param bpminfo
* @return
*/
public boolean updateBpmInfo(BpmInfo bpminfo);
}配置相对应的映射文件mapper.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="com.lw.bpminfo.persistence.BpmInfoMapper">
<resultMap type="BpmInfo" id="BpmInfoMap">
<result property="id" column="id"/>
<result property="date" column="date"/>
<result property="sort" column="sort"/>
<result property="order_no" column="order_no"/>
<result property="address" column="address"/>
<result property="address_name" column="address_name"/>
<result property="qa_type" column="qa_type"/>
<result property="status" column="status"/>
<result property="dealing_people" column="dealing_people"/>
<result property="add_datetime" column="add_datetime"/>
<result property="deal_result" column="deal_result"/>
<result property="deal_date" column="deal_date"/>
</resultMap>
<sql id="BpmInfoColumn">
id,date,sort,remark,order_no,address,address_name,qa_type,status,
dealing_people,add_datetime,add_datetime,deal_result,deal_date
</sql>
<!-- selectAll -->
<select id="selectAll" resultMap="BpmInfoMap">
select *from bpm_info
</select>
<!-- getBpmInfo -->
<select id="getBpmInfoById" parameterType="int" resultMap="BpmInfoMap">
select <include refid="BpmInfoColumn"/> from bpm_info where id=#{id}
</select>
<!-- addBpmInfo
address_name,qa_type,status,dealing_people,add_datetime,deal_result,deal_date,address
,#{address_name},#{qa_type},#{status},#{dealing_people},#{add_datetime},#{deal_result},#{deal_date},#{address}
-->
<insert id="addBpmInfo" parameterType="BpmInfo">
insert into bpm_info(date,sort,remark,order_no,address,address_name,qa_type,status,dealing_people,deal_result,deal_date)
values(#{date},#{sort},#{remark},#{order_no},#{address},#{address_name},#{qa_type},
#{status},#{dealing_people},#{deal_result},#{deal_date})
</insert>
<!-- updateBpmInfo -->
<update id="updateBpmInfo" parameterType="BpmInfo">
update bpm_info
<set>
date=#{date},
sort=#{sort},
remark=#{remark},
order_no=#{order_no},
address=#{address},
address_name=#{address_name},
qa_type=#{qa_type},
status=#{status},
dealing_people=#{dealing_people},
add_datetime=#{add_datetime},
deal_result=#{deal_result},
deal_date=#{deal_date}
</set>
where id =#{id}
</update>
<!-- deleteBpmInfo -->
<delete id="deleteBpmInfo" parameterType="int">
delete from bpm_info where id =#{id}
</delete>
</mapper>7.配置Service业务逻辑层接口
package com.lw.bpminfo.service;
import java.util.List;
import com.lw.bpminfo.entity.BpmInfo;
/**
* service 接口
* @author 聪
*2016年12月15日下午3:02:54
*
*/
public interface IBpmInfoService {
/**
* 查询所有信息
* @return
*/
public List<BpmInfo> selectAll();
/**
* 根据id查询信息
* @param id
* @return
*/
public BpmInfo getBpmInfoById(int id);
/**
* 添加信息
* @param bpminfo
* @return
*/
public int addBpmInfo(BpmInfo bpminfo);
/**
* 删除信息
* @param id
* @return
*/
public boolean deleteBpmInfo(int id);
/**
* 修改信息
* @param bpminfo
* @return
*/
public boolean updateBpmInfo(BpmInfo bpminfo);
}8.实现类impl
package com.lw.bpminfo.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.lw.bpminfo.entity.BpmInfo;
import com.lw.bpminfo.persistence.BpmInfoMapper;
import com.lw.bpminfo.service.IBpmInfoService;
/**
* extends BaseServiceImpl<BpmInfo>
* @author 聪 业务逻辑层
*2016年12月12日上午10:45:04
*
*/
@Service("BpmInfoServiceImpl")
@Transactional
public class BpmInfoServiceImpl implements IBpmInfoService{
@Autowired
private BpmInfoMapper bpmInfoService;
@Override
public BpmInfo getBpmInfoById(int id){
return bpmInfoService.getBpmInfoById(id);
}
@Override
public int addBpmInfo(BpmInfo bpminfo){
return bpmInfoService.addBpmInfo(bpminfo);
}
@Override
public boolean deleteBpmInfo(int id){
return bpmInfoService.deleteBpmInfo(id);
}
@Override
public boolean updateBpmInfo(BpmInfo bpminfo){
return bpmInfoService.updateBpmInfo(bpminfo);
}
@Override
public List<BpmInfo> selectAll() {
return bpmInfoService.selectAll();
}
}9.Controller (控制层)
package com.lw.bpminfo.action;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;
import javax.websocket.server.PathParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import com.lw.bpminfo.entity.BpmInfo;
import com.lw.bpminfo.service.IBpmInfoService;
/**
* 控制层 Controller
* @author 聪
*2016年12月15日下午3:03:54
*
*/
@Controller("BpmInfoAction")
@RequestMapping(value="/bpm")
public class BpmInfoAction {
@Autowired
private IBpmInfoService bpmInfoService;
@RequestMapping(value="/list")
public String selectAll(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("UTF-8");
List<BpmInfo> bpmInfos=bpmInfoService.selectAll();
request.setAttribute("lBpmInfo", bpmInfos);
return "list";
}
@RequestMapping(value="/addList",method=RequestMethod.GET)
public String allList(@ModelAttribute("bpminfo")BpmInfo bpmInfo,HttpServletResponse request) throws UnsupportedEncodingException{
request.setCharacterEncoding("UTF-8");
return "add";
}
@RequestMapping(value="/add",method=RequestMethod.POST)
public String addBpmInfo(@Valid BpmInfo bpmInfo,BindingResult br,HttpServletResponse response) throws UnsupportedEncodingException{
response.setCharacterEncoding("UTF-8");
if(br.hasErrors()){
return "add";
}
if(bpmInfoService.addBpmInfo(bpmInfo)>0){
return "redirect:/bpm/list";
}
return "error";
}
@RequestMapping(value="/delete",method=RequestMethod.GET)
public String deleteBpmInfo(@RequestParam("id") int id){
String result="";
if(bpmInfoService.deleteBpmInfo(id)){
result="redirect:/bpm/list";
}
return result;
}
@RequestMapping(value="/updateList")
public String updateList(@RequestParam(value="id") int id,Model model){
BpmInfo bpmInfo=bpmInfoService.getBpmInfoById(id);
model.addAttribute("bpmInfo", bpmInfo);
return "update";
}
@RequestMapping(value="/update",method=RequestMethod.POST)
public String updateBpmInfo(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
Integer id=Integer.parseInt(request.getParameter("id"));
String sort=request.getParameter("sort");
String remark=request.getParameter("remark");
Integer order_no=Integer.parseInt(request.getParameter("order_no"));
String address=request.getParameter("address");
String address_name=request.getParameter("address_name");
String qa_type=request.getParameter("qa_type");
Integer status=Integer.parseInt(request.getParameter("status"));
String dealing_people=request.getParameter("dealing_people");
String deal_result=request.getParameter("deal_result");
String deal_date=request.getParameter("deal_date");
BpmInfo bpmInfo=new BpmInfo();
bpmInfo.setId(id);
bpmInfo.setSort(sort);
bpmInfo.setRemark(remark);
bpmInfo.setOrder_no(order_no);
bpmInfo.setAddress(address);
bpmInfo.setAddress_name(address_name);
bpmInfo.setQa_type(qa_type);
bpmInfo.setStatus(status);
bpmInfo.setDealing_people(dealing_people);
bpmInfo.setDeal_result(deal_result);
bpmInfo.setDeal_date(deal_date);
if(bpmInfoService.updateBpmInfo(bpmInfo)){
return "redirect:/bpm/list";
}else {
return"redirect:/bpm/updateList";
}
/*String result=" ";
System.out.println(bpmInfo.getId());
System.out.println(bpmInfoService.updateBpmInfo(bpmInfo));
if(bpmInfoService.updateBpmInfo(bpmInfo)){
ResponseUtil.writeJson(response, "修改成功");
result= "/bpm/list";
}else{
ResponseUtil.writeJson(response, "修改失败");
result= "update";
}
return result;*/
}
}10.页面实现(最后再调整jsp页面，个人习惯)
list.jsp
信息列表展示页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
<link href="${pageContext.request.contextPath}/css/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/tablecloth.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<style>
*{margin:0;padding:0}
body{
font:70% Arial, Helvetica, sans-serif;
color:#555;
text-align:left;
font-size:15px;
}
a{
text-decoration:none;
color:#057fac;
}
a:hover{
text-decoration:none;
color:#999;
}
h2{
font-size:20px;
text-align: center;
}
#container{
margin:0 auto;
width:100%;
background:#fff;
padding-bottom:20px;
}
#content{margin:0 20px;}
p.sig{
margin:0 auto;
width:680px;
padding:1em 0;
}
input{color:#057fac;}
</style>
<script type="text/javascript">
function deleteBpmInfo(id){
if(confirm("确定要删除此商品吗？")){
window.location.href = "${pageContext.request.contextPath}/bpm/delete?id=" + id;
/* $.ajax({
type:'DELETE',
url:'/ym3/bpm/'+id,
dataType : 'json',
success : function(ok){
window.location='/ym3/bpm/list';
}
}); */
}
}
function addList(){
window.location.href="/ym3/bpm/addList";
}
function update(id){
window.location.href="${pageContext.request.contextPath}/bpm/updateList?id=" + id;
}
</script>
</head>
<body>
<div id="container">
<div id="content">
<h2>投诉信息反馈记录</h2>
<input type="button" value="添加信息" onclick="addList();">
<form action="">
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>编号</th>
<th>日期</th>
<th>分类</th>
<th>描述</th>
<th>订单号</th>
<th>地址</th>
<th>位置</th>
<th>问题归属</th>
<th>状态</th>
<th>处理人</th>
<th>处理结果</th>
<th>处理时间</th>
<th>操作</th>
</tr>
<tr>
<c:forEach items="${lBpmInfo}" var="l">
<td><input type="checkbox" id="subcheck"
name="subcheck" value="${l.id }"></td>
<td>${l.id }</td>
<td>${l.date}</td>
<td>${l.sort}</td>
<td>${l.remark}</td>
<td>${l.order_no }</td>
<td>${l.address}</td>
<td>${l.address_name}</td>
<td>${l.qa_type}</td>
<td>${l.status }</td>
<td>${l.dealing_people}</td>
<td>${l.deal_result}</td>
<td>${l.deal_date}</td>
<td>
<input type="button" value="删除" onclick="deleteBpmInfo(${l.id})">
<input type="button" value="修改" onclick="update(${l.id });">
</td>
</tr>
</c:forEach>
</table>
</form>
</div>
</div>
<p class="sig">Tablecloth is brought to you by <a href="http://www.cssglobe.com">Css Globe</a></p>
</body>
</html>add.jsp 添加页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<!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>
<sf:form modelAttribute="bpminfo" method="post" action="/ym3/bpm/add">
时间：<input type="text" id="date" name="date"></br>
问题分类：<input type="text" id="sort" name="sort"></br>
描述：<input type="text" id="remark" name="remark"></br>
单号：<input type="text" id="order_no" name="order_no"></br>
地址：<input type="text" id="address" name="address"></br>
位置：<input type="text" id="address_name" name="address_name"></br>
问题归属：<input type="text" id="qa_type" name="qa_type"></br>
状态：<input type="text" id="status" name="status"></br>
处理人：<input type="text" id="dealing_people" name="dealing_people"></br>
处理结果：<input type="text" id="add_datetime" name="add_datetime"></br>
处理时间：<input type="text" id="deal_result" name="deal_result"></br>
<input type="submit" value="提交">
<input type="button" value="返回" onclick="javascript:history.back(-1);">
</sf:form>
</body>
</body>
</html>update.jsp 修改页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>
<form action="/ym3/bpm/update" method="post">
<%-- 时间:<input type="text" id="date" name="date" value="${bpmInfo.date }"> --%>
编号：<input type="text" id="id" name="id" value="${bpmInfo.id }" readonly="readonly"></br>
分类:<input type="text" id="sort" name="sort" value="${bpmInfo.sort }"></br>
描述:<textarea rows="5" cols="30" id="remark" name="remark">${bpmInfo.remark }</textarea></br>
订单号:<input type="text" id="order_no" name="order_no" value="${bpmInfo.order_no }"></br>
地址:<input type="text" id="address" name="address" value="${bpmInfo.address }"></br>
位置:<input type="text" id="address_name" name="address_name" value="${bpmInfo.address_name }"></br>
问题归属:<input type="text" id="qa_type" name="qa_type" value="${bpmInfo.qa_type }"></br>
状态:<select id="status" name="status"></br>
<c:if test="${bpmInfo.status==0 }">
<option value="0" selected="selected">已处理</option>
<option value="1">待处理</option>
<option value="2">待相应</option>
</c:if>
<c:if test="${bpmInfo.status==1 }">
<option value="0">已处理</option>
<option value="1" selected="selected">待处理</option>
<option value="2">待相应</option>
</c:if>
<c:if test="${bpmInfo.status==2 }">
<option value="0">已处理</option>
<option value="1">待处理</option>
<option value="2" selected="selected">待相应</option>
</c:if>
<c:if test="${bpmInfo.status==null}">
<option value="0">已处理</option>
<option value="1">待处理</option>
<option value="2">待相应</option>
</c:if>
</select></br>
处理人:<input type="text" id="dealing_people" name="dealing_people" value="${bpmInfo.dealing_people }"></br>
<%-- 添加时间:<input type="text" id="add_datetime" name="add_datetime" value="${bpmInfo.add_datetime }"> --%>
处理结果:<input type="text" id="deal_result" name="deal_result" value="${bpmInfo.deal_result }"></br>
处理时间:<input type="text" id="deal_date" name="deal_date" value="${bpmInfo.deal_date }">
<input type="submit" value="保存">
<input type="button" value="返回" onclick="javascript:history.back(-1);">
</form>
</div>
</body>
</html>还有列表 js动态脚本
/*
Tablecloth
written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/lab/tablecloth/
*/
this.tablecloth = function(){
// CONFIG
// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
var highlightCols = true;
// if set to true then mouseover a table cell will highlight entire row (except sibling headings)
var highlightRows = false;
// if set to true then click on a table sell will select row or column based on config
var selectable = true;
// this function is called when
// add your own code if you want to add action
// function receives object that has been clicked
this.clickAction = function(obj){
//alert(obj.innerHTML);
};
// END CONFIG (do not edit below this line)
var tableover = false;
this.start = function(){
var tables = document.getElementsByTagName("table");
for (var i=0;i<tables.length;i++){
tables[i].onmouseover = function(){tableover = true};
tables[i].onmouseout = function(){tableover = false};
rows(tables[i]);
};
};
this.rows = function(table){
var css = "";
var tr = table.getElementsByTagName("tr");
for (var i=0;i<tr.length;i++){
css = (css == "odd") ? "even" : "odd";
tr[i].className = css;
var arr = new Array();
for(var j=0;j<tr[i].childNodes.length;j++){
if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
};
for (var j=0;j<arr.length;j++){
arr[j].row = i;
arr[j].col = j;
if(arr[j].innerHTML == " " || arr[j].innerHTML == "") arr[j].className += " empty";
arr[j].css = arr[j].className;
arr[j].onmouseover = function(){
over(table,this,this.row,this.col);
};
arr[j].onmouseout = function(){
out(table,this,this.row,this.col);
};
arr[j].onmousedown = function(){
down(table,this,this.row,this.col);
};
arr[j].onmouseup = function(){
up(table,this,this.row,this.col);
};
arr[j].onclick = function(){
click(table,this,this.row,this.col);
};
};
};
};
// appyling mouseover state for objects (th or td)
this.over = function(table,obj,row,col){
if (!highlightCols && !highlightRows) obj.className = obj.css + " over";
if(check1(obj,col)){
if(highlightCols) highlightCol(table,obj,col);
if(highlightRows) highlightRow(table,obj,row);
};
};
// appyling mouseout state for objects (th or td)
this.out = function(table,obj,row,col){
if (!highlightCols && !highlightRows) obj.className = obj.css;
unhighlightCol(table,col);
unhighlightRow(table,row);
};
// appyling mousedown state for objects (th or td)
this.down = function(table,obj,row,col){
obj.className = obj.css + " down";
};
// appyling mouseup state for objects (th or td)
this.up = function(table,obj,row,col){
obj.className = obj.css + " over";
};
// onclick event for objects (th or td)
this.click = function(table,obj,row,col){
if(check1){
if(selectable) {
unselect(table);
if(highlightCols) highlightCol(table,obj,col,true);
if(highlightRows) highlightRow(table,obj,row,true);
document.onclick = unselectAll;
}
};
clickAction(obj);
};
this.highlightCol = function(table,active,col,sel){
var css = (typeof(sel) != "undefined") ? "selected" : "over";
var tr = table.getElementsByTagName("tr");
for (var i=0;i<tr.length;i++){
var arr = new Array();
for(j=0;j<tr[i].childNodes.length;j++){
if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
};
var obj = arr[col];
if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;
};
};
this.unhighlightCol = function(table,col){
var tr = table.getElementsByTagName("tr");
for (var i=0;i<tr.length;i++){
var arr = new Array();
for(j=0;j<tr[i].childNodes.length;j++){
if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j])
};
var obj = arr[col];
if(check3(obj)) obj.className = obj.css;
};
};
this.highlightRow = function(table,active,row,sel){
var css = (typeof(sel) != "undefined") ? "selected" : "over";
var tr = table.getElementsByTagName("tr")[row];
for (var i=0;i<tr.childNodes.length;i++){
var obj = tr.childNodes[i];
if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;
};
};
this.unhighlightRow = function(table,row){
var tr = table.getElementsByTagName("tr")[row];
for (var i=0;i<tr.childNodes.length;i++){
var obj = tr.childNodes[i];
if(check3(obj)) obj.className = obj.css;
};
};
this.unselect = function(table){
tr = table.getElementsByTagName("tr")
for (var i=0;i<tr.length;i++){
for (var j=0;j<tr[i].childNodes.length;j++){
var obj = tr[i].childNodes[j];
if(obj.className) obj.className = obj.className.replace("selected","");
};
};
};
this.unselectAll = function(){
if(!tableover){
tables = document.getElementsByTagName("table");
for (var i=0;i<tables.length;i++){
unselect(tables[i])
};
};
};
this.check1 = function(obj,col){
return (!(col == 0 && obj.className.indexOf("empty") != -1));
}
this.check2 = function(active,obj){
return (!(active.tagName == "TH" && obj.tagName == "TH"));
};
this.check3 = function(obj){
return (obj.className) ? (obj.className.indexOf("selected") == -1) : true;
};
start();
};
/* script initiates on page load. */
window.onload = tablecloth;css样式
/*
TableCloth
by Alen Grakalic, brought to you by cssglobe.com
*/
/* general styles */
table, td{
font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;}
th, td{padding:1rem auto;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td{background:#e5f1f4;}
/* tablecloth styles */
tr{height:40px;}
tr.even td{background:#e5f1f4;}
tr.odd td{background:#e5f1f4;}
th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}
td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}
/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}最后上一张效果展示图
扫一扫
1533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
