动态显示表数据解决方案

最新推荐文章于 2022-12-23 23:59:43 发布

我的编程世界

最新推荐文章于 2022-12-23 23:59:43 发布

阅读量1.8k

点赞数

分类专栏：【综合问题】

本文链接：https://blog.csdn.net/a1314517love/article/details/18838909

版权

【综合问题】专栏收录该内容

78 篇文章 0 订阅

订阅专栏

首先介绍下背景，在我们的高校平台考试模块中有一种需求是显示题库中的试题，但是由于题库表不同于普通的Entity，他是动态创建的，也就是说表中的字段名是不固定的，表中字段的数目也是不固定的，显示出来的列的中文也是不固定的，但是我们需要在同一个页面中根据所选择的试题题库来显示不同的试题。这样充满动态感的需求需要怎样来处理呢？其实很简单，一提到动态我们自然而然想到的就是配置，而通常作为配置文件的就是xml文件，在这里我们同样采用配置xml的方式来解决这个问题。

1.解读一下我们的xml文件：

<?xml version="1.0" encoding="UTF-8"?>
 <users>	
        	<tableName>TEB_DXYY_FHSTL
        			<collegeName>大学英语复合式听力</collegeName>
        	</tableName>
        	<tableName>TEB_DXYY_JDT
        			<collegeName>大学英语简答题</collegeName>
        	</tableName>
        	
        	<TEB_DXYY_FHSTL engField="QUESTIONID,SCOPE,BOOKNAME,CHAPTERID,QUESTIONTYPEID,DEGREE,FRACTION,QUESTIONCONTENT,TIMELENGTH,ISVALID,ADDUSER,TIMESTAMP,REMARK,OTHER1,OTHER2">realTX
        		<fieldName>试题ID</fieldName>
        		<fieldName>范围</fieldName>
        		<fieldName>书名</fieldName>
        		<fieldName>章节ID</fieldName>
        		<fieldName>题型ID</fieldName>
        		<fieldName>难度</fieldName>
        		<fieldName>分数</fieldName>
        		<fieldName>试题内容</fieldName>
        		<fieldName>时长</fieldName>
        		<fieldName>是否可用</fieldName>
        		<fieldName>所添加用户</fieldName>
        		<fieldName>所添加时间</fieldName>
        		<fieldName>备注</fieldName>
        		<fieldName>Other1</fieldName>
        		<fieldName>Other2</fieldName>
        	</TEB_DXYY_FHSTL>
        	
        	<TEB_DXYY_JDT engField="QUESTIONID,CHAPTERID,QUESTIONTYPEID,DEGREE,FRACTION,QUESTIONCONTENT,CORRECTANSWER,ISVALID,ADDUSER,TIMESTAMP,REMARK,OTHER1,OTHER2">realTX
        		<fieldName>试题ID</fieldName>
        		<fieldName>章节ID</fieldName>
        		<fieldName>题型ID</fieldName>
        		<fieldName>难度</fieldName>
        		<fieldName>分数</fieldName>
        		<fieldName>试题内容</fieldName>
        		<fieldName>正确答案</fieldName>
        		<fieldName>是否可用</fieldName>
        		<fieldName>所添加用户</fieldName>
        		<fieldName>所添加时间</fieldName>
        		<fieldName>备注</fieldName>
        		<fieldName>Other1</fieldName>
        		<fieldName>Other2</fieldName>
        	</TEB_DXYY_JDT>
        	
        </users>

在上面的配置文件中配置了两个表的信息，tableName节点的文本值表示的是动态生成的题库表的表名，其中的collegeName节点的文本值表示的是需要显示的中文名称，注意tableName节点下面的的各个节点，这些节点的节点名称并不是随便取的，每一个节点的节点名称都是对应着一个tableName节点的文本值。这样配置的作用是我们可以通过tableName的文本值迅速定位表节点（也就是如TEB_DXYY_JDT类的节点），定位好该节点后，再看该节点中包含有engField属性和fieldName节点，其中engField属性表示的是题库表中的英文字段名，而fieldName子节点表示的是将要显示在页面上的中文名称，这两个其实就是中英文对应关系，英文属性用来进行查询，中文名称用来在界面显示用。

2.web页面显示数据。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/page/common/common.jsp"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta name="Author" content="kudychen@gmail.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>网站后台登陆</title>
 <!--CSS导入的公共css文件-->
 	
     <link href="/gxpt_web_ks_examstudent/css/admin.content.css" rel="stylesheet" type="text/css" />
     <link href="/gxpt_web_ks_examstudent/css/popupFrame.css" rel="stylesheet" type="text/css" />
     <link href="/gxpt_web_ks_examstudent/css/admin.global.css" rel="stylesheet" type="text/css" />
     <link href="/gxpt_web_ks_examstudent/css/admin.index.css" rel="stylesheet" type="text/css" />
     <link href="/gxpt_web_ks_examstudent/css/admin.login.css" rel="stylesheet" type="text/css" />
    
    <!--JS导入的公共js文件-->
  
  <!--  <script src="/gxpt_web_ks_examstudent/js/jquery-1.4.2.min.js" type="text/javascript">-->
  
   <script src="/gxpt_web_ks_examstudent/js/jquery.utils.js" type="text/javascript"></script>
   <script src="/gxpt_web_ks_examstudent/js/admin.js" type="text/javascript"></script>
   <script src="/gxpt_web_ks_examstudent/js/popupFrame.js" type="text/javascript"></script>
   <script src="/gxpt_web_ks_examstudent/js/Operation.js" type="text/javascript"></script>
   <script src="/gxpt_web_ks_examstudent/js/myjs.js" type="text/javascript"></script>
   <script src="/gxpt_web_ks_examstudent/js/ajaxjs.js" type="text/javascript"></script>
   
   <script type="text/javascript">
   	
   	  //页号
	   var pageNo;
		nowPageNo = 2;
		
		//表名
		var realTableName;
		realTableName="";
		
		//英文字段名对应的中文名称
		var realField;
		realField="";
		
		//英文字段名
		var engField;
		engField="";
		
		
		// 查询出题库
		function queryCourse(){

			 var obj =document.getElementById("college");
			  var index = obj.selectedIndex; // 读取所选中option的索引值
			  var text = obj.options[index].text; // 读取所选中option的文本
			  var value = obj.options[index].value; // 读取所选中option的value
			  
			  var revalue = value.replace(/\s+/g,"");
			  
			  //将页号重置为1
			  nowPageNo = 1;
			  //把表名赋值给全局变量
			  realTableName= revalue;
			  
			  readAllFields('/gxpt_web_ks_examstudent/myxml/questionStyle.xml',revalue);
	
		}
		
		//上一页
		function upPage(){
			var upPageNo;
			upPageNo = nowPageNo-1;
			if(upPageNo < 1){
				firstPage();
				upPageNo=1;
			}else{
				nowPageNo = nowPageNo - 1;
			}
			
			var downPageLable = document.getElementById("upPage");
			downPageLable.href="/gxpt_web_ks_examstudent/examStudent/DownPageAction.action?parm=" + realField + "&&tableName=" + realTableName + "&&pageNo=" + upPageNo + "&&engFields=" + engField;
		}
		
		function firstPage(){
			alert("已经是第一页");
		}
		
		
		//下一页
		function downPage(){
			var downPageNo;
			downPageNo = nowPageNo + 1;
			nowPageNo = nowPageNo + 1;
			
			var downPageLable = document.getElementById("downPage");
			downPageLable.href="/gxpt_web_ks_examstudent/examStudent/DownPageAction.action?parm=" + realField + "&&tableName=" + realTableName + "&&pageNo=" + downPageNo + "&&engFields=" + engField;
		}
		 function readAllFields(xmlName,nodeName){

 		  var fields;
		  fields="";

			//***************NEW
			
			var my_array = new Array();  
		    //加载xml文件  
		    xmlDoc=loadXMLDoc(xmlName,nodeName);             
		    var d = xmlDoc.getElementsByTagName(nodeName);  
		    
			engField = d[0].getAttributeNode("engField").nodeValue;
		    
		    for(var i=0;i<d.length;i++){  
		        var m = d[i].childNodes;  
		        my_array.push(d[i].childNodes[0].nodeValue);  
		        for(var k=0;k<m.length;k++){                   
		             if (m[k].nodeName != "#text") {  
		             my_array.push(m[k].childNodes[0].nodeValue);  
		             fields =fields +  m[k].childNodes[0].nodeValue+",";
		             }                    
		            }                     
		        }  
		    
		    realField = fields;
		    var lianjie;
			lianjie = document.getElementById("SpecifyQuestion");
			lianjie.href="/gxpt_web_ks_examstudent/examStudent/DownPageAction.action?parm=" + realField + "&&tableName=" + nodeName + "&&pageNo=1&&engFields=" + engField; 
	
	}    
		

   </script>
    </head>
<body >
    <!-- <form id="form1"  action="${contextPath }/examStudent/QueryStudentInfo.action"  target="navTab"  rel="">  -->
    <form id="form1"  action="${contextPath }/examStudent/SpecifyStuInfo.action" target="ajax" rel="jbsxBox">
   <div class="container">
    <div class="location">当前位置：考生管理-> 查询考生信息</div>
    <div class="blank10"></div>
    <div class="search block" padding-top="1000">
        <div class="h" >
            <!-- <span class="icon-sprite icon-magnifier"></span> -->
            <table>
            	<tr>
            		<td height="10"></td>
            	</tr>
            	<tr border-top="100">
            		<td  width="30">   <img alt="搜索" src="/gxpt_web_ks_examstudent/images/admin/search.png" ></td>
            		<td ><h2 >快速搜索</h2></td>
            	</tr>
            </table>
        </div>
        <div class="tl corner"></div><div class="tr corner"></div><div class="bl corner"></div><div class="br corner"></div>
        <div class="cnt-wp" >
            <div class="cnt" >
                <div class="search-bar">
                    <table style="width:95%">
                            <tbody>
                                <tr>
                                   <td width="50">
                                   		<div id="Dep"> 
                                   			<label class="first txt-green">请选择试题：</label>
                   						</div>
                   					</td>
                                    <td width="100">
												<select id="college"  οnclick="readAllColleges('${contextPath }/myxml/questionStyle.xml','tableName')" οnchange="queryCourse()">
													<option value="select" >请选择</option>
												</select>
                                    </td>
                                   
									<td width="50">
										<div style="float: right">
							        			<table>
							        				<tbody>
							        					<tr>
							        						<td align="center">
							        							<div class="pageContent" style="padding:5px">
																		<div class="divider"></div>
																		<div class="tabs">
																			<div>
																				<a id="SpecifyQuestion"   target="ajax" rel="jbsxBox"><b><font color="#456B0A">检索</font></b></a>
																			</div>
																	</div>
																</div>
															</td>
							        					</tr>
							        				</tbody>
							        			</table>
										</div>
									</td>
                                </tr>
                            </tbody>
                        </table>
               </div>
            </div>
        </div>
    </div>
    
    <div class="cnt-wp" >
            <div class="cnt" >
                <div id="tableDiv">
    
    			</div>
               
               <div id="jbsxBox" class="unitBox" >
				</div>
            </div>
    </div>
    
     
</div>
	
    </form>
</body>
</html>

3.action实现真分页

public List upPage(String tableName, int pageNo,String fields) {
		
		String thisPageNo1 = String.valueOf((pageNo - 1) * 10);
		String thisPageNo2 = String.valueOf(pageNo * 10);
		
		StringBuffer myBuffer = new StringBuffer();
		
		//组织sql语句
		String execuSql = myBuffer.append("select  " + fields)
						.append(" from ")
						.append(" ( ")
						.append(" select rownum rn,   " + fields)
						.append(" from ")
						.append(" ( ")
						.append("select " + fields +"  from " + tableName )
						.append(")")
						.append("where rownum <=" + thisPageNo2 )
						.append(")")
						.append("where rn > " + thisPageNo1)
						.toString();
			
		List list =(List) iCommonEao.executeGetNativeSQL(execuSql);
		return list;
	}

这里为求简便将每页显示的数目为10条固定在了程序中，大家可以通过参数灵活设置每页的显示数目。通过将动态题库标的表结构映射到xml文件中，我们可以随时随地的通过你更改配置文件控制具体的显示内容。

我的编程世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
动态显示表数据解决方案

首先介绍下背景，在我们的高校平台考试模块中有一种需求是显示题库中的试题，但是由于题库表不同于普通的Entity，他是动态创建的，也就是说表中的字段名是不固定的，表中字段的数目也是不固定的，显示出来的列的中文也是不固定的，但是我们需要在同一个页面中根据所选择的试题题库来显示不同的试题。这样充满动态感的需求需要怎样来处理呢？其实很简单，一提到动态我们自然而然想到的就是配置，而通常作为配置文件的就是xm
复制链接

扫一扫

专栏目录