1. 全栈程序员必看首页

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

全栈程序员-用户IM • • 未分类

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)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • vs2010 序列号 真的好用 vs2008 序列号

    vs2010 序列号 真的好用 vs2008 序列号

    vs2010 序列号 真的好用 vs2008 序列号用VS2008有些日子，刚刚才发现AboutMVS是有天数限制的（90），郁闷，只好在网上找序列号，不错，把刚刚找到的VS2008可升级序列号发给大家。1.VisualStudio2008ProfessionalEdition:XMQ2Y-4T3V6-XJ48Y-D3K2V-6C4WT2.VisualStu…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月10日
  • DB9串口和RJ45串口

    DB9串口和RJ45串口

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

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月8日
  • python：Unittest单元测试框架「建议收藏」

    python：Unittest单元测试框架「建议收藏」

    python：Unittest单元测试框架「建议收藏」​单元测试1、单元测试(unittesting)，是指对软件中的最小可测试代码单元进行检查和验证⑴是针对于代码的一种测试方法，测试的是代码2、对于”代码单元”中单元的含义，一般来说，要根据实际情况去判定其具体含义：⑴如C语言中单元指一个函数、Java里单元指一个类、图形化的软件中可以指一个窗口或一个菜单等⑵单元可以是一个函数、方法、类、功能模块或者子系统⑶总的来说，单元就是人为规定的最小的被测功能模块3、单元测试针对的是每一个独立的代码单元，代码单元应不…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月14日
  • 一文解决，oracle显示ORA-01017

    一文解决，oracle显示ORA-01017

    一文解决，oracle显示ORA-01017首先在网上拷贝scott.sql文件内容（新建记事本，在改后缀.sql）下载scott.sql(数据库文件）再拷到虚拟机中，随意放一个位置（自己记住就好）我放的位置是：/home/oracle不知道位置的可以用：输入pwd命令查看位置或者右键查看然后我们进入sqlsqlplus/assysdbaconn/assysdba在导入scott.sql…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月18日
  • Java死锁排查和Java CPU 100% 排查的步骤整理和OOM FullGc案例

    Java死锁排查和Java CPU 100% 排查的步骤整理和OOM FullGc案例

    工欲善其事，必先利其器简介本篇整理两个排查问题的简单技巧，一个是java死锁排查，这个一般在面试的时会问到，如果没有写多线程的话，实际中遇到的机会不多；第二个是java cpu 100%排查，这个实际的开发中，线的应用出现这个问题可能性比较大，所以这里简单总结介绍一下，对自己学习知识的一个整理，提高自己的解决问题能力。一、Java死锁排查通过标题我们就要思考三个问题…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年2月27日
  • 华为手机切换屏幕效果_华为p40页面切换效果怎么换

    华为手机切换屏幕效果_华为p40页面切换效果怎么换

    华为手机切换屏幕效果_华为p40页面切换效果怎么换通过style自定义Activity切换动画在华为上失效问题

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月22日

发表回复

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

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