[TEEDA-316] Teedaを使用した複数行表示レコード出力方法 Created: 2007-06-18  Updated: 2007-09-29  Resolved: 2007-09-29

Status: Closed
Project: Teeda
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Major
Reporter: shot Assignee: koichik
Resolution: Won't Fix Votes: 0
Labels: None


 Description   

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

現在、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< FONT COLOR="#000000" SIZE=2 FACE="MS ゴシック">="150px" >
        <colgroup>
                <col span="1" width="40px" class="T_l eftFixed" />
                <col span="3" width="360px" />
        </colgroup>
            <thead>
                <tr style="background-color:#E6E6FA;">
                        <th rowspan="2"  style="width:40px;height:40px;">1an d2Line_1Row</th>
                        <th colspan="3" style="width:360px;height:20px;">1Line_2and3 and4Row</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 < FONT COLOR="#7F007F" SIZE=2 FACE="MS ゴシック">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;
                }
    }

}


 Comments   
Comment by shot [ 2007-09-29 ]

やるなら、別コンポーネントになると思います.
念のためコメントしときます.

Comment by koichik [ 2007-09-29 ]

fix version を外したのでもう一度クローズ.

Comment by koichik [ 2007-09-29 ]

対応しないのに fix version を入れてしまったので再オープン.

Comment by koichik [ 2007-09-29 ]

Grid は固定部の見出しを別テーブルとして出力するため,見出しの列が一つしかないと rowspan の指定は事実上意味が無く,1行分の高さしか持つことができません.そのため,スクロール可能な右のテーブルと高さを合わせることが困難になります.
それよりは,見出しの列を 2 つにして,2 番目の列の幅を0 にして見えなくする方が現実的なので,この件は Teeda としては対応しないことにします.
なお,Teeda HTML Example に上記回避方法によるサンプルを grid/multiRowGrid4.html として作成しました.

http://svn.seasar.org/browse/?view=rev&root=teeda&revision=3674

Generated at Wed Apr 09 08:06:14 JST 2025 using Jira 10.5.0#10050000-sha1:9d9d098bb7b67e8dba8da380ba9c3900d82ac3cf.