您的位置：首页 > 其它

项目整理--如何动态生成表格

2016-04-06 17:47 465 查看
项目整理–如何动态生成表格

1. 纵向生成表格

示例图：



1）后台数据封装

用list封装map或者实体对象来存储取出来的多组数据。本次采用封装map方法。

2）后台向前台传值

用ModelAndView绑定数据。(其中涉及到权限管理部分代码可以略过不看。)

@RequestMapping(value="/getfwxllist")
public ModelAndView list(Page page){
logBefore(logger, "列表fwxl信息");
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
try{
pd = this.getPageData();
pd.put("CMS_YW_FWXL", Const.CMS_YW_FWXL);
page.setPd(pd);
List<PageData>  varList = fwxlService.list(page);   //列出fwxl列表
mv.setViewName("portal/operate/fwxl_list");
mv.addObject("varList", varList);
mv.addObject("pd", pd);
mv.addObject(Const.SESSION_QX,this.getHC());    //按钮权限
} catch(Exception e){
logger.error(e.toString(), e);
}
return mv;
}


3）前台获取展示数据

<%@ 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"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Widgets - Ace Admin</title>
<base href="<%=basePath%>">
<!-- jsp文件头和头部 -->
<%@ include file="../../system/admin/top.jsp"%>
<%@ include file="../../common/bootstrap_css.jsp"%>
<%@ include file="../../common/bootstrap_js.jsp"%>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript">

//动态生成表格的td信息
function ctrateTable(id,size,order,dept,score){
var searchid = id - size;
var subString = "";
subString +="<span>"+order+"</span>  ";
if(dept.length>=8){
subString +="<span title='"+dept+"'>"+dept.substring(0,8)+"...</span>";
}else{
subString +="<span>"+dept+"</span>";
}
subString +="<span style='float:right;'>"+score+"</span>";

$("#tr"+searchid).find("td:last").html(subString);
}

//用来设置mouseover时背景颜色
function setOverStyle(obj){
obj.style.backgroundColor="#e4e6e9";
}
//用来设置mouseout时背景颜色
function setOutStyle(obj){
obj.style.backgroundColor="#fff";
}

</script>
</head>

<body>
<table class="table table-bordered" style="margin-bottom:0px;background-color:#fff;">
<!-- 检查权限 -->
<c:choose>
<c:when test="${not empty varList}">
<c:if test="${QX.chas == 1 }">
<!-- 开始循环 -->
<c:forEach items="${varList}" var="var" varStatus="vs">

<c:choose>
<c:when test="${vs.count<=varList.size()/2}">
<c:choose>
<c:when test="${vs.count<=3 }">
<tr id="tr${var.order }" >
<th class="width:243px" style="padding: 3px;" onmouseover="setOverStyle(this);" onmouseout="setOutStyle(this)">
<span>${var.order }</span>  
<c:choose>
<c:when test="${fn:length(var.dept)<=8}">
<span title="${var.dept}">${var.dept }</span>
</c:when>
<c:otherwise>
<span title="<
4000
/span>${var.dept}">${var.dept.substring(0,8) }...</span>
</c:otherwise>
</c:choose>
<span style="float:right;">${var.score }</span>
</th>
<td class="width:243px" style="padding: 3px;"
onmouseover="setOverStyle(this);"
onmouseout="setOutStyle(this)">
</td>
</tr>
</c:when>
<c:otherwise>
<tr id="tr${var.order }">
<td class="width:243px" style="padding: 3px;"       onmouseover="setOverStyle(this);" onmouseout="setOutStyle(this)">
<span>${var.order }</span>  
<c:choose>
<c:when test="${fn:length(var.dept)<=8}">
<span title="${var.dept}">${var.dept }</span>
</c:when>
<c:otherwise>
<span title="${var.dept}">${var.dept.substring(0,8) }...</span>
</c:otherwise>
</c:choose>
<span style="float:right;">${var.score }</span>
</td>
<td class="width:243px" style="padding: 3px;" onmouseover="setOverStyle(this);" onmouseout="setOutStyle(this)">
</td>
</tr>
</c:otherwise>
</c:choose>
</c:when>
<c:otherwise>
<!-- 动态调用js -->
<script>ctrateTable('${var.order }','${varList.size()/2}','${var.order }','${var.dept }','${var.score }')</script>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
<c:if test="${QX.chas == 0 }">
<tr>
<td colspan="100" class="center">您无权查看</td>
</tr>
</c:if>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="100" class="center" >没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</table>
</body>

</html>


2. 横向生成表格

示例图：



1）后台数据封装

用list封装map或者实体对象来存储取出来的多组数据。本次采用封装map方法。

2）后台向前台传值

用ModelAndView绑定数据。(其中涉及到权限管理部分代码可以略过不看。)

@RequestMapping(value="/getOnlineUserInfo")
public ModelAndView list(Page page,
@RequestParam(value="type",required=false) String type){
logBefore(logger, "列表onlineUser信息");
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
try{
pd = this.getPageData();
page.setPd(pd);
List<PageData>  varList = onlineUserService.list(page); //列出onlineUser列表
mv.setViewName("portal/home/onlineuser_list");
mv.addObject("varList", varList);
mv.addObject("pd", pd);
mv.addObject(Const.SESSION_QX,this.getHC());    //按钮权限
} catch(Exception e){
logger.error(e.toString(), e);
}
return mv;
}


3）前台获取展示数据

其中fmt标签用于设定换行和确定每行tr标签id

</html>
<%@ 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"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>政务主题应用-列表展示（IOC应用集成）</title>
<base href="<%=basePath%>">
<!-- jsp文件头和头部 -->
<%@ include file="../../common/bootstrap_css.jsp"%>
<%@ include file="../../common/bootstrap_js.jsp"%>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 单选框 -->
<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<script type="text/javascript">
function ctrateTable(searchid,name){
var subString = "";
subString+="<td style='width:62px;height:26px; text-align: left;'><span style='font-size:10;'>"+name+"</span></td>";
$("#tr"+searchid).append(subString);
}
</script>
</head>

<body>
<div class="main-container" id="main-container">
<div class="main-content">
<div class="main-content-inner">
<div class="page-content" style="padding:0px;">
<div class="row">
<div class="col-xs-12">
<table style="boder:1px solid blue;">
<c:choose>
<c:when test="${not empty varList}">
<c:if test="${QX.chas == 1 }">
<c:forEach items="${varList}" var="var" varStatus="vs">
<c:choose>
<c:when test="${vs.index%5==0 || vs.count==1 }">
<tr id='tr<fmt:formatNumber type="number" value="${(vs.index-vs.index%5)/5}" maxFractionDigits="0"/>' style="vertical-align: top;">
<td style="width:62px;height:26px; text-align: left;">
<span style="font-size:10;">${var.NAME }</span>
</td>
</tr>
</c:when>

<c:otherwise>
<script>ctrateTable('<fmt:formatNumber type="number" value="${(vs.index-vs.index%5)/5}" maxFractionDigits="0"/>','${var.NAME }')</script>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
<c:if test="${QX.chas == 0 }">
<tr>
<td colspan="100" class="center">您无权查看</td>
</tr>
</c:if>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="100" class="center" >没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  表格 动态生成 缩略显示
相关文章推荐
新的分享
章节导航