Maven项目学习（十）SSM项目使用JQuery和注解@ModelAttribute进行修改数据

 

1.数据库内容

month_cost表：

booker_id为外键

内容：

2.数据库层

接口类：（最后一个方法）

package com.myhomes.dao;

import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository("monthCostDao")
public interface MonthCostDao {
    MonthCost selectLastMonthMeterByHouseId(String houseId);
    void insertMonthCost(MonthCost monthCost);
    List<MonthCost> selectAllMonthCost();
    List<MonthCost> selectByCondition(@Param("list") List<User> userList, @Param("houseId") String houseId);
    List<MonthCost> selectMonthCost(@Param("bookerName")String bookerName, @Param("houseId") String houseId);
    void updateMonthCostById(MonthCost monthCost);
}

映射实现文件：最后那个映射方法

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.4//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.myhomes.dao.MonthCostDao">
    <resultMap id="monthCost" type="MonthCost">
        <id property="idNum" column="id" javaType="Integer"></id>
        <result property="houseId" column="house_id" javaType="String"></result>
        <result property="bookerId" column="booker_id" javaType="Integer"></result>
        <result property="bookerName" column="booker_name" javaType="String"></result>
        <result property="yearsMonth" column="years_month" javaType="java.sql.Date"></result>
        <result property="rent" column="rent" javaType="Integer"></result>
        <result property="waterMeter" column="water_meter" javaType="Double"></result>
        <result property="powerMeter" column="power_meter" javaType="Double"></result>
        <result property="network" column="network" javaType="Integer"></result>
        <result property="clean" column="clean" javaType="Integer"></result>
        <result property="sum" column="sums" javaType="Double"></result>
        <!--<result property="deposit" column="deposit" javaType="Integer"></result>-->
        <association property="users" column="booker_id" javaType="User" select="com.myhomes.dao.UserDao.selectById">

        </association>
    </resultMap>

    <select id="selectLastMonthMeterByHouseId" parameterType="String" resultMap="monthCost">
        select house_id,years_month,rent,water_meter,power_meter from month_cost where house_id = #{houseId} order by years_month desc LIMIT 0,1
    </select>

    <insert id="insertMonthCost" parameterType="MonthCost" useGeneratedKeys="true" keyColumn="id">
        insert into month_cost(house_id,booker_id,booker_name,years_month,rent,water_meter,power_meter,network,clean,sums) value
        (#{houseId},#{bookerId},#{bookerName},#{yearsMonth},#{rent},#{waterMeter},#{powerMeter},#{network},#{clean},#{sum})
    </insert>

    <select id="selectAllMonthCost" resultMap="monthCost">
        select * from month_cost where booker_id != '' order by years_month desc
    </select>

    <select id="selectMonthCost" resultMap="monthCost">
        select * from month_cost where 1=1
        <if test="bookerName != '' and bookerName != null and bookerName != 'null'">
            and booker_name like concat('%',#{bookerName},'%')
        </if>
        <if test="houseId != '' and houseId != null and houseId != 'null'">
            and house_id = #{houseId}
        </if>
        and booker_id != '' order by years_month desc
    </select>

    <update id="updateMonthCostById" parameterType="MonthCost">
        update month_cost set house_id=#{houseId},booker_id=#{bookerId},booker_name=#{bookerName},years_month=#{yearsMonth},rent=#{rent},water_meter=#{waterMeter},
        power_meter=#{powerMeter},network=#{network},clean=#{clean},sums=#{sum} where id=#{idNum}
    </update>

</mapper>

实体类：

package com.myhomes.entity;

import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

public class MonthCost {
    private Integer idNum;
    private String houseId;
    private Integer bookerId;
    private String bookerName;
    @DateTimeFormat(pattern="yyyy-MM-dd")
    private Date yearsMonth;
    private Integer rent;
    private double waterMeter;
    private double powerMeter;
    private Integer network;
    private Integer clean;
    private double sum;
    //private Integer deposit;
    private User users;

//    public Integer getDeposit() {
//        return deposit;
//    }
//
//    public void setDeposit(Integer deposit) {
//        this.deposit = deposit;
//    }

    public String getBookerName() {
        return bookerName;
    }

    public void setBookerName(String bookerName) {
        this.bookerName = bookerName;
    }

    public Integer getIdNum() {
        return idNum;
    }

    public void setIdNum(Integer idNum) {
        this.idNum = idNum;
    }

    public String getHouseId() {
        return houseId;
    }

    public void setHouseId(String houseId) {
        this.houseId = houseId;
    }

    public Integer getBookerId() {
        return bookerId;
    }

    public void setBookerId(Integer bookerId) {
        this.bookerId = bookerId;
    }

    public Date getYearsMonth() {
        return yearsMonth;
    }

    public void setYearsMonth(Date yearsMonth) {
        this.yearsMonth = yearsMonth;
    }

    public Integer getRent() {
        return rent;
    }

    public void setRent(Integer rent) {
        this.rent = rent;
    }

    public double getWaterMeter() {
        return waterMeter;
    }

    public void setWaterMeter(double waterMeter) {
        this.waterMeter = waterMeter;
    }

    public double getPowerMeter() {
        return powerMeter;
    }

    public void setPowerMeter(double powerMeter) {
        this.powerMeter = powerMeter;
    }

    public Integer getNetwork() {
        return network;
    }

    public void setNetwork(Integer network) {
        this.network = network;
    }

    public Integer getClean() {
        return clean;
    }

    public void setClean(Integer clean) {
        this.clean = clean;
    }

    public double getSum() {
        return sum;
    }

    public void setSum(double sum) {
        this.sum = sum;
    }

    public User getUsers() {
        return users;
    }

    public void setUsers(User users) {
        this.users = users;
    }

    @Override
    public String toString() {
        return "MonthCost{" +
                "idNum=" + idNum +
                ", houseId='" + houseId + '\'' +
                ", bookerId=" + bookerId +
                ", bookerName='" + bookerName + '\'' +
                ", yearsMonth=" + yearsMonth +
                ", rent=" + rent +
                ", waterMeter=" + waterMeter +
                ", powerMeter=" + powerMeter +
                ", network=" + network +
                ", clean=" + clean +
                ", sum=" + sum +
                ", users=" + users +
                '}';
    }
}

3.服务层

接口类：最后那个方法

package com.myhomes.biz;

import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;

import java.util.List;

public interface MonthCostBiz {
    MonthCost searchLastMonthMeterByHouseId(String houseId);
    void addMonthCost(MonthCost monthCost);
    List<MonthCost> searchAllMonthCost();
    List<MonthCost> searchByCondition(List<User> userList, String houseId);
    List<MonthCost> searchMonthCost(String bookerName,String houseId);
    void editMonthCostById(MonthCost monthCost);
}

实现类：

package com.myhomes.biz.impl;

import com.myhomes.biz.MonthCostBiz;
import com.myhomes.dao.MonthCostDao;
import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("monthCostBiz")
public class MonthCostBizImpl implements MonthCostBiz {

    @Autowired
    @Qualifier(value = "monthCostDao")
    private MonthCostDao monthCostDao;

    public MonthCost searchLastMonthMeterByHouseId(String houseId) {
        return monthCostDao.selectLastMonthMeterByHouseId(houseId);
    }

    public void addMonthCost(MonthCost monthCost) {
        monthCostDao.insertMonthCost(monthCost);
    }

    public List<MonthCost> searchAllMonthCost() {
        return monthCostDao.selectAllMonthCost();
    }

    public List<MonthCost> searchByCondition(List<User> userList, String houseId) {
        return monthCostDao.selectByCondition(userList,houseId);
    }

    public List<MonthCost> searchMonthCost(String bookerName, String houseId) {
        return monthCostDao.selectMonthCost(bookerName,houseId);
    }

    public void editMonthCostById(MonthCost monthCost) {
        monthCostDao.updateMonthCostById(monthCost);
    }
}

4.控制器层

       @ModelAttribute直接从前端传过来的数据根据实体类属性名自动赋值，感觉从前端传过来的字段属性要对应实体类属性名。详细可查看后面展示的js文件代码。

package com.myhomes.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.myhomes.biz.HouseBiz;
import com.myhomes.biz.MonthCostBiz;
import com.myhomes.biz.UserService;
import com.myhomes.entity.House;
import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller("monthCostTableController")
@RequestMapping(value = "/MonthCostTable")
public class MonthCostTableController {

    private Map<String,Object> result = new HashMap<>();

    @Autowired
    private MonthCostBiz monthCostBiz;

    @Autowired
    private HouseBiz houseBiz;

    @RequestMapping(value = "/tolist")
    public String toList(){
        return "count_house_table";
    }

    @RequestMapping(value = "/list")
    @ResponseBody
    public Map<String,Object> getList(@RequestParam(name = "pageNo",defaultValue = "1")int pageNo,@RequestParam(name = "pageSize",defaultValue = "10") int pageSize,
                                      @RequestParam(name = "usersName",defaultValue = "")String usersName,@RequestParam(name = "houseId",defaultValue = "") String houseId){
        //System.out.println("第一：usersName:"+usersName+"houseId"+houseId);
        List<House> houseList = houseBiz.searchAllHouseId();
        result.put("houseList",houseList);
        List<MonthCost> monthCostList;

        //设置分页参数
        PageHelper.startPage(pageNo,pageSize);
        //查询数据
        monthCostList = monthCostBiz.searchMonthCost(usersName,houseId);

        //使用PageInfo封装查询结果
        PageInfo<MonthCost> pageInfo = new PageInfo<MonthCost>(monthCostList);
        //总记录数
        //long total = pageInfo.getTotal();
        //上一页
        Integer prePage = pageInfo.getPrePage();
        //下一页
        Integer nextPage = pageInfo.getNextPage();
        //总数页
        Integer pages = pageInfo.getPages();
        //当前页
        Integer pageNum = pageInfo.getPageNum();

        //当前页数据列表
        List<MonthCost> monthCosts = pageInfo.getList();

        result.put("monthCostList",monthCosts);
        result.put("prePage",prePage);
        result.put("nextPage",nextPage);
        result.put("pages",pages);
        result.put("pageNum",pageNum);

        return result;
    }
    @RequestMapping(value = "/update")
    @ResponseBody
    @Transactional
    public Map<String,Object> update(@ModelAttribute MonthCost monthCost){
        monthCost.setClean(10);
        System.out.println("monthCost:"+monthCost.toString());
        monthCostBiz.editMonthCostById(monthCost);
        result.put("success",true);
        return result;
    }

}

数据页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<jsp:include page="top.jsp"></jsp:include>

<section id="right">
    <a id="user_local">
        业务管理&nbsp;&nbsp;&nbsp;->&nbsp;&nbsp;每月房租
    </a>
    <div id="list_mean_div">
        <form>
            <div id="list_div_top"></div>
            <a id="name_a"><b>租客名字：</b></a>
            <input id="month_cost_name_text" type="text" name="name" maxlength="20" placeholder="输入租客名字..."/>

            <a id="month_cost_house_a"><b>房号：</b></a>
            <select id="month_cost_house_select" name="houseId">
                <%--selected：默认选择该选项；--%>
                <%--disabled：该选项不能被鼠标选择；（注：选项没有被隐藏的时候）--%>
                <%--style="display：none"：隐藏该选项；（注：该选项不会出现在下拉列）--%>
                <%--value=""：该选项value为“”;（注：可做表单验证）--%>
                <option selected disabled style="display:none" value="">选择房号</option>

            </select>
            <input  type="button" id="month_cost_search_button" value="搜索">&nbsp;&nbsp;&nbsp;
            <label id="month_cost_label" style="color: red;">注意：月总金额包含清洁费10元，水费2.5元/度，电费1.5元/度。</label>
        </form>
        <br/><br/><br/>
        <hr/>
    </div>
    <div id="month_cost_table_div">
        <table id="month_cost_table" border="0" cellpadding="0" cellspacing="0">
            <colgroup>
                <col align="center" width="0px" hidden>
                <col align="center" width="0px" hidden>
                <col align="center" width="75px">
                <col align="center" width="50px">
                <col align="center" width="75px">
                <col align="center" width="40px">
                <col align="center" width="50px">
                <col align="center" width="50px">
                <col align="center" width="30px">
                <col align="center" width="40px">
                <col align="center" width="40px">
            </colgroup>
            <thead>
            <tr>
                <th hidden>id</th>
                <th hidden>houseId</th>
                <th>房客姓名</th>
                <th>房间号</th>
                <th>记录房租时间</th>
                <th>月租金</th>
                <th>水表数</th>
                <th>电表数</th>
                <th>网费</th>
                <th>月总金额</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script src="/js/monthCountTable.js"></script>
</section>

<jsp:include page="buttom.jsp"></jsp:include>

js部分：

      这里展示怎么从后台获取所有表数据到前端动态显示，并且有点击下一页和上一页的方法，示例的话可以直接看最后的cancel()方法。

 $(document).ready(function(){
     on_ready();
});
function on_ready() {
    $.ajax({
        type:"get",
        url:"/MonthCostTable/list?pageNo=1",
        success:function (data) {
            for (var i = 0;i < data.houseList.length;i++){
                var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
                $("select").append(houseIdList);
            }

            $("tbody").find("tr").remove();

            if(data.monthCostList.length !== 0){
                for (var i = 0;i < data.monthCostList.length ;i++){
                    var monthCostList = "<tr>"+
                        "<td id='monthCostId"+i+"' hidden>"+data.monthCostList[i].idNum+"</td>"+
                        "<td id='bookerId"+i+"' hidden>"+data.monthCostList[i].bookerId+"</td>"+
                        "<td id='usersName"+i+"' align='center'>"+data.monthCostList[i].users.name+"</td>"+
                        "<td id='houseId"+i+"' align='center'>"+data.monthCostList[i].houseId+"</td>"+
                        "<td id='yearsMonth"+i+"' align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
                        "<td id='rent"+i+"' align='center'>"+data.monthCostList[i].rent+"</td>"+
                        "<td id='waterMeter"+i+"' align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
                        "<td id='powerMeter"+i+"' align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
                        "<td id='network"+i+"' align='center'>"+data.monthCostList[i].network+"</td>"+
                        "<td id='sum"+i+"' align='center'>"+data.monthCostList[i].sum+"</td>"+
                        "<td align='center' id='updelect_td'><a id='update_a"+i+"' style='text-decoration: none;color: cornflowerblue;' onclick='updateClick("+i+")'>修改</a></td>"+
                        "</tr>";
                    $("tbody").append(monthCostList);
                }
                var page = "<div style='position: absolute;background-color: white;width: 1100px;height: 23px;'>"+
                    "<a id='pageNum'>当前第"+data.pageNum+"页，一共有"+data.pages+"页</a>"+
                    "<a id='data_pageNum' hidden>"+data.pageNum+"</a>"+
                    "<a id='data_pages' hidden>"+data.pages+"</a>"+
                    "<a id='beforePage' onclick='myPrePage()'>上一页</a>"+
                    "<a id='data_prePage' hidden>"+data.prePage+"</a>"+
                    "<a id='nextPage' onclick='myNextPage()'>下一页</a>"+
                    "<a id='data_nextPage' hidden>"+data.nextPage+"</a>"+
                    "</div>";
                $("table").find("div").remove();
                $("table").append(page);
            }else{
                var html = "<tr><td align='center' colspan='8'>没有查找到任何数据</td></tr><td><br><br></td>";
                $("table").find("*").remove();
                $("tbody").append(html);
            }
        },
        error:function () {
            alert("系统出错！");
        }
    });
}
 //点击上一页执行的代码
function myPrePage() {//alert("当前页："+$("#data_pageNum").text()+"当前页的上一页："+$("#data_prePage").text()+"当前页的下一页："+$("#data_nextPage").text());
    $("#month_cost_table_div").find("#dialog").remove();
    //如果上一页页码为0，则return false；
    //上一页页码
    var prePage = $("#data_prePage").text();
    //获取租客名字
    var usersName = $("#month_cost_name_text").val();
    //获取用户所选的房间号
    var houseId = $("#month_cost_house_select").val();
    //alert("上一页页码:"+prePage);
    if (prePage !== "0"){
        $.ajax({
            type:"get",
            url:"/MonthCostTable/list?pageNo="+prePage+"&usersName="+usersName+"&houseId="+houseId,
            success:function (data) {
                for (var i = 0;i < data.houseList.length;i++){
                    var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
                    $("select").append(houseIdList);
                }

                $("tbody").find("tr").remove();

                if(data.monthCostList != null){
                    for (var i = 0;i < data.monthCostList.length ;i++){
                        var monthCostList = "<tr>"+
                            "<td id='monthCostId"+i+"' hidden>"+data.monthCostList[i].idNum+"</td>"+
                            "<td id='bookerId"+i+"' hidden>"+data.monthCostList[i].bookerId+"</td>"+
                            "<td id='usersName"+i+"' align='center'>"+data.monthCostList[i].users.name+"</td>"+
                            "<td id='houseId"+i+"' align='center'>"+data.monthCostList[i].houseId+"</td>"+
                            "<td id='yearsMonth"+i+"' align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
                            "<td id='rent"+i+"' align='center'>"+data.monthCostList[i].rent+"</td>"+
                            "<td id='waterMeter"+i+"' align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
                            "<td id='powerMeter"+i+"' align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
                            "<td id='network"+i+"' align='center'>"+data.monthCostList[i].network+"</td>"+
                            "<td id='sum"+i+"' align='center'>"+data.monthCostList[i].sum+"</td>"+
                            "<td align='center' id='updelect_td'><a id='update_a"+i+"' style='text-decoration: none;color: cornflowerblue;' onclick='updateClick("+i+")'>修改</a></td>"+
                            "</tr>";

                        $("tbody").append(monthCostList);
                    }

                    $("#pageNum").text("当前第"+data.pageNum+"页，一共有"+data.pages+"页");

                    $("#data_pageNum").text(data.pageNum);
                    $("#data_pages").text(data.pages);
                    $("#data_prePage").text(data.prePage);
                    $("#data_nextPage").text(data.nextPage);

                    //$("table").append(page);
                }else{
                    alert("系统出错！");
                }
            }
        });
    }else {
        alert("当前页为首页");
    }
}

//点击下一页执行的代码
function myNextPage() {//alert("当前页："+$("#data_pageNum").text()+"当前页的上一页："+$("#data_prePage").text()+"当前页的下一页："+$("#data_nextPage").text());
    $("#month_cost_table_div").find("#dialog").remove();
    //如果当前页码与总页码不同，则获取下一页页码，并查找；如果当前页码与总页码相同，则return false；
    //当前页码
    var pageNum = $("#data_pageNum").text();
    //总页码
    var pages = $("#data_pages").text();
    //下一页页码
    var nextPage = $("#data_nextPage").text();
    //获取租客名字
    var usersName = $("#month_cost_name_text").val();
    //获取用户所选的房间号
    var houseId = $("#month_cost_house_select").val();
    if (pageNum !== pages) {
        $.ajax({
           type:"get",
           url:"/MonthCostTable/list?pageNo="+nextPage+"&usersName="+usersName+"&houseId="+houseId,
            success:function (data) {
                for (var i = 0;i < data.houseList.length;i++){
                    var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
                    $("select").append(houseIdList);
                }

                $("tbody").find("tr").remove();

                if(data.monthCostList != null){
                    for (var i = 0;i < data.monthCostList.length ;i++){
                        var monthCostList = "<tr>"+
                            "<td id='monthCostId"+i+"' hidden>"+data.monthCostList[i].idNum+"</td>"+
                            "<td id='bookerId"+i+"' hidden>"+data.monthCostList[i].bookerId+"</td>"+
                            "<td id='usersName"+i+"' align='center'>"+data.monthCostList[i].users.name+"</td>"+
                            "<td id='houseId"+i+"' align='center'>"+data.monthCostList[i].houseId+"</td>"+
                            "<td id='yearsMonth"+i+"' align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
                            "<td id='rent"+i+"' align='center'>"+data.monthCostList[i].rent+"</td>"+
                            "<td id='waterMeter"+i+"' align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
                            "<td id='powerMeter"+i+"' align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
                            "<td id='network"+i+"' align='center'>"+data.monthCostList[i].network+"</td>"+
                            "<td id='sum"+i+"' align='center'>"+data.monthCostList[i].sum+"</td>"+
                            "<td align='center' id='updelect_td'><a id='update_a"+i+"' style='text-decoration: none;color: cornflowerblue;' onclick='updateClick("+i+")'>修改</a></td>"+
                            "</tr>";

                        $("tbody").append(monthCostList);
                    }

                    $("#pageNum").text("当前第"+data.pageNum+"页，一共有"+data.pages+"页");

                    $("#data_pageNum").text(data.pageNum);
                    $("#data_pages").text(data.pages);
                    $("#data_prePage").text(data.prePage);
                    $("#data_nextPage").text(data.nextPage);

                    //$("table").append(page);
                }else{
                    alert("系统出错！");
                }
            }
        });
    }else{
        alert("已经是最后一页了！");
    }
}

$("#month_cost_search_button").click(function () {
    //alert($("#month_cost_name_text").val()+"--"+$("#month_cost_house_select").val());
    var usersName = $("#month_cost_name_text").val();
    var houseId = $("#month_cost_house_select").val();
    //当前页码
    var pageNum = $("#data_pageNum").text();
    if (usersName === "" && houseId === null){
        //没有输入租客名字或者没有选择房间号则搜索表第一页数据
        //alert("usersName === \"\"");
        on_ready();
    }else{
        //alert("else");
        //用户输入条件进行查询
        $.ajax({
            type:"get",
            url:"/MonthCostTable/list?pageNo="+pageNum+"&usersName="+usersName+"&houseId="+houseId,
            success:function (data) {
                $("tbody").find("tr").remove();

                if(data.monthCostList.length !== 0){
                    for (var i = 0;i < data.monthCostList.length ;i++){
                        var monthCostList = "<tr>"+
                            "<td id='monthCostId"+i+"' hidden>"+data.monthCostList[i].idNum+"</td>"+
                            "<td id='bookerId"+i+"' hidden>"+data.monthCostList[i].bookerId+"</td>"+
                            "<td id='usersName"+i+"' align='center'>"+data.monthCostList[i].users.name+"</td>"+
                            "<td id='houseId"+i+"' align='center'>"+data.monthCostList[i].houseId+"</td>"+
                            "<td id='yearsMonth"+i+"' align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
                            "<td id='rent"+i+"' align='center'>"+data.monthCostList[i].rent+"</td>"+
                            "<td id='waterMeter"+i+"' align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
                            "<td id='powerMeter"+i+"' align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
                            "<td id='network"+i+"' align='center'>"+data.monthCostList[i].network+"</td>"+
                            "<td id='sum"+i+"' align='center'>"+data.monthCostList[i].sum+"</td>"+
                            "<td align='center' id='updelect_td'><a id='update_a"+i+"' style='text-decoration: none;color: cornflowerblue;' onclick='updateClick("+i+")'>修改</a></td>"+
                            "</tr>";

                        $("tbody").append(monthCostList);
                    }
                    var page = "<div style='position: absolute;background-color: white;width: 1100px;height: 23px;'>"+
                        "<a id='pageNum'>当前第"+data.pageNum+"页，一共有"+data.pages+"页</a>"+
                        "<a id='data_pageNum' hidden>"+data.pageNum+"</a>"+
                        "<a id='data_pages' hidden>"+data.pages+"</a>"+
                        "<a id='beforePage' onclick='myPrePage()'>上一页</a>"+
                        "<a id='data_prePage' hidden>"+data.prePage+"</a>"+
                        "<a id='nextPage' onclick='myNextPage()'>下一页</a>"+
                        "<a id='data_nextPage' hidden>"+data.nextPage+"</a>"+
                        "</div>";
                    $("table").find("div").remove();
                    $("table").append(page);
                }else{
                    var html = "<tr><td align='center' colspan='8'>没有查找到任何数据</td></tr>";
                    $("table").find("div").remove();
                    $("tbody").append(html);
                }
            },
            error:function () {
                alert("系统出错！");
            }
        });
    }
});
//修改
function updateClick(id) {
    var ids = id;
    var dialog ="<div id='dialog' style='width: 480px;height: 180px;background-color: #FDFDFD;position: fixed;margin: auto;top: 570px;left: 750px;border-radius: 10px;border: #2F4056;'>"+
                    "<label id='update_booker_idNum' hidden></label>"+
                    "<label id='update_booker_bookerId' hidden></label>"+
                    "<label>&nbsp;&nbsp;房客姓名 </label>"+"<input id='update_booker_name' type='text' readonly style='background-color: #93D1FF;width: 70px;'/>"+
                    "&nbsp;&nbsp;房间号 "+"<input id='update_house_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
                    "&nbsp;&nbsp;记录房租时间 "+"<input id='update_yearsMonth_id' type='text' readonly style='background-color: #93D1FF;width: 100px;'/>"+
                    "<br/>"+"<br/>"+
                    "&nbsp;&nbsp;月租金 "+"<input id='update_rent_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
                    "&nbsp;&nbsp;水表数 "+"<input id='update_waterMeter_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
                    "&nbsp;&nbsp;电表数 "+"<input id='update_powerMeter_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
                    "<br/>"+"<br/>"+
                    "&nbsp;&nbsp;网费 "+"<input id='update_network_id' type='text' style='width: 50px;'/>"+
                    "&nbsp;&nbsp;月总金额 "+"<input id='update_sum_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
                    "<br/>"+"<br/>"+
                    "<input type='button' value='取消' onclick='cancel(0,0,0)'/>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                    "<input type='button' value='确定' onclick='update()'/>"+
                "</div>";
    $("#month_cost_table_div").find("#dialog").remove();
    $("#month_cost_table_div").append(dialog);

    $("#update_booker_idNum").val($("#"+"monthCostId"+ids+"").text());
    $("#update_booker_bookerId").val($("#"+"bookerId"+ids+"").text());
    $("#update_booker_name").val($("#"+"usersName"+ids+"").text());
    $("#update_house_id").val($("#"+"houseId"+ids+"").text());
    $("#update_yearsMonth_id").val($("#"+"yearsMonth"+ids+"").text());
    $("#update_rent_id").val($("#"+"rent"+ids+"").text());
    $("#update_waterMeter_id").val($("#"+"waterMeter"+ids+"").text());
    $("#update_powerMeter_id").val($("#"+"powerMeter"+ids+"").text());
    $("#update_network_id").val($("#"+"network"+ids+"").text());
    $("#update_sum_id").val($("#"+"sum"+ids+"").text());
}
function cancel(NowPage,bookerNameCondition,HouseIdCondition) {
    if (bookerNameCondition === 0 || bookerNameCondition === '0')
        $("#month_cost_table_div").find("#dialog").remove();
    else{
        $("#month_cost_table_div").find("#dialog").remove();
        $.ajax({
            type:"get",
            url:"/MonthCostTable/list?pageNo="+NowPage+"&usersName="+bookerNameCondition+"&houseId="+HouseIdCondition,
            success:function (data) {
                for (var i = 0;i < data.houseList.length;i++){
                    var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
                    $("select").append(houseIdList);
                }

                $("tbody").find("tr").remove();

                if(data.monthCostList != null){
                    for (var i = 0;i < data.monthCostList.length ;i++){
                        var monthCostList = "<tr>"+
                            "<td id='monthCostId"+i+"' hidden>"+data.monthCostList[i].idNum+"</td>"+
                            "<td id='bookerId"+i+"' hidden>"+data.monthCostList[i].bookerId+"</td>"+
                            "<td id='usersName"+i+"' align='center'>"+data.monthCostList[i].users.name+"</td>"+
                            "<td id='houseId"+i+"' align='center'>"+data.monthCostList[i].houseId+"</td>"+
                            "<td id='yearsMonth"+i+"' align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
                            "<td id='rent"+i+"' align='center'>"+data.monthCostList[i].rent+"</td>"+
                            "<td id='waterMeter"+i+"' align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
                            "<td id='powerMeter"+i+"' align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
                            "<td id='network"+i+"' align='center'>"+data.monthCostList[i].network+"</td>"+
                            "<td id='sum"+i+"' align='center'>"+data.monthCostList[i].sum+"</td>"+
                            "<td align='center' id='updelect_td'><a id='update_a"+i+"' style='text-decoration: none;color: cornflowerblue;' onclick='updateClick("+i+")'>修改</a></td>"+
                            "</tr>";

                        $("tbody").append(monthCostList);
                    }

                    $("#pageNum").text("当前第"+data.pageNum+"页，一共有"+data.pages+"页");

                    $("#data_pageNum").text(data.pageNum);
                    $("#data_pages").text(data.pages);
                    $("#data_prePage").text(data.prePage);
                    $("#data_nextPage").text(data.nextPage);

                    //$("table").append(page);
                }else{
                    alert("系统出错！");
                }
            }
        });
    }
}
function update() {
    if ($("#update_network_id").val() === "" || $("#update_network_id").val() === null || $("#update_network_id").val()*1 < 0){
        alert("网费错误");
        return false;
    }
    var idNum = $("#update_booker_idNum").val();
    var houseId = $("#update_house_id").val();
    var bookerId = $("#update_booker_bookerId").val();
    var bookerName = $("#update_booker_name").val();
    var yearsMonth = $("#update_yearsMonth_id").val();
    var rent = $("#update_rent_id").val();
    var waterMeter = $("#update_waterMeter_id").val();
    var powerMeter = $("#update_powerMeter_id").val();
    var network = $("#update_network_id").val();
    var sum = $("#update_sum_id").val();
    //记录当前页及查询条件，成功修改数据后刷新要用
    var NowPage = $("#data_pageNum").text();
    var bookerNameCondition = $("#month_cost_name_text").val();
    var HouseIdCondition = $("#month_cost_house_select").val();
    $.ajax({
        type:'post',
        url:'/MonthCostTable/update',
        data:{
            idNum:idNum,
            houseId:houseId,
            bookerId:bookerId,
            bookerName:bookerName,
            yearsMonth:yearsMonth,
            rent:rent,
            waterMeter:waterMeter,
            powerMeter:powerMeter,
            network:network,
            sum:sum
        },
        success:function (data) {
            if (data.success){
                //alert("修改成功！");
                if (bookerNameCondition === '' || bookerNameCondition === null || bookerNameCondition === 'null'){
                    bookerNameCondition = null;
                }
                $("#month_cost_table_div").find("#dialog").remove();
                var updateSuccessDialog = "<div id='dialog' style='width: 200px;height: 150px;background-color: #FDFDFD;position: fixed;margin: auto;top: 570px;left: 750px;border-radius: 10px;'>"+
                                            "<label style='color: #007DDB;position: absolute;top: 55px;left: 60px'>修改成功！</label>"+
                                            "<input type='button' value='确定' style='position: absolute;top: 110px;left: 75px;' onclick='cancel("+NowPage+",\""+bookerNameCondition+"\",\""+HouseIdCondition+"\");'>"+
                                          "</div>";
                $("#month_cost_table_div").append(updateSuccessDialog);
            }
        }
    });
}

6.演示

步骤一、启动项目后访问网站点击“查看房租”

(这里是登录后的页面)

结果：

步骤三、点击第二条数据准备修改

       我这里是直接获取此条的数据并显示到新的div中的，这个过程没有经过服务器，因为显示表数据的时候我把每一条数据的每个字段都赋值了不同的id，这个动态赋值id过程是动态的。点击修改标签的时候获取这个id的值，这个id表示所选的修改标签是当前第 n 行(n从0开始)，知道这个行数号通过js代码可获得这一行的数据。

       还有，这个新的div会伴随点击上一页下一页取消按钮后会消失；点击其他行的修改标签会先消失再出现新的不同数据的div。

修改数据：

这里原本是要修改网费后，月总金额是要动态增加网费的，这里就没做了，不过这里的网费不可以是负数。

点击确定按钮：

新的div被替换，并且提示修改成功，右侧XHR多个一个update数据，右下角的url可以看到提交的方法路径。

这个提示div会伴随点击上一页下一页取消按钮其他行的修改标签后会消失；

这个时候不点击确定按钮的话，数据表第二条数据的网费依旧是0，因为没有刷新页面，要点击确定按钮后才能刷新当前的数据。

查看数据库相关数据：

修改前：

修改后刷新数据表：

点击提示div中的确定按钮：

刚修改的第二条数据的网费字段为10，右侧XHR多了一条数据，因为重新刷新当前页的数据一次。

难度增加

带条件查找后显示第n+1页数据(n从1开始)

我们输入租客名字——哈哈，查找表中房客姓名含“哈哈”的房客数据：

我们点击下一页查看：

右侧多了条XHR

我们选择第一条数据进行修改：

这里网费修改15

点击确定按钮：

多了条XHR

再次点击确定按钮：
       右侧仅仅多了一条XHR，系统并没有把租客名字的条件内容去掉，并且用户在修改后无需从首页进入到第二页才看到修改的数据，系统是直接显示当前页，用户能直接就看到修改的数据了。

测试多条查询数据后并成功进行修改操作后页面显示

这里在原来的条件基础上再加一个房号，这里选择B103。

点击搜索按钮后：

查询到了一条数据，右侧多了一条XHR

进行修改操作：

点击确定按钮进行：

右侧依旧多了一条XHR

再次点击按钮：

页面依旧保留了含条件查询后的数据页面，右侧也是仅仅多了条XHR数据，刷新了当前数据显示。

最后

       我这里业务上是没有删除操作的，如果是要进行删除操作，有一个情况是，在删除第 n 页(n >= 2)的最后一条数据时，成功删除后要让系统显示首页或其他有数据的分页，如果不这么做得话，有可能会出现这种情况：比如删除第二页数据后，前端继续显示第二页数据，但第二页已经没有数据了，会导致前端显示无数据。