2. 程式人生 > >一個頁面實現修改刪除列表顯示，ajax動態生成table(使用ajax，springmvc，jsp)

一個頁面實現修改刪除列表顯示，ajax動態生成table(使用ajax，springmvc，jsp)

阿新 • • 發佈：2019-01-20

先看效果：


點選儲存使用ajax儲存當前表資料，返回一個table格式的html，替換掉頁面上的table（已新增的教育經歷）。

JSP主要程式碼：

<div class="container"  style="width: 100%;">
		<div class="row mg15">
			<div class="mainbox_C_C">
				<div class="setupBox">
	      			<div class="setItems">
	      				<div class="setFold setUnfold" rel="base">
	              			<h2>教育經歷</h2>
	            		</div>
            			<div class="setItemsInfo">
							<div id="personal_education" >
								<h6 style="color: #191919;font-size: 100%;font-weight: bold;">已新增的教育經歷：</h6>
								<div id="data-table-education" class="data-table">
									<table>
										<thead>
											<tr>
												<th data-property='beginDate'>開始時間</th>
												<th data-property='endDate'>結束時間</th>
												<th data-property='school'>學校</th>
												<th data-property='major'>專業</th>
												<th data-property='description'>描述</th>
												<th class='data-action'>操作</th>
											</tr>
										</thead>
										<c:forEach items="${educations }" var="eh" varStatus="status">
										<tr id="${eh.objectId }">
											<td>${fn:substringBefore(eh.beginDate, ' ')}</td>
											<td>${fn:substringBefore(eh.endDate, ' ')}</td>
											<td>${eh.school }</td>
											<td>${eh.major }</td>
											<td>${eh.description }</td>
											<td>
												<a class='action-delete' title='刪除' href='${dynamicDomain}/member/deleteTr/1/${eh.objectId }'></a>
												<a class='action-update' title='更新' href='#'></a>
											</td>
										</tr>
										</c:forEach>
									</table>
								</div>
								<h6 style="color: #191919;font-size: 100%;font-weight: bold;">教育經歷</h6>

								<form action="${dynamicDomain}/member/savePersonalEH" method="post" accept-charset="utf-8" class="horizontal-form validator_form" id="personal_education_form">
									<div class="a_info_form">
										<input type="hidden" id="userId" name="userId" value="${user.objectId }"/>
										<div class="input-group" >
								        	<label for="beginDate">開始時間<span>*</span></label>
									        <div class="inputs">
									        	<input type="text" id="beginDate" name="beginDate" class="a_input_width2" readonly="readonly" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}',readOnly:true})" />    
									      		<span class="input-error"><div id="beginDateTip"></div></span>
									        </div>
										</div>
								      	<div class="input-group" >
									        <label for="endDate">結束時間<span>*</span></label>
									        <div class="inputs">
									        	<input type="text" id="endDate" name="endDate" class="a_input_width2" readonly="readonly" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beginDate\')}',readOnly:true})" />    
												 <span class="input-error"><div id="endDateTip"></div></span>
											</div>
									    </div>
								      	<div class="input-group" >
									        <label for="school">學校<span>*</span></label>
									        <div class="inputs">
										         <input id="school" name="school" type="text" maxlength="50" />
												 <span class="input-error"><div id="schoolTip"></div></span>
											</div>
									    </div>
									 	<div class="input-group">
									        <label for="major">專業<span>*</span></label>
									        <div class="inputs">
									   			<input id="major" name="major" type="text" maxlength="50"/>
									      		<span class="input-error"><div id="majorTip"></div></span>
									  		</div>
									 	</div>
										<div class="input-group">
									        <label for="description">描述<span>*</span></label>
									        <div class="inputs">
									    		<textarea id="description" name="description"  ></textarea>
									        	<span class="input-error"><div id="descriptionTip"></div></span>
									      	</div>
									    </div>
									</div>
									<div class="form-submit" style="text-align: left;">
										<button id="user_education_button" class="btn-icon submit all_submit_btn a_person_info_button" type="button">儲存</button>
									</div>
								</form>
							</div>
    					</div>
    				</div>
	       			<div class="c"></div>
	        	</div>
	        </div>
		</div>
		<div id="dialog-confirm" title="刪除確認項">
		 	<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>你確定要刪除這個選項嗎?</p>
		</div>
				
	</div>
	  <script type="text/javascript">
  $(function(){
      $('.action-update').live('click',function(){
        var trid = $(this).parent('td').parent('tr').attr('id');
        var updateurl = $(this).attr('href');
        $('#beginDate').attr('value',$(this).parent('td').siblings('td').eq(0).text());
        $('#endDate').attr('value',$(this).parent('td').siblings('td').eq(1).text());
        $('#school').attr('value',$(this).parent('td').siblings('td').eq(2).text());
        $('#major').attr('value',$(this).parent('td').siblings('td').eq(3).text());
        $('#description').attr('value',$(this).parent('td').siblings('td').eq(4).text());

        $('#user_education_button').attr('data-id',trid);
        return false;
      });
     $('#user_education_button').click(function(){
        var data;
        if($(this).attr('data-id')){
          data = {  
                    action:'update',
                    objectId:$(this).attr('data-id'),
                    userId:$('#userId').val(),
                    school:$('#school').val(),
                    user_beginDate:$('#beginDate').val(),
                    user_endDate:$('#endDate').val(),
                    major:$('#major').val(),   
                    description:$('#description').val()
                };
        }else{
          data = {
        		  	userId:$('#userId').val(),
                    school:$('#school').val(),
                    user_beginDate:$('#beginDate').val(),
                    user_endDate:$('#endDate').val(),
                    major:$('#major').val(),   
                    description:$('#description').val()                 
                 };
        }
        $.ajax({
          url:$('#personal_education_form').attr('action'),
          type:'POST',
          data:data,
          success:function(data){
            if(data){
              $("#data-table-education").html(data);
              $('#school').val('');
              $('#beginDate').val('');
              $('#endDate').val('');
              $('#major').val(''); 
              $('#description').val('');  
              $("#user_education_button").removeAttr('data-id');
              $( "#personal_education_form" ).before('<div class="notification success png_bg"> <a href="#" class="close"><img src="http://www.50jin.com/application/templates/default/images/icons/cross_grey_small.png" title="Close this notification" alt="close"></a><div>儲存內容成功！ </div></div>');
              $(".notification").fadeOut(5000);
            }else{
              $( "#personal_education_form" ).before('<div class="notification notification-error png_bg"> <a href="#" class="close"><img src="http://www.50jin.com/application/templates/default/images/icons/cross_grey_small.png" title="Close this notification" alt="close"></a><div>你填寫的內容不符合要求或者沒有更新資料，儲存失敗！ </div></div>');
              $(".notification").fadeOut(5000);
            }
            $("#user_education_button").removeAttr('data-id');
          }
        })
      })
      
  })
  </script>
這個方法，用來點選修改按鈕時，給下方的輸入表單賦值。並且給“儲存”按鈕加一個data-id的屬性。
 $('.action-update').live('click',function(){
        var trid = $(this).parent('td').parent('tr').attr('id');
        var updateurl = $(this).attr('href');
        $('#beginDate').attr('value',$(this).parent('td').siblings('td').eq(0).text());
        $('#endDate').attr('value',$(this).parent('td').siblings('td').eq(1).text());
        $('#school').attr('value',$(this).parent('td').siblings('td').eq(2).text());
        $('#major').attr('value',$(this).parent('td').siblings('td').eq(3).text());
        $('#description').attr('value',$(this).parent('td').siblings('td').eq(4).text());

        $('#user_education_button').attr('data-id',trid);
        return false;
      });
點選儲存時，根據data-id是否存在，判斷是新增還是修改記錄。

點選刪除按鈕的js，放在公共的js外部檔案中，因為可以公用。還有關閉提示框的js也可以公用，都放在一起了。如下：

$(function(){
	$(".close").live('click',function () {
		
				$(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
					$(this).slideUp(400,function(){
						$('.notification ').remove();
					});
					
				});
				
				return false;
			}
		);
		
	$('tbody tr:even').addClass("alt-row"); // Add class "alt-row" to even table rows
	
	$('.action-delete').live('click',function(){
		var trid = $(this).parent('td').parent('tr').attr('id');
		var delurl = $(this).attr('href');
		
		$( "#dialog-confirm" ).dialog({
            resizable: false,
            height:170,
            modal: true,
            buttons: {
                "確定": function() {
                	$.ajax({
            			url:delurl,
            			type:'POST',
            			success:function(data){
           				 	$('#'+trid).hide("slow", function(){ $(this).remove(); });
            			}
            		})
                   
                    $( this ).dialog( "close" );
                },
                "取消": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
		return false;
	});

})


後臺程式碼：

進入頁面，給table設個list的值，遍歷顯示錶資料（也可以在jsp頁面，直接用load方法把table讀出來，方法在下面的ajaxTable）

	@RequestMapping(value = "educationHistory")
	public String educationHistory(HttpServletRequest request, HttpServletResponse response) throws Exception {
		User user = (User)request.getSession().getAttribute(SecurityConstants.SESSION_USER);
		request.setAttribute("user", user);
		request.setAttribute("educations", educationManager.getByUserId(user.getObjectId()));
		return "member/educationHistory";
	}

然後在jsp頁面點選“儲存”時，儲存一條記錄，跳到下面這個方法 
	@RequestMapping(value = "savePersonalEH")
	public String savePersonalEH(HttpServletRequest request, HttpServletResponse response,ModelMap modelMap,Education education) throws Exception {
		String user_beginDate = request.getParameter("user_beginDate");
		String user_endDate = request.getParameter("user_endDate");
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");   
        Date endDate = null;
        Date beginDate = null;
		try {
			beginDate = sdf.parse(user_beginDate);
			endDate = sdf.parse(user_endDate);
		} catch (ParseException e) {
			e.printStackTrace();
		}
		education.setBeginDate(beginDate);
		education.setEndDate(endDate);
		educationManager.save(education);
		return "redirect:/member/ajaxTable/1";
	}

在返回值裡重定向到了 member/ajaxTable/1這個方法裡，這個方法如下：
	@RequestMapping(value = "ajaxTable/{table}")
	public String ajaxTable(HttpServletRequest request, HttpServletResponse response,@PathVariable Integer table) throws Exception {
		User user = (User)request.getSession().getAttribute(SecurityConstants.SESSION_USER);
		if (table==TABLE_EDUCATION) {
			request.setAttribute("educations", educationManager.getByUserId(user.getObjectId()));
		}
		if (table==TABLE_WORK) {
			request.setAttribute("works", workHistoryManager.getByUserId(user.getObjectId()));
		}
		if (table==TABLE_CERTIFICATION) {
			request.setAttribute("certifications", certificationManager.getByUserId(user.getObjectId()));
		}
		return "member/ajaxTable";
	}
private static final int TABLE_EDUCATION = 1;
	private static final int TABLE_WORK = 2;
	private static final int TABLE_CERTIFICATION = 3;


這是分別可以處理“教育經歷”，“工作經歷”，“個人證書”的，看自己需求啦~這三個頁面都是這種佈局。

這個方法跳到member目錄下的ajaxTable.jsp檔案裡，這個檔案的html程式碼就是作為ajax的返回值。

ajaxTable.jsp：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<%@ taglib uri="framework" prefix="jdf" %>
<c:if test="${not empty educations }">
<table>
	<thead>
		<tr>
			<th data-property='beginDate'>開始時間</th>
			<th data-property='endDate'>結束時間</th>
			<th data-property='school'>學校</th>
			<th data-property='major'>專業</th>
			<th data-property='description'>描述</th>
			<th class='data-action'>操作</th>
		</tr>
	</thead>
	<c:forEach items="${educations}" var="eh" varStatus="status">
	<tr id="${eh.objectId }">
		<td>${fn:substringBefore(eh.beginDate, ' ')}</td>
		<td>${fn:substringBefore(eh.endDate, ' ')}</td>
		<td>${eh.school }</td>
		<td>${eh.major }</td>
		<td>${eh.description }</td>
		<td>
			<a class='action-delete' title='刪除' href='${dynamicDomain}/member/deleteTr/1/${eh.objectId }'></a>
			<a class='action-update' title='更新' href='#'></a>
		</td>
	</tr>
	</c:forEach>
</table>
</c:if>
<c:if test="${not empty works }">
<table>
	<thead>
		<tr>
			<th data-property='beginDate'>開始時間</th>
			<th data-property='endDate'>結束時間</th>
			<th data-property='company'>公司</th>
			<th data-property='type'>公司性質</th>
			<th data-property='size'>公司規模</th>
			<th data-property='industry'>行業</th>
			<th data-property='department'>部門</th>
			<th data-property='title'>職位</th>
			<th data-property='description'>工作描述</th>
			<th class='data-action'>操作</th>
		</tr>
	</thead>
	<c:forEach items="${works}" var="wh" varStatus="status">
	<tr id="${wh.objectId }">
		<td>${fn:substringBefore(wh.beginDate, ' ')}</td>
		<td>${fn:substringBefore(wh.endDate, ' ')}</td>
		<td>${wh.company }</td>
		<td><jdf:columnValue dictionaryId="1001" value="${wh.type }" /></td>
		<td><jdf:columnValue dictionaryId="1002" value="${wh.size }" /></td>
		<td>${wh.industry }</td>
		<td>${wh.department }</td>
		<td>${wh.title }</td>
		<td>${wh.description }</td>
		<td>
			<a class='action-delete' title='刪除' href='${dynamicDomain}/member/deleteTr/2/${wh.objectId }'></a>
			<a class='action-update' title='更新' href='#'></a>
		</td>
	</tr>
	</c:forEach>
</table>
</c:if>
<c:if test="${not empty certifications }">
<table>
	<thead>
		<tr>
			<th data-property='beginDate'>獲得時間</th>
			<th data-property='name'>證書名稱</th>
			<th data-property='score'>成績</th>
			<th data-property='description'>描述</th>
			<th class='data-action'>操作</th>
		</tr>
	</thead>
	<c:forEach items="${certifications}" var="c" varStatus="status">
	<tr id="${c.objectId }">
		<td>${fn:substringBefore(c.beginDate, ' ')}</td>
		<td>${c.name }</td>
		<td>${c.score }</td>
		<td>${c.description }</td>
		<td>
			<a class='action-delete' title='刪除' href='${dynamicDomain}/member/deleteTr/3/${c.objectId }'></a>
			<a class='action-update' title='更新' href='#'></a>
		</td>
	</tr>
	</c:forEach>
</table>
</c:if>

還有刪除按鈕的後臺程式碼： 
@RequestMapping(value = "deleteTr/{table}/{objectId}")
	public String deleteTr(HttpServletRequest request, HttpServletResponse response,ModelMap modelMap,@PathVariable Integer table,@PathVariable Long objectId) throws Exception {
		if (table==TABLE_EDUCATION) {
			educationManager.delete(objectId);
		}
		if (table==TABLE_WORK) {
			workHistoryManager.delete(objectId);
		}
		if (table==TABLE_CERTIFICATION) {
			certificationManager.delete(objectId);
		}
		modelMap.addAttribute("result", true);
		return "jsonView";
	}


最後看看效果：

點選修改按鈕時，表單出現資訊：

儲存之後，用chrome檢視返回的資料如下：



儲存成功之後：


點選刪除按鈕：


———————————————————————————————————————————————————————————————————————————

其他思路：

現在做的是點選儲存，就重新載入一個完整的table。

我覺得也可以單行操作，使用insertRow()和deleteRow()方法。

可以參考W3C：

我們原本的點選修改按鈕的js不用變，新增的時候，呼叫insertRow方法，可以使用ajax的datatype為json，從後臺傳一個物件把物件放到table裡。

插入新行：


刪除一行：


相關推薦

一個頁面實現修改刪除列表顯示，ajax動態生成table(使用ajax，springmvc，jsp)

先看效果： 點選儲存使用ajax儲存當前表資料，返回一個table格式的html，替換掉頁面上的table（已新增的教育經歷）。 JSP主要程式碼： <div class="container" style="width: 100%;"> <d

利用jquery.ajax在jsp頁面動態生成table，可以增加修改，並支持一行和多行刪除

分享 ica 圖片 PE sibling 多行 點擊 table 技術 聲明：此為本人原創，只想實現功能，界面樣式方面沒多考慮，很粗糙能看懂就行……2018-5-14 動態生成table，我利用jsp內嵌java代碼從後臺獲取對象集合，輸出的時候有2中方法 1.直接利用

用一個頁面實現增加和修改（設計實現）

<span style="font-family: SimSun; background-color: rgb(255, 255, 255);">首先，基於我工作中遇到的問題，我選擇每天寫幾篇文章總結知識點，希望可以每天進步一點點。</span> Q

一個頁面實現多個管理頁面任意切換

在做專案的時候，我們有時候會遇到一種需求，一個頁面有兩種資料來源，也就對應著兩個列表頁。但是你不想新建兩個頁面： 一、是因為新建頁面多了本來就麻煩； 二、是頁面之間跳轉感覺太明顯，使用者體驗不是很好

Android 實現資料的列表顯示

介面操作： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

JSP頁面實現批量刪除資料

危樓高百尺，手可摘星辰。 不敢高聲語，恐驚天上人。　—李白《夜宿山寺》 首次：FindServlet.java-->bookList.jsp 刪除：bookList.jsp-->DelServlet.java-->FindSe

jsp實現線上使用者列表顯示

在登陸後顯示還有哪些使用者線上，用一個列表顯示出來，算是完善了之前寫的程式碼的一個小功能吧，以後還會繼續。 一個是在LoginCheck的servlet裡面，把登陸成功的使用者用List的形式存進application裡 package servlet;

AJAX面試題：一個頁面實現增刪改查(ASP.NET實現)

【下載】 很多asp.net程式設計師面試的時候都遇到過用ajax效果實現一個頁面的增刪改查。這幾個例子分別用純JS,JQUERY及JSON實現。希望對大家有些幫助。 這裡面的例子表格內容的重新整理是直接返回GridView的HTML程式碼，其實這樣做並不是很好，但是程式碼

WordPress修改文章列表顯示摘要

用WordPress 3.8開的個人部落格longt.me，在主頁，分類頁，搜尋頁時均為全文，文章多了效果不太好，查了一下官方文件，修改為首頁顯示摘要，具體方法如下： 進入外觀-〉編輯，選擇conte

萬能js實現翻頁，動態生成內容自動翻頁，相容各種瀏覽器（已測試）----神器版！

要求：動態輸入內容，點選post生成內容條，實現自動翻頁！ 廢話不多說，直接上程式碼： js程式碼： var date=new Date(); var myDate=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFu

mysql修改刪除You can't specify target table for update in FROM clause的問題

you div code sql 語句 操作 查詢 重復數 -c sele 表中出現重復數據，需要刪除重復數據，只保留一條 DELETE FROM crm_participant WHERE id IN ( SELECT c.id cid F

jsp頁面根據json資料動態生成table

根據需求由於不同的表要在同一個jsp展示,點選某個表名便顯示某張表內容，對於java後臺傳給jsp頁面的json形式的資料是怎麼動態生成table的呢？ 找了好久，終於找到某位前輩的答案，在此表示衷心的感謝！ 做了部分調整，做下筆記，下面便是這個html的情況。 <

springBoot 日誌按天生成日誌檔案，以及配置生成HTTP 請求的日誌，列印引數（版本1.5.9）

日誌按天生成日誌檔案  logback-spring.xml   內容如下（放到application.properties 所在資料夾裡面）：  <?xml version="1.0" encoding="UTF-8"?> <configuration

微信小程式--(5-1)點選列表item，把item上面顯示的所有資料，傳遞到另外一個頁面

1,WXML頁面 其實很簡單，由於本人是小白，所以記錄一下。   <view class="item_width weui-pa" wx:for="{{itemsData}}" wx:key="">       <view class="weui-medi

愛創課堂每日一題第五十七天-一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麽？

前端 前端學習 前端入門 北京前端分為4個步驟： （1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。 （2）， 瀏覽器與遠程

一個頁面從輸入URL到頁面加載顯示完成，這個過程中發生了什麽？

域名服務器 tex -type 發送請求 頁面加載 異步 htm dns查詢 tcp 1.瀏覽器通過DNS查找域名對應的IP地址（DNS查詢：瀏覽器緩存-->系統緩存-->路由器緩存-->ISP DNS 緩存 -->根域名服務器） 2.瀏覽器向Web

MUI中點選推送訊息，若為同類型資訊，不關閉前一個頁面，開啟新頁面仍顯示前一個頁面資料的問題

最近公司在做的一個專案涉及個推推送，在寫推送過程中遇到了很多問題，現在把其中的一個問題與大家分享。 我們要實現的功能是後臺推送過來，我要根據推送的資訊型別進入不同的頁面，展現不同的資訊，但在寫的過程中發現同一種類型資訊，在不關閉前一條資訊的情況下，點選下一條同類型的資訊，開啟的頁面還是顯示上

多個頁面跳轉到一個頁面，每次跳轉顯示不一樣的內容，相同功能形式不同的jsp頁面整合成一個 根據傳遞的引數值來決定跳轉的jsp頁面該顯示什麼樣的內容，避免new多個jsp頁面，節省資源

在jsp開發過程中，會遇到這樣的情況； 一個頁面跳轉到另一個頁面，需要兩個jsp頁面； 如果有5、6種不同的一個頁面跳轉到另一個不同的jsp頁面的時候，基本的功能都差不多，類似的情況，如果建立很多的jsp，會導致資源浪費，還有就是建立多個jsp頁面到後來自己都有點暈； 那麼只需要在傳遞的

H5 分幀(frameset) 使用分幀寫一個頁面，可以實現點選聯動效果

需要兩個檔案： 檔案3.html <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8"

MUI如何實現返回頁面不重新整理，並獲取上一個頁面的返回值

MUI如何實現返回頁面不重新整理，並獲取上一個頁面的返回值      MUI中經常需要用到從當前頁面返回到上一個頁面，且不重新整理上一個頁面。   實現思路： 1.上一個頁面通過MUI的方式跳轉到當前頁面 2.當前頁面設定設定mu