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