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",此行的 ...
随机推荐
- 关于input在li列表中居中显示
input属于置换元素(replaced element),置换元素主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素,这些元素的垂直居中 ...
- Business Intelligence（BI） 商务智能
商业智能技术正是一种能够帮助企业迅速地完成信息采集.分析的先进技术.它以数据仓库(Data Warehousing).在线分析处理(OLAP).数据挖掘(Data Mining)3种技术的整合为基础, ...
- MySQL5.6新特性Index conditontion pushdow
index condition pushdown是MySQL5.6的新特性,主要是对MySQL索引使用的优化. Index condition push简称ICP,索引条件下推,将索引条件从serve ...
- ural 1118. Nontrivial Numbers
1118. Nontrivial Numbers Time limit: 2.0 secondMemory limit: 64 MB Specialists of SKB Kontur have de ...
- manifest中的largeHeap是干什么用的？
转 http://blog.csdn.net/jiaoyang623/article/details/8773445 今天群里有人讨论怎么给app分配超过100M的内存,有人亮出了largeHeap参 ...
- [ 订单查询 ] 性能 高并发 ： 分表 与 用户id%1024 存放表
逻辑剥离, 保留核心部分 下单 { 核心功能 -- 买家查看订单, 卖家查看收到订单, 修改价格 5个表 附属功能 -- 库存量, 发短信, 给卖家发通知, 订单统计, 销售额统计 } 下单时 一个数 ...
- was性能调优
数据库设置 使用此页面来指定数据库会话支持的设置. 要查看此管理控制台页面,请单击服务器 > 服务器类型 > WebSphere 应用程序服务器 > server_name > ...
- JSP之JavaBean
一.定义 1 JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法暴露给其它程序 ...
- CSS简介模块
CSS3完全向后兼容. 选择器 盒模型 背景和边框 文字和特效 2D.3D特效 动画 多列布局 用户界面 今天先做个开始,今后每一天学习一点点.
- Chapter 2 Open Book——4
I walked to Biology with more confidence when, by the end of lunch, he still hadn't showed. 经过中午饭之后我 ...