FrontPage > SAStrutsの覚書 > サンプルアプリ

一覧テーブルのリサイズとスクロール

1. スタイル追加

src/main/webapp/css/stylesheet.cssへ下記のスタイルを追加する。

DIV.dataHeader {
   margin: 5px 5px 0px 5px;
   padding: 0px;
   overflow: hidden;
}
DIV.dataBody {
   margin: 0px 5px 5px 5px;
   padding: 0px;
   overflow:auto;
}

2. JSP変更

src/main/webapp/WEB-INF/view/searchEmp/searchEmp.jspを以下のように修正する。

<%@page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="${f:url('/css/stylesheet.css')}">
<script type="text/javascript">
<!--
// 初期処理
function init() {
	var dataHeader = document.getElementById("dataHeader");
	var dataBody = document.getElementById("dataBody");

	tController = new TableController(dataHeader, dataBody, 547, 30, 10);

	addEvent(window, "resize", tController.resize);
	addEvent(window, "resize", tController.scrollH);
	addEvent(dataBody, "scroll", tController.scrollH);
	tController.resize();
}

// テーブル制御クラス
function TableController(dataHeader, dataBody, maxWidth, marginBottom, marginRight) {
	this.scrollH = function() {
		dataHeader.scrollLeft = dataBody.scrollLeft;
	};

	this.resize = function(){
		var doc = document.documentElement;
	
		var h =  Math.max(50,doc.clientHeight - dataBody.offsetTop - dataBody.offsetParent.offsetTop - marginBottom);
		dataBody.style.height = h + 'px'
	
		var w = Math.max(50, doc.clientWidth - dataBody.offsetLeft - dataBody.offsetParent.offsetLeft - marginRight);
		if (w > maxWidth) {
			w = maxWidth;
		}
		dataBody.style.width = w+'px';
		dataHeader.style.width = dataBody.clientWidth+'px';
	};
}

// event追加
function addEvent(elem, eventName, func) {
	if (elem.attachEvent) {
		elem.attachEvent('on' + eventName, func);
	} else if (elem.addEventListener) {
		elem.addEventListener(eventName, func, false);
	}
}
//-->
</script>
<style type="text/css">
<!--
.col1 {width: 100px;}
.col2 {width: 100px;}
.col3 {width: 100px; text-align: center;}
.col4 {width:139px;}
-->
</style>
</head>
<body style="overflow:hidden" onload="init()">
<tiles:insert template="/WEB-INF/view/common/layout.jsp" flush="true">
<tiles:put name="content_menu" type="string">
</tiles:put>
<tiles:put name="content" type="string">
<div class="content">
	<html:errors/>
	<s:form method="POST">
		<table class="data" style="width:510px;">
		<tr>
			<th class="data" style="width: 100px;">従業員番号</th>
			<td class="data" style="width: 110px;">
				<html:text property="empNoCondition" size="10" maxlength="10" errorStyleClass="error"/></td>
			<th class="data" style="width: 100px;">従業員名</th>
			<td class="data">
				<html:text property="empNameCondition" size="20" maxlength="20"/></td>
		</tr>
		<tr>
			<th class="data">雇用日</th>
			<td class="data" colspan="3">
				<html:text property="hiredateMin" size="10" maxlength="10" errorStyleClass="error"/> 〜
				<html:text property="hiredateMax" size="10" maxlength="10" errorStyleClass="error"/>(yyyy/mm/dd)
			</td>
		</tr>
		<tr>
			<th class="data">部門名</th>
			<td class="data" colspan="3">
				<html:select property="deptIdCondition">
					<option value=""></option>
					<html:options collection="deptList" property="id" labelProperty="deptName"/>
				</html:select>
			</td>
		</tr>
		</table>
		<br>
		<s:submit property="search" value="検索"/>
		<br><br>
		<div id="dataHeader"  class="dataHeader" style="width:457px;">
			<table class="data" style="width:460px; background-color: transparent; margin: 0px;">
				<tr>
				<th class="data col1">従業員番号</th>
				<th class="data col2">従業員名</th>
				<th class="data col3">雇用日</th>
				<th class="data col4">部門名</th>
				<td ></td>
				</tr>
			</table>
		</div>
		<div id="dataBody"  class="dataBody" style="width:457px;">
			<table class="data" style="width:440px; margin: 0px;">
				<c:forEach var="emp" items="${empList}">
					<tr>
						<td class="data col1">${emp.empNo}</td>
						<td class="data col2">${f:h(emp.empName)}</td>
						<td class="data col3">
							<fmt:formatDate value="${emp.hireDate}" pattern="yyyy/MM/dd"/></td>
						<td class="data col4">${emp.deptName}</td>
					</tr>
				</c:forEach>
			</table>
		</div>
	</s:form>
</div>
</tiles:put>
</tiles:insert>
</body>
</html>

3. 実行結果

sassample04.jpg





添付ファイル: filesassample04.jpg 768件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-03-06 (火) 02:13:22 (2605d)