js单项选择答题_完成窗口切换的方法

js单项选择答题_完成窗口切换的方法业务背景:系统有一个数据列表,其中的每行数据都可以进行详细信息修改配置。为了提升用户体验,需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作。实现构思: 有两种办法:第一种简单点的话就是不去数据库实时查询数据,利用已经在列表中的数据信息进行数据切换展示与修改。 第二种办法稍微麻烦一点,数据切换的时候实时rownum去数据库查询定位当前数据行的index,然后切换…

大家好,又见面了,我是你们的朋友全栈君。


业务背景:某个数据列表需要对其中的每行数据进行详细信息修改配置。为了提升用户体验,需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作。
实现构思:
	有两种办法:第一种简单点的话就是不去数据库实时查询数据,利用已经在列表中的数据信息进行数据切换展示与修改。
				第二种办法稍微麻烦一点,数据切换的时候实时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" onclick="closeSubB();"><span>取消</span></button>
        	<button class="First_B" id="TheNext" onclick="TheNext();"><span>下一题</span></button>
        	<button class="First_B" id="ThePrev" onclick="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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124998.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 空指针赋值(指针赋值有几种方法)

    空指针赋值上学期刚学C语言的时候很迷,老师说要避免野指针,但是空指针似乎又没办法赋值,就只好尽量减少指针的使用。今天查了一下发现是这样赋值的:先把要赋值的变量的地址赋给空指针,然后才能把变量的值赋给该指针。 e=&L.list[i-1]; *e=L.list[i-1];e是之前定义的一个空指针…

  • SwipeRefreshLayout 使用

    SwipeRefreshLayout 使用SwipeRefreshLayout使用v4包下SwipeRefreshLayout支持listView,webView,scrollView,recyclerView等在布局中使用SwipeRefreshLayout将需要下拉刷新的控件包裹。当这些控件滑动到边缘时会触发SwipeRefreshLayout.onRefresh();到此便完成了一次下拉刷新的操作。使用如下方法改变划出的

  • BZOJ-9-3295: [Cqoi2011]动态逆序对[通俗易懂]

    BZOJ-9-3295: [Cqoi2011]动态逆序对[通俗易懂]BZOJ-9-3295: [Cqoi2011]动态逆序对

  • CSS面试题

    CSS面试题1.有哪些方式(CSS)可以隐藏页面元素?1.opacity:0本质是将元素的透明度降为0,看起来是隐藏了,但是依然占据空间2.visibility:hidden占据空间3.display:none彻底隐藏元素,元素从文档流中消失,不占据空间4.z-index:-9999原理是将层级放到底部,看起来是隐藏了5.overflow:hidden这个只是隐藏元素溢出的部分6.transform:scale(0,0)将元素缩放为0,但是依然占据空间2.em\px\rem区别?Px:绝对

  • vs2010sp1安装未成功_c++2005怎么安装

    vs2010sp1安装未成功_c++2005怎么安装vs2005sp1安装失败是经常的事情。当发生这样的时候后,经过如下操作即可成功安装。第一步:1.单击“开始”,单击“运行”,键入secpol.msc,然后单击“确定”。2.双击“本地安全策略”。3.单击“软件限制策略”。注意:如果未列出软件限制,请右击“软件限制策略”,然后单击“新建策略”。4.在“对象类型”下,双击“强制”。5.单击“除本地管理员以外的所有…

  • 画平行线的三种方法_平行线的画法五种视频

    画平行线的三种方法_平行线的画法五种视频《平行线的画法》教学反思教师在教学中要善于利用小组合作学习,充分调动了同学们的积极性。接下来由小编整理了《平行线的画法》教学反思,欢迎查看,希望帮助到大家。《平行线的画法》教学反思【1】每到学习平行线的画法,总有学生学起来感到困难,用尺子移来移去,实在太麻烦,而且学生在以后也不容易记住。正是基于这样的认识画平行线的教学只能由教师传授给学生,他们也只能是机械的模仿,也就是简单的完成操作工的活动,但是…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号