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">
業務管理 -> 每月房租
</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="搜索">
<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> 房客姓名 </label>"+"<input id='update_booker_name' type='text' readonly style='background-color: #93D1FF;width: 70px;'/>"+
" 房間號 "+"<input id='update_house_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
" 記錄房租時間 "+"<input id='update_yearsMonth_id' type='text' readonly style='background-color: #93D1FF;width: 100px;'/>"+
"<br/>"+"<br/>"+
" 月租金 "+"<input id='update_rent_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
" 水錶數 "+"<input id='update_waterMeter_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
" 電錶數 "+"<input id='update_powerMeter_id' type='text' readonly style='background-color: #93D1FF;width: 50px;'/>"+
"<br/>"+"<br/>"+
" 網費 "+"<input id='update_network_id' type='text' style='width: 50px;'/>"+
" 月總金額 "+"<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)'/>"+" "+
"<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)的最後一條數據時,成功刪除後要讓系統顯示首頁或其他有數據的分頁,如果不這麼做得話,有可能會出現這種情況:比如刪除第二頁數據後,前端繼續顯示第二頁數據,但第二頁已經沒有數據了,會導致前端顯示無數據。