display:table表格合并单元格
直接上代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/commons/include/html_doctype.html" %>
<html>
<head>
<title>补贴项目属性管理</title>
<%@include file="/commons/include/get.jsp" %>
<script type="text/javascript">
function fixRowspan() {
var tb = document.getElementById("projectPropertyItem");
var row_span_num = 1;
var first_row_title = "";
var first_row_obj = null;
for ( var i = 1; i < tb.rows.length; i++) {
var first_new_row_title = tb.rows[i].cells[0].innerHTML;
if (first_row_title != "" && first_row_title == first_new_row_title) {
tb.rows[i].deleteCell(0);
row_span_num++;
first_row_obj.setAttribute("rowSpan", row_span_num);
first_row_obj.innerHTML = first_row_title.replace("/", "<br/>");
} else {
if (first_row_title != "") {
first_row_obj.setAttribute("rowSpan", row_span_num);
first_row_obj.innerHTML = first_row_title.replace("/", "<br/>");
row_span_num = 1;
}
first_row_obj = tb.rows[i].cells[0];
first_row_title = first_new_row_title;
}
} }
</script>
</head>
<body onload="fixRowspan()">
<div class="panel">
<div class="panel-top">
<div class="tbar-title">
<span class="tbar-label">补贴项目属性管理列表</span>
</div>
<div class="panel-toolbar">
<div class="toolBar">
<div class="group"><a class="link search" id="btnSearch"><span></span>查询</a></div>
<div class="l-bar-separator"></div>
</div>
</div>
<div class="panel-search">
<form id="searchForm" method="post" action="list.ht">
<div class="row">
<span class="label">补贴项目:</span><!-- <input type="text" name="Q_projectId_SL" class="inputText" /> -->
<select name="Q_projectId_S" style="width:20% !important;" class="inputText">
<option value="">---请选择---</option>
<c:forEach items="${projectList }" var="project">
<option value="${project.id }" <c:if test="${param.Q_projectId_S eq project.id}">selected="selected"</c:if>>${project.projectName }</option>
</c:forEach>
</select>
</div>
</form>
</div>
</div>
<div class="panel-body">
<display:table name="projectPropertyList" id="projectPropertyItem" requestURI="list.ht" sort="external" cellpadding="1" cellspacing="1" class="table-grid">
<display:column property="projectName" title="项目名称" style="text-align:center;" sortName="PROJECT_NAME">
</display:column>
<display:column property="propName" title="属性名称" sortName="PROP_NAME" style="text-align:center;" ></display:column>
<display:column title="数据类型" style="text-align:center;" sortName="DATA_TYPE">
<c:forEach items="${Dictionary.DATA_TYPE }" var="item">
<c:if test="${projectPropertyItem.dataType eq item.itemValue }" >${item.itemName }</c:if>
</c:forEach>
</display:column>
<display:column title="属性类型" style="text-align:center;" sortName="PROP_TYPE">
<c:forEach items="${Dictionary.PROPERTY_TYPE}" var="item">
<c:if test="${projectPropertyItem.propType eq item.itemValue }">${item.itemName }</c:if>
</c:forEach>
</display:column>
<display:column title="计算单位" style="text-align:center;" sortName="COUNT_UNIT">
<c:forEach items="${Dictionary.COMPUTING_UNIT}" var="item">
<c:if test="${projectPropertyItem.countUnit eq item.itemValue }">${item.itemName }</c:if>
</c:forEach>
</display:column>
<display:column property="createUserName" title="创建人" style="text-align:center;" sortName="CREATE_BY"></display:column>
<display:column title="创建时间" style="text-align:center;" sortName="CREATE_TIME">
<fmt:formatDate value="${projectPropertyItem.createTime}" pattern="yyyy-MM-dd"/>
</display:column>
<display:column title="管理" media="html">
<c:if test="${project.state eq 'NOT_FINISH'}">
<a href="del.ht?id=${projectPropertyItem.id}" class="link del">删除</a>
<a href="edit.ht?id=${projectPropertyItem.id}" class="link edit">编辑</a>
</c:if>
<a href="get.ht?id=${projectPropertyItem.id}" class="link detail">明细</a>
</display:column>
</display:table>
<ksource:paging tableId="projectPropertyItem"/>
</div><!-- end of panel-body -->
</div> <!-- end of panel -->
</body>
</html>
效果图：
display:table表格合并单元格的更多相关文章
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- 使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...
- js 表格合并单元格
5列 根据需要可添加 或 删除 strOneTemp strTwoTemp strThreeTemp strFourTemp strFiveTemp //合并单元格 this.mergeC ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门 但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
- 设置table表格的单元格间距两种方式
table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- css table之合并单元格
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
随机推荐
- ios空模板配置
ios之Xcode6如何手动创建空工程模板 1.首先创建Single View Application 2.然后找到工程目录->Supporting Files ——>找到 info.pl ...
- setTimeout 定时器用法
setTimeout($(".msg").slideUp(5000)); msg的div 5秒往上收边 setTimeout("函数名称",1000);
- Llinux环境下编译并使用OpenCV
http://docs.opencv.org/2.4/doc/tutorials/introduction/linux_install/linux_install.html http://stacko ...
- 0. Java开发中的23种设计模式详解(转)
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- 二、WCF应用的通信过程
注:本文为学习摘抄,原文地址:http://www.cnblogs.com/iamlilinfeng/archive/2012/09/26/2703759.html 一.概述 WCF能够建立一个跨平台 ...
- NOIP2002-普及组复赛-第二题-级数求和
题目描述 Description 已知:Sn= 1+1/2+1/3+…+1/n.显然对于任意一个整数K,当n足够大的时候,Sn大于K. 现给出一个整数K(1<=k<=15),要求计算出一个 ...
- Openjudge-计算概论（A）-骑车与走路
描述: 在北大校园里,没有自行车,上课办事会很不方便.但实际上,并非去办任何事情都是骑车快,因为骑车总要找车.开锁.停车.锁车等,这要耽误一些时间.假设找到自行车,开锁并车上自行车的时间为27秒;停车 ...
- UEFI BIOS模式下Windows系统启动过程以及引导文件修复方法
有关UEFI BIOS基础知识的简介,一年前在网易博客做过详细的概述.鉴于某些网友仍然对UEFI下Windows的启动过程不甚了解,虽然网上有各式各样的启动修复工具,但是对于新手来说,如果不明白其中的 ...
- JQuery简介及HelloWorld
一.JQuery是什么: -JQuery是一个JavaScript框架. 二.JQuery的优点: –轻量级 –强大的选择器 –出色的 DOM 操作的封装 –可靠的事件处理机制 –完善的 Ajax – ...
- Linux Debian 7部署LEMP（Linux+Nginx+MySQL+PHP）网站环境
我们在玩VPS搭建网站环境的时候,都经常看到所谓的LAMP.LNMP.LEMP,LAMP, 其中的A代表APECHE WEB驱动环境,LNMP中的N代表NGINX驱动环境,只不过海外的叫法NGINX ...