Unix系统-myBatis+Spring+SpringMVC的CRUD-分页

来源:互联网 发布:淘宝店铺0信誉出售 编辑:程序博客网 时间:2024/06/07 17:23
1.jar包
2.web.xml

<?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_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>NetCtoss01</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <!-- 设置前端控制器 -->
  <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:applicationContext.xml</param-value>
     </init-param>
  </servlet>
  <servlet-mapping>
     <servlet-name>SpringMVC</servlet-name>
     <url-pattern>*.do</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>
</filter>
<filter-mapping>
     <filter-name>encodingFilter</filter-name>
     <url-pattern>/*</url-pattern>
</filter-mapping>

</web-app>
3.POJO类

package com.lanou3g.entity;

import java.sql.Timestamp;

public class Cost {

     private Integer id;
     private String name;
     private Integer base_duration;
     private Double base_cost;
     private Double unit_cost;
     private String status;
     private String descr;
     private Timestamp creatime;
     private Timestamp startime;
     private String cost_type;


     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 Integer getBase_duration() {
          return base_duration;
     }

     public void setBase_duration(Integer base_duration) {
          this.base_duration = base_duration;
     }

     public Double getBase_cost() {
          return base_cost;
     }

     public void setBase_cost(Double base_cost) {
          this.base_cost = base_cost;
     }

     public Double getUnit_cost() {
          return unit_cost;
     }

     public void setUnit_cost(Double unit_cost) {
          this.unit_cost = unit_cost;
     }

     public String getStatus() {
          return status;
     }

     public void setStatus(String status) {
          this.status = status;
     }

     public String getDescr() {
          return descr;
     }

     public void setDescr(String descr) {
          this.descr = descr;
     }

     public Timestamp getCreatime() {
          return creatime;
     }

     public void setCreatime(Timestamp creatime) {
          this.creatime = creatime;
     }

     public Timestamp getStartime() {
          return startime;
     }

     public void setStartime(Timestamp startime) {
          this.startime = startime;
     }

     public String getCost_type() {
          return cost_type;
     }

     public void setCost_type(String cost_type) {
          this.cost_type = cost_type;
     }

}

实体类映射

<?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.lanou3g.dao.CostDao" >
     <select id="findAll" resultType="com.lanou3g.entity.Cost">
          select * from cost
     </select>
     <insert id="add" parameterType="com.lanou3g.entity.Cost">
          insert into cost (id,name,base_duration,base_cost,unit_cost,
              status,descr,cost_type)
              values
              (COST_SEQ.nextval,
              #{name,jdbcType=VARCHAR},
              #{base_duration,jdbcType=NUMERIC},
              #{base_cost,jdbcType=NUMERIC},
              #{unit_cost,jdbcType=NUMERIC},
              #{status,jdbcType=VARCHAR},
              #{descr,jdbcType=VARCHAR},
              #{cost_type,jdbcType=VARCHAR}
              )
     </insert>

     <select id="findById" resultType="com.lanou3g.entity.Cost" parameterType="Integer">
          select * from cost where id=#{id}
     </select>

     <update id="update" parameterType="com.lanou3g.entity.Cost">
          update cost set
              name=#{name,jdbcType=VARCHAR},
               base_duration=#{base_duration,jdbcType=NUMERIC},
              base_cost=#{base_cost,jdbcType=NUMERIC},
              unit_cost=#{unit_cost,jdbcType=NUMERIC},
              descr=#{descr,jdbcType=VARCHAR},
              cost_type=#{cost_type,jdbcType=VARCHAR}
          where
              id=#{id,jdbcType=NUMERIC}
     </update>

     <delete id="delete" parameterType="Integer">
          delete from cost where id=#{id}
     </delete>

     <select id="page" resultType="com.lanou3g.entity.Cost" parameterType="com.lanou3g.entity.Page">
          select a.* from (select cost.*,rownum rn from cost) a where rn between #{begin} and #{end}
     </select>

     <select id="rows" resultType="Integer">
          select count(1) from cost
     </select>

     <update id="updateStatus" parameterType="com.lanou3g.entity.Cost">
          update cost set status=#{status} where id=#{id}
     </update>

</mapper>


分页Page

package com.lanou3g.entity;

public class Page {
     //每页数据量
     private int pageSize=4;

     //当前页码数
     private int  currentPage;

     private int begin;
     private int end;
     //数据总行数
     private int rows;
     //总页数
     private int totalPage;



     public Page() {
          super();
          // TODO Auto-generated constructor stub
     }

     public Page(int currentPage,int rows) {
          begin = (currentPage - 1) * pageSize +1;
          end =  currentPage * pageSize;
          totalPage = (rows - 1) / pageSize + 1;
          this.currentPage = currentPage;
          this.rows = rows;
     }

     public int getPageSize() {
          return pageSize;
     }

     public void setPageSize(int pageSize) {
          this.pageSize = pageSize;
     }

     public int getCurrentPage() {
          return currentPage;
     }

     public void setCurrentPage(int currentPage) {
          this.currentPage = currentPage;
     }

     public int getBegin() {
          return begin;
     }

     public void setBegin(int begin) {
          this.begin = begin;
     }

     public int getEnd() {
          return end;
     }

     public void setEnd(int end) {
          this.end = end;
     }

     public int getRows() {
          return rows;
     }

     public void setRows(int rows) {
          this.rows = rows;
     }

     public int getTotalPage() {
          return totalPage;
     }

     public void setTotalPage(int totalPage) {
          this.totalPage = totalPage;
     }



}

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:jdbc="http://www.springframework.org/schema/jdbc"
     xmlns:jee="http://www.springframework.org/schema/jee"

     xmlns:tx="http://www.springframework.org/schema/tx"
     xmlns:aop="http://www.springframework.org/schema/aop"

     xmlns:mvc="http://www.springframework.org/schema/mvc"
     xmlns:util="http://www.springframework.org/schema/util"
     xmlns:jpa="http://www.springframework.org/schema/data/jpa"
     xsi:schemaLocation="
          http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
          http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
          http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
          http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
          http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
          http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
          http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
          http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
          http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
          <!-- 一.整合myBatis:1.2.3 -->
     <!-- 1.导入连接数据库的文件 -->
     <util:properties id="jdbc" location="classpath:jdbc.properties"/>
     <!-- 2.数据库连接池 -->
     <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
          <!-- 连接数据库四要素 -->
          <property name="url" value="#{jdbc.url}"/>
          <property name="driverClassName" value="#{jdbc.driver}"/>
          <property name="username" value="#{jdbc.user}"/>
          <property name="password" value="#{jdbc.password}"/>
     </bean>
     <!-- 3.配置sqlSessionFactoryBean -->
     <bean id="SqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
              <!--3.1引入ds数据源-->
          <property name="dataSource" ref="dataSource"/>
              <!--3.2映射路径:mapperLocations-->
          <property name="mapperLocations" value="classpath:com/lanou3g/entity/*.xml"/>
     </bean>

     <!-- 二.整合Spring:4.5.6
              spring整合其他2大框架:各种组件,同时运行,是一个多线程
     -->
     <!-- 4.加入myBatis注解:MapperScannerConfigurer -->
     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
              <!-- 4.1扫描dao包 -->
          <property name="basePackage" value="com.lanou3g.dao"/>
              <!-- 4.2注解类:包名.注解类名 -->
          <property name="annotationClass" value="com.lanou3g.annotation.MyBatisDao"/>
     </bean>
     <!-- 5.开启注解扫描 -->
     <context:component-scan base-package="com.lanou3g"/>

     <!-- 省略了开启mvc注解,用com.lanou3g.annotation.MyBatisDao.@interface自定义注解 -->

     <!-- 6.开启MVC注解驱动 -->
     <mvc:annotation-driven />

     <!-- 三.整合springMVC:7 -->
     <!-- 7.配置springMVC,处理请求转发,使用"国际资源视图解析器" -->
     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix" value="/WEB-INF/"/>
          <property name="suffix" value=".jsp"/>
     </bean>

</beans>

jdbc.properties


url=jdbc:oracle:thin:@localhost:1521:orcl
driver=oracle.jdbc.OracleDriver
user=lanou3g
password=lanou3g

Dao层

package com.lanou3g.dao;

import java.util.List;

import com.lanou3g.annotation.MyBatisDao;
import com.lanou3g.entity.Cost;
import com.lanou3g.entity.Page;

/**
 *
 * @author lanou3g
 *
 *    盖章:在所有dao的接口下
 */
@MyBatisDao
public interface CostDao {
    //查询所有
    List<Cost> findAll();

    //增加
    void add(Cost cost);

    //根据id查询
    Cost findById(Integer id);

    //更新
    void update(Cost cost);

    //删除
    void delete(Integer id);

    //分页
    List<Cost> page(Page page);

    //得到所有数据量
    Integer rows();

    //改变状态值
    void updateStatus(Cost cost);

}


自定义注解

package com.lanou3g.annotation;
/**
 *
 * @author lanou3g
 *
 * 开发SpringMVC支持的自定义注解:
 * 1.new接口
 * 2.在接口前+@
 *
 *
 */
public  @interface MyBatisDao {

}



controller层

package com.lanou3g.controller;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.lanou3g.dao.CostDao;
import com.lanou3g.entity.Cost;
import com.lanou3g.entity.Page;

@Controller
@RequestMapping("cost")
public class CostController {
    //注入dao
    @Resource
    private CostDao costDao;

    @RequestMapping("findCost.do")
    public String findAll(Model model,Integer currentPage){
        /*
         * 总结:
         * 查:查询从dao层返回的结果
         * 绑:绑定到服务器上的容器里,存对象/集合
         *         常见的容器:
         *             request
         *             session
         *            context
         *            root/valueStack(用add方式添加)
         *            model
         *        特点:都可以存key-value
         * 跳:跳转页面
         *         转发:默认
         *         重定向:服务器之间的内部跳转
         */
        if(currentPage==null){
            currentPage=1;
        }
        Page page = new Page(currentPage,costDao.rows());
        page.setCurrentPage(currentPage);
        List<Cost> costs = costDao.page(page);
        model.addAttribute("costs",costs);
        model.addAttribute("page",page);

        //对应cost_list.jsp
        return "cost/cost_list";
    }

    @RequestMapping("preAdd.do")
    public String preAdd(){
        return "cost/cost_add";
    }

    @RequestMapping("addCost.do")
    public String add(Cost cost){
        cost.setStatus("1");
        costDao.add(cost);
        return "redirect:findCost.do";
    }

    @RequestMapping("preUpdate.do")
    public String preUpdate(Integer id,Model model){
        Cost cost = costDao.findById(id);
        model.addAttribute("cost", cost);
        return "cost/cost_update";
    }

    @RequestMapping("update.do")
    public String update(Cost cost){
        costDao.update(cost);
        return "redirect:findCost.do";
    }

    @RequestMapping("delete.do")
    public String delete(@RequestParam("id") Integer id){
        costDao.delete(id);
        return "redirect:findCost.do";
    }

    @RequestMapping("updateStates.do")
    public String updateStates(Integer id){
        Cost cost = costDao.findById(id);
        if(cost.getStatus().equals("1")){
            cost.setStatus("0");
        }else{
            cost.setStatus("1");
        }
        costDao.updateStatus(cost);
        return "redirect:findCost.do";
    }


}


jsp页面

展示全部页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath }/styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath }/styles/global_color.css" />
        <script language="javascript" type="text/javascript">
            //排序按钮的点击事件
            function sort(btnObj) {
                if (btnObj.className == "sort_desc")
                    btnObj.className = "sort_asc";
                else
                    btnObj.className = "sort_desc";
            }

            //启用
            function startFee(id) {
                var r = window.confirm("确定要启用此资费吗?资费启用后将不能修改和删除。");
                if(r){
                     window.location.href="updateStates.do?id="+id;
                }
            }
            //删除
            function deleteFee(id) {
                var r = window.confirm("确定要删除此资费吗?");
                if(r){
                     window.location.href="delete.do?id="+id;
                }
            }
        </script>
    </head>
    <body>
        <!--Logo区域开始-->
        <div id="header">
            <img src="${pageContext.request.contextPath }/images/logo.png" alt="logo" class="left"/>
            <a href="#">[退出]</a>
        </div>
        <!--Logo区域结束-->
        <!--导航区域开始-->
        <div id="navi">
            <ul id="menu">
                <li><a href="${pageContext.request.contextPath }/index.html" class="index_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/role/role_list.html" class="role_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/admin/admin_list.html" class="admin_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/fee/fee_list.html" class="fee_on"></a></li>
                <li><a href="${pageContext.request.contextPath }/account/account_list.html" class="account_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/service/service_list.html" class="service_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/bill/bill_list.html" class="bill_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/report/report_list.html" class="report_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/user/user_info.html" class="information_off"></a></li>
                <li><a href="${pageContext.request.contextPath }/user/user_modi_pwd.html" class="password_off"></a></li>
            </ul>
        </div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <form action="findCost.do" method="post">
            <input type="hidden" name="currentPage" value="1" />
                <!--排序-->
                <div class="search_add">
                    <div>
                        <!--<input type="button" value="月租" class="sort_asc" onclick="sort(this);" />-->
                        <input type="button" value="基费" class="sort_asc" onclick="sort(this);" />
                        <input type="button" value="时长" class="sort_asc" onclick="sort(this);" />
                    </div>
                    <input type="button" value="增加" class="btn_add" onclick="location.href='<%=basePath%>/cost/preAdd.do';" />
                </div>

                <!--启用操作的操作提示-->
                <div id="operate_result_info" class="operate_success">
                    <img src="${pageContext.request.contextPath }/images/close.png" onclick="this.parentNode.style.display='none';" />
                    删除成功!
                </div>
                <!--数据区域:用表格展示数据-->
                <div id="data">
                    <table id="datalist">
                        <tr>
                            <th>资费ID</th>
                            <th class="width100">资费名称</th>
                            <th>基本时长</th>
                            <th>基本费用</th>
                            <th>单位费用</th>
                            <th>创建时间</th>
                            <th>开通时间</th>
                            <th class="width50">状态</th>
                            <th class="width200"></th>
                        </tr>

                        <c:forEach items="${costs}" var="c">
                              <tr>
                            <td>${c.id}</td>
                            <td><a href="fee_detail.html">${c.name }</a></td>
                            <td>${c.base_duration }</td>
                            <td>${c.base_cost }</td>
                            <td>${c.unit_cost }</td>
                            <td><fmt:formatDate value="${c.creatime }" pattern="yyyy-MM-dd"/></td>
                            <td><fmt:formatDate value="${c.startime }" pattern="yyyy-MM-dd"/></td>
                            <td>
                          <!--    标签父子关系:
                             choose
                                  when
                                      otherwise -->
                          <%-- <c:choose>
                                  <c:when test="${c.status==0}">
                                      开通
                                  </c:when>
                                  <c:otherwise>
                                      暂停
                                  </c:otherwise>
                             </c:choose> --%>
                             <c:if test="${c.status==0}">
                                  开通
                             </c:if>
                             <c:if test="${c.status!=0}">
                                  暂停
                             </c:if>


                            </td>
                            <td>
                                <input type="button" value="启用" class="btn_start" onclick="startFee(${c.id});" />
                                <input type="button" value="修改" class="btn_modify"

                                     onclick="location.href='<%=basePath%>/cost/preUpdate.do?id=${c.id}';" />
                                <input type="button" value="删除" class="btn_delete" onclick="deleteFee(${c.id});" />
                            </td>
                        </tr>
                        </c:forEach>
                    </table>
                    <p>业务说明:<br />
                    1、创建资费时,状态为暂停,记载创建时间;<br />
                    2、暂停状态下,可修改,可删除;<br />
                    3、开通后,记载开通时间,且开通后不能修改、不能再停用、也不能删除;<br />
                    4、业务账号修改资费时,在下月底统一触发,修改其关联的资费ID(此触发动作由程序处理)
                    </p>
                </div>
                <!--分页-->
                <div id="pages">
                   <c:if test="${page.currentPage > 1 }">
                    <a href="<%=basePath%>/cost/findCost.do?currentPage=${page.currentPage - 1}">上一页</a>
                  </c:if>

                  <c:forEach begin="1" end="${page.totalPage}" var="i" step="1">
                        <a href="<%=basePath%>/cost/findCost.do?currentPage=${i}" class="current_page" >${i}</a>
                    </c:forEach>

                    <c:if test="${page.currentPage != page.totalPage }">
                         <a href="<%=basePath%>/cost/findCost.do?currentPage=${page.currentPage + 1}">下一页</a>
                    </c:if>
                </div>
            </form>
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <p>[源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目]</p>
            <p>版权所有(C)云科技有限公司</p>
        </div>
    </body>
</html>

增加页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
        <script language="javascript" type="text/javascript">
            //保存结果的提示
            function showResult() {
                showResultDiv(true);
                window.setTimeout("showResultDiv(false);", 3000);
            }
            function showResultDiv(flag) {
                var divResult = document.getElementById("save_result_info");
                if (flag)
                    divResult.style.display = "block";
                else
                    divResult.style.display = "none";
            }

            //切换资费类型
            function feeTypeChange(type) {
                var inputArray = document.getElementById("main").getElementsByTagName("input");
                if (type == 1) {
                    inputArray[4].readOnly = true;
                    inputArray[4].value = "";
                    inputArray[4].className += " readonly";
                    inputArray[5].readOnly = false;
                    inputArray[5].className = "width100";
                    inputArray[6].readOnly = true;
                    inputArray[6].className += " readonly";
                    inputArray[6].value = "";
                }
                else if (type == 2) {
                    inputArray[4].readOnly = false;
                    inputArray[4].className = "width100";
                    inputArray[5].readOnly = false;
                    inputArray[5].className = "width100";
                    inputArray[6].readOnly = false;
                    inputArray[6].className = "width100";
                }
                else if (type == 3) {
                    inputArray[4].readOnly = true;
                    inputArray[4].value = "";
                    inputArray[4].className += " readonly";
                    inputArray[5].readOnly = true;
                    inputArray[5].value = "";
                    inputArray[5].className += " readonly";
                    inputArray[6].readOnly = false;
                    inputArray[6].className = "width100";
                }
            }
        </script>
    </head>
    <body>
        <!--Logo区域开始-->
        <div id="header">
            <img src="../images/logo.png" alt="logo" class="left"/>
            <a href="#">[退出]</a>
        </div>
        <!--Logo区域结束-->
        <!--导航区域开始-->
        <div id="navi">
            <ul id="menu">
                <li><a href="../index.html" class="index_off"></a></li>
                <li><a href="../role/role_list.html" class="role_off"></a></li>
                <li><a href="../admin/admin_list.html" class="admin_off"></a></li>
                <li><a href="../fee/fee_list.html" class="fee_on"></a></li>
                <li><a href="../account/account_list.html" class="account_off"></a></li>
                <li><a href="../service/service_list.html" class="service_off"></a></li>
                <li><a href="../bill/bill_list.html" class="bill_off"></a></li>
                <li><a href="../report/report_list.html" class="report_off"></a></li>
                <li><a href="../user/user_info.html" class="information_off"></a></li>
                <li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
            </ul>
        </div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <div id="save_result_info" class="save_fail">保存失败,资费名称重复!</div>
            <form action="${pageContext.request.contextPath}/cost/addCost.do" method="post" class="main_form">
                <div class="text_info clearfix"><span>资费名称:</span></div>
                <div class="input_info">
                    <input type="text" class="width300" name="name"/>
                    <span class="required">*</span>
                    <div class="validate_msg_short">50长度的字母、数字、汉字和下划线的组合</div>
                </div>
                <div class="text_info clearfix"><span>资费类型:</span></div>
                <div class="input_info fee_type">
                    <input type="radio" name="cost_type" value="1" id="monthly" onclick="feeTypeChange(1);" />
                    <label for="monthly">包月</label>
                    <input type="radio" name="cost_type" value="2" checked="checked" id="package" onclick="feeTypeChange(2);" />
                    <label for="package">套餐</label>
                    <input type="radio" name="cost_type" value="3" id="timeBased" onclick="feeTypeChange(3);" />
                    <label for="timeBased">计时</label>
                </div>
                <div class="text_info clearfix"><span>基本时长:</span></div>
                <div class="input_info">
                    <input type="text" name="base_duration" class="width100" />
                    <span class="info">小时</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long">1-600之间的整数</div>
                </div>
                <div class="text_info clearfix"><span>基本费用:</span></div>
                <div class="input_info">
                    <input type="text" name="base_cost" class="width100" />
                    <span class="info">元</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long error_msg">0-99999.99之间的数值</div>
                </div>
                <div class="text_info clearfix"><span>单位费用:</span></div>
                <div class="input_info">
                    <input type="text" name="unit_cost" class="width100" />
                    <span class="info">元/小时</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long error_msg">0-99999.99之间的数值</div>
                </div>
                <div class="text_info clearfix"><span>资费说明:</span></div>
                <div class="input_info_high">
                    <textarea class="width300 height70" name="descr"></textarea>
                    <div class="validate_msg_short error_msg">100长度的字母、数字、汉字和下划线的组合</div>
                </div>
                <div class="button_info clearfix">
                    <input type="submit" value="保存" class="btn_save" />
                    <input type="button" value="取消" class="btn_save" onclick="history.back();"/>
                </div>
            </form>
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <span>[源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目]</span>
            <br />
            <span>版权所有(C)云科技有限公司 </span>
        </div>
    </body>
</html>

更新页面


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
        <script language="javascript" type="text/javascript">
            //保存结果的提示
            function showResult() {
                showResultDiv(true);
                window.setTimeout("showResultDiv(false);", 3000);
            }
            function showResultDiv(flag) {
                var divResult = document.getElementById("save_result_info");
                if (flag)
                    divResult.style.display = "block";
                else
                    divResult.style.display = "none";
            }

            //切换资费类型
            function feeTypeChange(type) {
                var inputArray = document.getElementById("main").getElementsByTagName("input");
                if (type == 1) {
                    inputArray[5].readOnly = true;
                    inputArray[5].value = "";
                    inputArray[5].className += " readonly";
                    inputArray[6].readOnly = false;
                    inputArray[6].className = "width100";
                    inputArray[7].readOnly = true;
                    inputArray[7].className += " readonly";
                    inputArray[7].value = "";
                }
                else if (type == 2) {
                    inputArray[5].readOnly = false;
                    inputArray[5].className = "width100";
                    inputArray[6].readOnly = false;
                    inputArray[6].className = "width100";
                    inputArray[7].readOnly = false;
                    inputArray[7].className = "width100";
                }
                else if (type == 3) {
                    inputArray[5].readOnly = true;
                    inputArray[5].value = "";
                    inputArray[5].className += " readonly";
                    inputArray[6].readOnly = true;
                    inputArray[6].value = "";
                    inputArray[6].className += " readonly";
                    inputArray[7].readOnly = false;
                    inputArray[7].className = "width100";
                }
            }
        </script>
    </head>
    <body>
        <!--Logo区域开始-->
        <div id="header">
            <img src="../images/logo.png" alt="logo" class="left"/>
            <a href="#">[退出]</a>
        </div>
        <!--Logo区域结束-->
        <!--导航区域开始-->
        <div id="navi">
            <ul id="menu">
                <li><a href="../index.html" class="index_off"></a></li>
                <li><a href="../role/role_list.html" class="role_off"></a></li>
                <li><a href="../admin/admin_list.html" class="admin_off"></a></li>
                <li><a href="../fee/fee_list.html" class="fee_on"></a></li>
                <li><a href="../account/account_list.html" class="account_off"></a></li>
                <li><a href="../service/service_list.html" class="service_off"></a></li>
                <li><a href="../bill/bill_list.html" class="bill_off"></a></li>
                <li><a href="../report/report_list.html" class="report_off"></a></li>
                <li><a href="../user/user_info.html" class="information_off"></a></li>
                <li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
            </ul>
        </div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <div id="save_result_info" class="save_success">保存成功!</div>
            <form action="${pageContext.request.contextPath}/cost/update.do" method="post" class="main_form">
                <div class="text_info clearfix"><span>资费ID:</span></div>
                <div class="input_info">
                   <input type="text" name="id" class="readonly" readonly value="${cost.id }" />
                </div>
                <div class="text_info clearfix"><span>资费名称:</span></div>
                <div class="input_info">
                    <input type="text" name="name" class="width300" value="${cost.name }"/>
                    <span class="required">*</span>
                    <div class="validate_msg_short">50长度的字母、数字、汉字和下划线的组合</div>
                </div>
                <div class="text_info clearfix"><span>资费类型:</span></div>
                <div class="input_info fee_type">
                   <!--
                        需要根据查询到的cost.cost_type的值,
                        来设置下面3个radio的默认勾选。
                        如果查询结果=1,则勾选包月,即在包月的radio
                        上添加checked属性;
                        如果查询结果=2,则勾选套餐,即在套餐的radio
                        上添加checked属性;
                        如果查询结果=3,则勾选计时,即在计时的radio
                        上添加checked属性;
                    -->
                    <input type="radio" name="cost_type" value="1"  <c:if test="${cost.cost_type==1}">checked</c:if>   id="monthly" onclick="feeTypeChange(1);" />
                    <label for="monthly">包月</label>
                    <input type="radio" name="cost_type" value="2" <c:if test="${cost.cost_type==2}">checked</c:if> id="package" onclick="feeTypeChange(2);" />
                    <label for="package">套餐</label>
                    <input type="radio" name="cost_type" value="3" <c:if test="${cost.cost_type==3}">checked</c:if>  id="timeBased" onclick="feeTypeChange(3);" />
                    <label for="timeBased">计时</label>
                </div>
                <div class="text_info clearfix"><span>基本时长:</span></div>
                <div class="input_info">
                    <input type="text" name="base_duration" value="${cost.base_duration}" class="width100" />
                    <span class="info">小时</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long">1-600之间的整数</div>
                </div>
                <div class="text_info clearfix"><span>基本费用:</span></div>
                <div class="input_info">
                    <input type="text" name="base_cost" value="${cost.base_cost }" class="width100" />
                    <span class="info">元</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long">0-99999.99之间的数值</div>
                </div>
                <div class="text_info clearfix"><span>单位费用:</span></div>
                <div class="input_info">
                    <input type="text" name="unit_cost" value="${cost.unit_cost }" class="width100" />
                    <span class="info">元/小时</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long">0-99999.99之间的数值</div>
                </div>
                <div class="text_info clearfix"><span>资费说明:</span></div>
                <div class="input_info_high">
                    <textarea name="descr" class="width300 height70">${cost.descr}</textarea>
                    <div class="validate_msg_short">100长度的字母、数字、汉字和下划线的组合</div>
                </div>
                <div class="button_info clearfix">
                    <input type="submit" value="保存" class="btn_save" />
                    <input type="button" value="取消" class="btn_save" onclick="history.back();"/>
                </div>
            </form>
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <span>[源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目]</span>
            <br />
            <span>版权所有(C)云科技有限公司 </span>
        </div>
    </body>
</html>
阅读全文
0 0