[Seasar-user:8286] Teedaを使用した複数行表示レコード出力方法

2007年 6月 13日 (水) 17:14:36 JST

はじめまして。
坂口　と申します。

現在、Teedaのgridコンポーネントを使用し下図のような行/列を固定した複数行表示レコードを表示しようとしています。
(a,b,cを記載している列を固定、aを記載している行を固定にしている)

_ __ __ __ __ __ __ __ __ __ __ __ __ __ _
|  a    |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
|_ _ _ |_ _ _ _ _ _| _ _ _ _ _ _ _ _ |_ _ _ _ _ |
|  b     |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
|_ _ _ |_ _ _ _ _ _| _ _ _ _ _ _ _ _ |_ _ _ _ _ |
|  c    |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
|_ _ _ |_ _ _ _ _ _| _ _ _ _ _ _ _ _ |_ _ _ _ _ |

gridコンポーネントを使用して展開されたHTMLでは下図のように固定列の表示が崩れてしまいます。
原因と対策方法をご教授いただきたく。(現象が発生するHTMLとpageクラスを資料として下記に記載します。)
_ __ __ __ __ __ __ __ __ __ __ __ __ __ _
|  a |_ |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
| _ | b |_ _ _ _ _ _| _ _ _ _ _ _ _ _ |_ _ _ _ _ |
|    |_ _|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
| _c|   | _ _ _ _ _ | _ _ _ _ _ _ _ _ |_ _ _ _ _ |
|        |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
|_ _ _ |_ _ _ _ _ _| _ _ _ _ _ _ _ _ |_ _ _ _ _ |


【環境】
　OS: Windows XP
　開発環境
  Eclipse SDK 3.2.0
  Seasar 2.4.13
  Teeda 1.0.7
  dolten 0.20.1
  Tomcat 5.5.23


-- 資料 --
★HTML
<html>
<body>
<style>
.gridHeader {
	background-color: green;
	color: white;
	font-weight: bold;
	overflow: hidden;
}
.gridTable {
	background-color: green;
}
.gridCell {
	height: 25px;
	background-color: white;
}
</style>

	<table align="center"  id="hogeGridY" width="420px" height="150px" >
    	<colgroup>
    		<col span="1" width="40px" class="T_leftFixed" />
    		<col span="3" width="360px" />
    	</colgroup>
	    <thead>
	        <tr style="background-color:#E6E6FA;">
	        	<th rowspan="2"  style="width:40px;height:40px;">1and2Line_1Row</th>
	        	<th colspan="3" style="width:360px;height:20px;">1Line_2and3and4Row</th>
	        </tr>
	        <tr style="background-color:#E6E6FA;">
	        	<th colspan="1" style="width:120px;">2Line_2Row</th>
	        	<th colspan="1" style="width:120px;">2Line_3Row</th>
	        	<th colspan="1" style="width:120px;">2Line_4Row</th>
	        </tr>
	    </thead>
	    <tbody>
	    	<tr >
	    		<td rowspan="2" style="width:40px;height:40px;"><span id="aa" >aa</span></td>
	    		<td colspan="3" style="width:360px;height:20px;"><span id="bb">bb</span></td>
	    	</tr>
	    	<tr >
	    		<td colspan="1" style="width:120px;"><span id="cc" >cc</span></td>
	    		<td colspan="1" style="width:120px;"><span id="dd" >dd</span></td>
	    		<td colspan="1" style="width:120px;"><span id="ee" >ee</span></td>
	        </tr>
	    </tbody>
    </table>

</body>
</html>


★pageクラス
package tutorial.chura.web.grid;

import java.util.ArrayList;
import java.util.List;

public class MultiLineTablePage{

	private String aa;
	private String bb;
	private String cc;
	private String dd;
	private String ee;

	private int hogeIndex;
	private List hogeItems;

	public String getAa() {
		return aa;
	}
	public void setAa(String aa) {
		this.aa = aa;
	}
	public String getBb() {
		return bb;
	}
	public void setBb(String bb) {
		this.bb = bb;
	}
	public String getCc() {
		return cc;
	}
	public void setCc(String cc) {
		this.cc = cc;
	}
	public String getDd() {
		return dd;
	}
	public void setDd(String dd) {
		this.dd = dd;
	}
	public String getEe() {
		return ee;
	}
	public void setEe(String ee) {
		this.ee = ee;
	}
	public int getHogeIndex() {
		return hogeIndex;
	}
	public void setHogeIndex(int hogeIndex) {
		this.hogeIndex = hogeIndex;
	}
	public List getHogeItems() {
		return hogeItems;
	}
	public void setHogeItems(List hogeItems) {
		this.hogeItems = hogeItems;
	}
	public String initialize() {
		return null;
	}

	public String prerender() {
		
		List list = new ArrayList(5);
		for(int i=0; i < 5; i++) {
			ListData listData = new ListData(i);
			list.add(listData);
		}
		setHogeItems(list);
		
		return null;
	}
	
	/**
	 * インナークラス
	 * 現象を一つのJavaファイルで
	 * 再現したかった為、使用。
	 */
    public class ListData{
    	
    	private String aa;
    	private String bb;
    	private String cc;
    	private String dd;
    	private String ee;
    	
    	ListData(int data) {
    		setAa("aa" + data);
    		setBb("bb" + data);
    		setCc("cc" + data);
    		setDd("dd" + data);
    		setEe("ee" + data);
    	}

		public String getAa() {
			return aa;
		}
		public void setAa(String aa) {
			this.aa = aa;
		}
		public String getBb() {
			return bb;
		}
		public void setBb(String bb) {
			this.bb = bb;
		}
		public String getCc() {
			return cc;
		}
		public void setCc(String cc) {
			this.cc = cc;
		}
		public String getDd() {
			return dd;
		}
		public void setDd(String dd) {
			this.dd = dd;
		}
		public String getEe() {
			return ee;
		}
		public void setEe(String ee) {
			this.ee = ee;
		}
    }

}


-------------- next part --------------
HTMLの添付ファイルを保管しました...
URL: http://ml.seasar.org/archives/seasar-user/attachments/20070613/d2962f95/attachment.html