JS-實現上一題下一題切換功能


業務背景：某個數據列表需要對其中的每行數據進行詳細信息修改配置。爲了提升用戶體驗，需要在用戶觸發單條任務記錄詳細配置界面之後添加進入上一題和下一題的操作。
實現構思：
	有兩種辦法：第一種簡單點的話就是不去數據庫實時查詢數據，利用已經在列表中的數據信息進行數據切換展示與修改。
				第二種辦法稍微麻煩一點，數據切換的時候實時rownum去數據庫查詢定位當前數據行的index，然後切換--|++index。
	目前採用的是第一種方案：利用已經分頁好的數據，提供僅在當前界面中顯示的數據上下行數據的切換。

實現思路：
	1. 預設JS公共對象，var list;
		預設JS公共index，var index = 0;
	2. 數據初始化完成之後以index爲list對象的一級key，分別將列表數據拼裝初始化進入list對象。
		格式如下：
			list = {
				0:{
					key:"",
					value
				},
				1:{
					key:"",
					value
				}
				n:{
					key:"",
					value
				}
			}
		說明一下：
			在當前的業務場景中：
				若數據在業務條件滿足的情況下：列表數據可以進行詳情編輯。
						若業務條件不滿足的情況下：列表是不提供詳情編輯的；
			所以在這種場景下數據拼裝的時候有一個優勢：不必擔心有垃圾冗餘數據插入到公共對象中，所有插入的數據都是可編輯的數據。也就是說如果解決了公共索引實時獲取的問題，那麼上下行數據的切換將非常簡單。

			實時公共索引的獲取：
				1.在數據拼裝的時候，在數據列中預設隱藏域，[id+index|value]都拼裝成動態的。
				2.在數據列表初始化完成之後，此時初始化公共對象數據初始化的接口，便能夠將數據列表中已確認可以修改的所有行級數據都拼裝進入list公共對象中。

	3. 在數據列表觸發進入詳情編輯界面的時候，獲取當前行級數據隱藏於中的id，截取id的index進行上下題執行鍵的處理，然後將index賦值到公共index對象。
	4. 剩下上下題的切換只需要++|--即可以完成！

代碼如下：

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

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="/xx.css"/>
<script src="<%=request.getContextPath()%>/plugins/jquery/jquery.min.js"></script>

<script type="text/javascript">
	
	/**
	* 公共變量設定！
	* ndate：時間對象獲取！
	* year|new_year：當前年時間獲取！
	* month：當前月時間獲取！
	* last_year：上一年|去年時間處理！
	* last_l_year：去年的去年時間處理！
	* 
	* initEmp_list!
   	* list：初始化域值數據對象！
   	* index：初始化當前域值對象key!
	*/
   	var ndate = new Date();
   	var year = ndate.getFullYear(); 
   	var new_year = year;
   	var last_year = year - 1 ;
   	var last_l_year = year - 2 ;
   	var month = ndate.getMonth() + 1; 

	var list;
	var index = 0;	
   	
	// init.
	$(function(){
    	
    	
    	/**
    	* 狀態參數欄數據初始化！
    	* month_id：月度數據初始化！
    	* yearOptionInit()：年度數據初始化！
    	* startsIdOptionInit()：一級界面-審覈結果-初始化！
    	* startsIdInsidOptionInit()：二級界面-審覈結果-初始化！（模態窗）
    	*/
    	yearOptionInit(); // 年度數據初始化！
    	startsIdOptionInit(); // 一級界面-審覈結果-初始化！
    	startsIdInsidOptionInit(); // 二級界面-審覈結果-初始化！（模態窗）
    	list = window.list = {};
	
    	$("#month_id").empty();
    	$("#month_id").append("<option selected='selected' value='1'>1月</option><option value='2'>2月</option><option value='3'>3月</option><option value='4'>4月</option><option value='5'>5月</option><option value='6'>6月</option><option value='7'>7月</option><option value='8'>8月</option><option value='9'>9月</option><option value='10'>10月</option><option value='11'>11月</option><option value='12'>12月</option>"); 
    	
    	/**
    	* 域參數獲取。
    	* y：年度參數獲取！
    	* m：月度參數獲取！
    	* AGENCY_ID：經銷商編號參數獲取！
    	* status：狀態參數獲取！
    	*/
		var y = '${pd.YEAR}';
		var m = '${pd.MONTH}';
		var AGENCY_ID = '${pd.AGENCY_ID}';
		var status = '${pd.status}';
		
		/**
		* option對象獲取！
		* y_option：年份！
		* m_option：月份！
		* starts_option：一級界面-審覈結果！
		*/
		var y_option = document.getElementById("year_id");
		var m_option = document.getElementById("month_id");
		var starts_option = document.getElementById("starts_id");
		
		/**
		* option對象緩存數據回顯！
		* 
		* y_option：年度！
		* m_option：月度！
		* starts_option：一級界面-審覈結果！
		* k：k！
		*/
		for(var i=0;i<y_option.length;i++){
        	if(y_option[i].value==y)
            y_option[i].selected = true;
    	}
    	
    	if(m == ""){
			for(var i=0;i<m_option.length;i++){
	        	if(m_option[i].value== month)
	            m_option[i].selected = true;
	    	}
    	}else{
			for(var i=0;i<m_option.length;i++){
	        	if(m_option[i].value==m)
	            m_option[i].selected = true;
	    	}
    	}
    	
		for(var i=0;i<starts_option.length;i++){
        	if(starts_option[i].value==status)
            starts_option[i].selected = true;
    	}
    	
    	$("#k").val(v);
		
	});
	
   	// 年度數據初始化!
	function yearOptionInit(){
    	$("#year_id").empty();
    	$("#year_id").append("<option selected='selected' value='"+new_year+"'>"+new_year+"年</option>"); 
    	$("#year_id").append("<option value='"+last_year+"'>"+last_year+"年</option>"); 
    	$("#year_id").append("<option value='"+last_l_year+"'>"+last_l_year+"年</option>"); 
	}

   	// 一級界面-審覈結果-初始化！
	function startsIdOptionInit(){
    	$("#starts_id").empty();
    	$("#starts_id").append("<option selected='selected' value='0'>全部</option>"); 
    	$("#starts_id").append("<option value='3'>待定</option>"); 
    	$("#starts_id").append("<option value='1'>一致</option>"); 
    	$("#starts_id").append("<option value='2'>不一致</option>"); 
	}
	
	// 二級界面-審覈結果-初始化！（模態窗）
	function startsIdInsidOptionInit(){
    	$("#starts_id_insid").append("<option selected='selected' value='0'>未審覈</option>"); 
    	$("#starts_id_insid").append("<option value='3'>待定</option>"); 
    	$("#starts_id_insid").append("<option value='1'>一致</option>"); 
    	$("#starts_id_insid").append("<option value='2'>不一致</option>"); 
	}
	
	/**
	* starts_option：審覈結果-option對象獲取！
	* starts_value：審覈結果-value值！
	*/
	function getSecond_SHJG(){
		var starts_option = document.getElementById("starts_id_insid");
		return starts_option.options[starts_option.selectedIndex].value; 
	}
	
	// y_option：年份！
	function getYOption(){
		var y_option = document.getElementById("year_id");
		return y_option.options[y_option.selectedIndex].value; 
	}

	// m_value：月份!
	function getMOption(){
		var m_option = document.getElementById("month_id");
		return m_option.options[m_option.selectedIndex].value; 
	}
	
	// A1樣式單開！
	function A1(){
		// 設置[上一題]-button-樣式！
		$("#ThePrev").css("display", "none");
		/* $("#ThePrev").css("color", "#7B7C7C"); document.getElementById("ThePrev").setAttribute("disabled", true); */
		// 恢復[下一題]-button-樣式！
		$("#TheNext").css("display", "inline-block");
		/* $("#TheNext").css("color", "inline-block"); document.getElementById("TheNext").removeAttribute("disabled"); */
	}
	
	// B1樣式單開！
	function B1(){
		// 設置[下一題]-button-樣式！
		$("#TheNext").css("display", "none");
		/* $("#TheNext").css("color", "#7B7C7C"); document.getElementById("TheNext").setAttribute("disabled", true); */
		// 恢復[上一題]-button-樣式！
		$("#ThePrev").css("display", "inline-block");
		/* $("#ThePrev").css("color", "black"); document.getElementById("ThePrev").removeAttribute("disabled"); */
	}
	
	// 雙開！
	function rollBackCss(){
		// 恢復[上一題]-button-樣式！
		$("#ThePrev").css("display", "inline-block");
		/* $("#ThePrev").css("color", "black"); document.getElementById("ThePrev").removeAttribute("disabled"); */
		// 恢復[下一題]-button-樣式！
		$("#TheNext").css("display", "inline-block");
		/* $("#TheNext").css("color", "black"); document.getElementById("TheNext").removeAttribute("disabled"); */
	}
	
	// 關閉！
	function clossAB(){
		// 設置[上一題]-button-樣式！
		$("#ThePrev").css("display", "none");
		/* $("#ThePrev").css("color", "#7B7C7C"); document.getElementById("ThePrev").setAttribute("disabled", true); */
		// 設置[下一題]-button-樣式！
		$("#TheNext").css("display", "none");
		/* $("#TheNext").css("color", "#7B7C7C"); document.getElementById("TheNext").setAttribute("disabled", true); */
	}
	
	// 上一題！
	function ThePrev(){
		index = --index;
		if(index == 0){ 
			A1(); 
		}else{ 
			rollBackCss(); 
		}
		ModelSetData(list[index].k,list[index].v);
	}
	
	// 下一題！
	function TheNext(){
		index = ++index;
		if(index == Object.keys(list).length-1){ 
			B1(); 
		}else{ 
			rollBackCss(); 
		}
		ModelSetData(list[index].k,list[index].v);
	}
	
	/**
	* 數據初始化！
	*/
	function ModelSetData(k,v){
		$("#k").attr("src","../sign/toShowPhoto?PHOTO_ID="+jzQ_id);
		$("#v").attr("src","../month/toShowPhoto?AWARD_ID="+ydQ_id);
	}
	
	
	// 二級界面-取消|關閉事件！
	function closeSubB(){ $('#myModal').modal('hide'); }

	/**
	*  獲取公共對象表索引！
	* index：當前對象指向的索引!
	*/ 
	function thisEmp_Key(key){
		index = key.slice(-1); 
		// First_Data!
		if(list[Object.keys(list)[0]].key == key && list[Object.keys(list).length-1].key != key){ A1(); }
		
		// Last_Data!
		if(list[Object.keys(list).length-1].key == key && list[Object.keys(list)[0]].key != key){ B1(); }
		
		// First|Last_Data!
		if(list[Object.keys(list)[0]].key == key && list[Object.keys(list).length-1].key == key){ clossAB(); }
		
		// Among_Data!
		if(list[Object.keys(list)[0]].key != key && list[Object.keys(list)[Object.keys(list).length-1]].key != key){ rollBackCss();  }
	}

	// 列表數據對象化！
	function initEmp_list(){
		var this_key;
		var x = 0;
		var key,v;
		for(var k=0;k<10;k++){
			this_key = "k" + k;
			key = $("#k"+k).val();
			v = $("#v"+k).val();
			if(EMP_ID != undefined){
				list[x] = {};
				list[x].key = this_key;
				list[x].EMP_ID = key;
				list[x].v = v;
				x++;
			}
		}
	}

</script>

</head>
<body>

    <div class="#">

        <div class="oneHW">
        	xxxxx
    	</div>
        	
    	<div class="ohd upStatus">
        	<button class="First_B" οnclick="closeSubB();"><span>取消</span></button>
        	<button class="First_B" id="TheNext" οnclick="TheNext();"><span>下一題</span></button>
        	<button class="First_B" id="ThePrev" οnclick="ThePrev();"><span>上一題</span></button>
    	</div>
        
    </div>

	<form action="xxx.do" name="Form" id="Form" method="post">
		<table class="#" width="" border="1" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<td width="40" align="center" bgcolor="#"><strong><font color="#">序號</font> </strong></td>
					<td><strong><font color="#">aa</font></strong></td>	
					<td><strong><font color="#">bb</font></strong></td>	
					<td><strong><font color="#">cc</font></strong></td>			
				</tr>
			</thead>
			<tbody>
                <c:choose>
                    <c:when test="${not empty list}">
                        <c:forEach items="${list}" var="var" varStatus="vs">
                            <tr>
                               <td>aa</td>
                               <td>bb</td>
                               <td>
                               		<c:if test="${var.cc == ''}">NULL DATA</c:if>
                               		<c:if test="${var.cc != ''}">
                               			<c:if test="${var.dd != ''}">
                                       		<c:if test="${var.STATUS == 0}">
    					   						<input type="hidden" id="k${vs.index}" value="k"/>
    					   						<input type="hidden" id="v${vs.index}" value="${var.v}"/>
                                       			<a href="javascript:{showModel('${var.k}','${var.v}');
                                       			thisEmp_Key('k'+'${vs.index}');}">xxx</a>
                                       		</c:if>
                                       		<c:if test="${var.STATUS == 1}">
    					   						<input type="hidden" id="k${vs.index}" value="k"/>
    					   						<input type="hidden" id="v${vs.index}" value="${var.v}"/>
                                       			<a href="javascript:{showModel('${var.k}','${var.v}');
                                       			thisEmp_Key('k'+'${vs.index}');}">xxx</a>
                                       		</c:if>
                                       		<c:if test="${var.STATUS == 2}">
    					   						<input type="hidden" id="k${vs.index}" value="k"/>
    					   						<input type="hidden" id="v${vs.index}" value="${var.v}"/>
                                       			<a href="javascript:{showModel('${var.k}','${var.v}');
                                       			thisEmp_Key('k'+'${vs.index}');}">xxx</a>
                               				</c:if>
                               			</c:if>
                               		</c:if>
                               </td>
                            </tr>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <tr class="main_info">
                            <td colspan="100" class="center" >沒有相關數據</td>
                        </tr>
                    </c:otherwise>
                </c:choose>
			</tbody>
		</table>
	</form>

	<script type="text/javaScript">
		
		/** initEmp_list()：初始化數據對象賦值映射！*/
		$(function(){
			initEmp_list();
		});
	
	</script>
</body>
</html>

JS-實現上一題下一題切換功能

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

JS-實現上一題下一題切換功能

JavaScript-var、let、const三者的區別

CSS-button添加display:block;屬性後自動換行！

windows安裝oracle11G常見問題

Excel凍結窗格

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結