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 >
	<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>

效果图:

时间: 2024-10-09 14:53:31

display:table表格合并单元格的相关文章

通用表格合并单元格

1.源码: /** * 合并表格的列 * @param {String} tableId要合并的表格的id * @param {int} fCol开始的列 * @param {int} eCol结束的列 * @return void */ function mergCol(tableId, fCol, eCol) { var oTable = $(tableId); if (!$chk(oTable)/*!oTable*/) { return; } var oTBody = oTable.tBo

table JS合并单元格

function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_currenttd = ""; _w_table_SpanNum = 0; _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")"); _w_table_Obj

table边框表头单元格空间合并等设置

表格由<table>标签来定义,每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 1 HTML 表格的基本结构: 2 <table>…</table>:定义表格 3 <th>…</th>:定义表格的标题栏(文字加粗) 4 <tr>…<

jQuery_easyUI 合并单元格 (DataGrid 数据表格)

<table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagrid" rownumbers="true" data-options="fitColumns: true, iconCls: 'icon-edit', scrollbarSize:0, multiSort:true, remoteSort:true, paginatio

table合并单元格

新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

table合并单元格 colspan(跨列)和rowspan(跨行)

colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列.如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元

vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路. 在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了. 哎,废话不多说了,看代码吧: 代码示例 使用iviewui的table组件: 最初,直接使用项目中的iv

前端页面表格实现合并单元格

做报表,查询的时候,经常用到表格. 页面展示多条数据时,时常表格的第一列都是相同的,所以合并单元格,让表格看起来更直观. 写这个函数,其它js里面直接调用unionTab (tb,collength);其中第一个参数tb为表格ID,第二个参数为你想要进行单元格合并的表格列数. 缺点:只能实现前N列,不能实现某一列实现合并. /**/ window.unionTab = function (tb, colLength) { var id = tb; tb = $("#" + tb).ge

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点