현황 그리드

사용 Guide

1. Status Grid(class="StatusGrid")구조와 사용방법은 class="Grid"와 동일하다.
    1) 현황그리드(StatusGrid)는 가로,세로선(border)이 항상 있어 컬럼 구분이 쉽도록 한다.
    2) 간단한 게시판 형식을 제외한 복잡한 구조의 그리드나 데이타가 숫자인 경우 현황 그리드를 사용한다.

2. Status Grid에서는 여러 개의 줄 속성(선택, 소계, 합계 등) 이 있으므로 줄 바꿈(ItemAlt) 속성을 사용하지 않는다.
     1) 소계, 합계, 이슈등의 특별한 속성을 사용할 경우 줄 바꿈(ItemAlt) 속성을 사용하지 않는다. (권장)
     2) Rowspan을 사용할 경우 줄바꿈(ItemAlt)속성을 사용하지 않는다. (권장)
     3) 줄바꿈 속성을 사용할 경우에는 일반 그리드(class="Grid")를 사용하다. (권장)
     4) 단, 여러개의 현황 목록을 같은 스타일로 통일해야 할 경우에는 다른 속성의 사용 여부와 상관없이 사용하지 않는 것을 원칙으로 한다.

3. 컬럼 구분을 강조할 경우 세로선 class="VSeparator",  가로선 class="HSeparator" 를사용한다.
    ex)  <td class="Center VSeparator">

4. 서브 컬럼(트리형식) 사용
     1) 서브 Header를 추가 할 경우 <tr class="..에 "Header(해당행수)Row"를 사용한다.
          ex) 2번째 행인 경우 : <tr class="Header Header2Row">
     2) 서브 항목의 상단 여백 스타일은 위치 속성에 "Blank" 추가하고 공백( )으로 처리한다.
          ex) <td colspan="00" class="Center Blank"> </td>

Sample

HTML Guide

<div class="StatusGrid">
<table border="0" cellpadding="0" cellspacing="0" class="Outline">
    <colgroup>
        <col />
        <col width="10%" />
        <col width="10%" />
        <col width="10%" />
        <col width="10%" />
        <col width="10%" />
        <col />
    </colgroup>
    <tr class="Header">
        <th rowspan="2" class="First">Header</th>
        <th rowspan="2" class="Center">Header</th>
        <th colspan="2" class="Center Blank"> </th> *트리구조의 상단 여백
        <th colspan="2" class="Center VSeparator">Header</th>  *컬럼그룹 구분선
        <th rowspan="2" class="Last">Header</th>
    </tr>
    <tr class="Header Header2Row"> *Header 두번째 행 (Header3Row, Header4Row 식으로 Header SubRow 추가)
         <th class="First">Sub Header</th>
         <th class="Center">Sub Header</th>
         <th class="Center VSeparator">Sub Header</th>
         <th class="Last">Sub Header</th>
    </tr>
    <tr class="Item" >
        <td class="First" rowspan="2">Item</td>
        <td class="Center" rowspan="2"> Item</td>
        <td colspan="2" class="Center Blank"> </td> *트리구조의 상단 여백
        <td class="Center VSeparator">10</td>
        <td class="Center">20</td>
        <td class="Last">-</td>
    </tr>
    <tr class="Item" align="right">
        <td class="First">-</td>
        <td class="Center Issue">Issue</td>
        <td class="Center VSeparator">10</td>
        <td class="Center">20</td>
        <td class="Last">-</td>
    </tr>
    <tr class="ItemTitle" > * 그리드 소그룹 타이틀
        ...
    </tr>
    <tr class="ItemSelected" > * 선택된 행
        ...
    </tr>
    <tr class="ItemSum" > * 소계 행
        ...
    </tr>
    <tr class="ItemTotal" > * 합계 행
       ...
    </tr>
    <tr class="ItemInput">  * 입력 줄 스타일
       ....
    </tr>
</table>
</div>

| |