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",此行的 ...
随机推荐
- Node.js：模块
概要:本篇博客主要介绍node.js的模块 1.创建模块 在node.js中创建一个模块非常简单,因为一个文件就是一个模块.我们只需要明白如何从其他文件中获取这个模块.Node.js提供了 expor ...
- java 邮件收发 (只能输入英文，中文需要转码)
//发件 package com.sun.mail;import java.io.UnsupportedEncodingException;import java.util.Properties;im ...
- bzoj1417: Pku3156 Interconnect
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1417 1417: Pku3156 Interconnect Time Limit: 10 ...
- .Net使用JsonSchema验证Json
最近项目中遇到了这样的需求,需要对上传的Json进行验证,以确保Json数据的准确性.前后使用了两种方式来验证: (1)第一种方式的实现思想:根据Json数据的格式,严格定义相应的类结构,并在Syst ...
- Windows系统顽固文件删除方法
con nul都是windows的设备,默认是不允许删除的,如果你一定要删除,可以按照以下方法进行删除!新建一个记事本输入一下内容(直接复制即可)DEL /F /A /Q \\?\%1 RD /S / ...
- 获取 Windows 任务栏 Rect
获取当前Windows系统的任务栏尺寸 1: RECT rect; 2: HWND hwndTaskbar = FindWindow(TEXT("Shell_TrayWnd"), ...
- SQL_where条件的优化
原则,多数数据库都是从 左到右的顺序处理条件,把能过滤更多数据的条件放在前面,过滤少的条件放后面 SQL1: select * from employee where sala ...
- PHP 流程
登录页面 <body> <form action="loginchuli.php" method="post"> <div> ...
- 高性能MySQL第2，3章性能相关 回顾笔记
1. 基准测试(benchmark) 不管是新手还是专家都要熟悉基准测试,benchmark测试是对系统的一种压力测试,目标是为了掌握在特定压力下系统的行为.也有其他原因:如重现系统状态,或者是 ...
- [ 订单查询 ] 性能 高并发 ： 分表 与 用户id%1024 存放表
逻辑剥离, 保留核心部分 下单 { 核心功能 -- 买家查看订单, 卖家查看收到订单, 修改价格 5个表 附属功能 -- 库存量, 发短信, 给卖家发通知, 订单统计, 销售额统计 } 下单时 一个数 ...