项目整理--如何动态生成表格
来源：互联网 发布：淘宝偏袒买家 编辑：程序博客网 时间：2024/05/01 01:16
项目整理–如何动态生成表格
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="${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> 0 0
- 项目整理--如何动态生成表格
- JavaScript如何动态生成表格
- 动态生成表格
- javascript动态生成表格
- JS动态生成表格
- javascript 动态生成表格
- JS 动态生成表格
- js动态生成表格
- Js动态生成表格
- Literal生成动态表格
- 动态生成表格
- 动态生成表格示例
- 动态生成表格
- 动态生成表格
- js 动态生成表格
- 动态生成表格
- 动态生成表格
- 动态生成表格
- 自定义类加载器（ClassLoader + URLClassLoader）
- setVisibility 中visible invisible 和gone的区别
- Oracle analytic function入门
- Maven与Eclipse集成安装--源自技术
- JZ2440：uart 串口
- 项目整理--如何动态生成表格
- Objective-C与JavaScript交互的那些事
- 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作
- xhprof&export&source&php运行原理&php＋nginx
- 简单记录下ListView滑动时标题逐渐变色的实现方法
- checkbox在后台java的获取方法
- Shiro学习（6）Realm整合
- Fatal error: Call to undefined function mcrypt_encrypt()
- padding-left --左内边距
