Bshe/manual/Bshe_View/doc/Designer/table [テーブルの表現] - Wiki

Page Top
テーブルの表現 anchor.png

単純にタグに対して値や属性をセットするほかに、テーブルのように繰り返してデータを表示してゆく表現にも対応しています。 テーブルの表現には、

の3つの表現方法があります。
tableもxtableも、プログラム側からセットするデータ形式は同じのため、Webデザイン側で、どちらを利用するかを自由に選ぶことができます。

Page Top
table繰り返し anchor.png

メニュー表示のようなリストを表示する際に利用する表現方法。
table繰り返し表現には、

  • テーブル全体
  • テーブルの1行
  • 1行内に表示したい要素

の最低3つのキー属性が必要です。

  • テーブル全体 テーブル全体に対して設定するキー属性で、以下のような構造になります。 
    bshe::table:table:[tableへセットする配列名]
  • テーブルの1行 テーブル内で繰返しを行う1行に対して設定するキー属性で、以下のような構造になります。 
    bshe::table:row:[table名]
    • [table名]はテーブル全体で指定したものと同じものを指定する必要があります。
    • このキー属性はテーブル全体を示すタグの内側にある必要があります。
  • 1行内に表示したい要素 テーブルの1行内で、処理を行いたいタグにセットするキー属性で、以下のような構造になります。 
    bshe::table:col:[table名]:[セル名]
    • [table名]はテーブルの1行で指定したものと同じものを指定する必要があります。
    • [セル名]はテーブル全体で指定した[tableへセットする配列名]内の配列のキー文字列と対応します。

実際に以下のようなHTMLを記載し、

<table key='bshe::table:table:tablevalues' border=1>
  <tr>
    <th>セル１</th>
    <th>セル２</th>
    <th>セル３</th>
  </tr>
  <tr key='bshe::table:row:tablevalues'>
    <td key='bshe::table:col:tablevalues:cel1'>a</td>
    <td key='bshe::table:col:tablevalues:cel2'>a</td>
    <td key='bshe::table:col:tablevalues:cel3'>a</td>
  </tr>
</table>

tablevaluesという配列に以下のような配列をセットすると

array(
  0 =>
    array(
      'cel1' => 'a1',
      'cel2' => 'a2',
      'cel3' => 'a3',
    ),
  1 =>
    array(
      'cel1' => 'b1',
      'cel2' => 'b2',
      'cel3' => 'b3',
    )
)

以下のようなHTMLが生成されます

<table border=1>
  <tr>
    <th>セル１</th>
    <th>セル２</th>
    <th>セル３</th>
  </tr>
  <tr >
    <td >a1</td>
    <td >a2</td>
    <td >a3</td>
  </tr>
  <tr >
    <td >b1</td>
    <td >b2</td>
    <td >b3</td>
  </tr>
</table>

値の他に、タグ自体に属性やスタイルをセットすることも可能です。
詳細はプログラマー向けマニュアルを参照してください。

Page Top
セルに対して繰り返し表示する。（本マニュアルでは「xtable繰り返し」と呼ぶ） anchor.png

一覧をテーブルの1つの<td>(セル）ごとに表示するなどの、 セルに対して繰り返し表示を行う表現方法。
xtable繰り返し表現には、

  • テーブル全体
  • テーブルの1行
  • テーブル上の1セル
  • セル内に表示したい要素

の最低4つのキー属性が必要です。

  • テーブル全体 テーブル全体に対して設定するキー属性で、以下のような構造になります。 
    bshe::xtable:table:[tableへセットする配列名]
  • テーブルの1行 テーブル内で繰返しを行う1行に対して設定するキー属性で、以下のような構造になります。 
    bshe::xtable:row:[tableへセットする配列名]
    • [tableへセットする配列名]はテーブル全体で指定したものと同じものを指定する必要があります。
    • このキー属性はテーブル全体を示すタグの内側にある必要があります。
  • テーブル上の1セル テーブル内で繰返しを行う1行に対して設定するキー属性で、以下のような構造になります。 
    bshe::xtable:col:[tableへセットする配列名]
    • [tableへセットする配列名]はテーブル全体で指定したものと同じものを指定する必要があります。
    • このキー属性はテーブルの1行を示すタグの内側にある必要があります。
  • 1セルに表示したい要素 テーブルの1行内で、処理を行いたいタグにセットするキー属性で、以下のような構造になります。 
    bshe::table:val:[tableへセットする配列名]:[変数名]
    • [tableへセットする配列名]はテーブルの1行で指定したものと同じものを指定する必要があります。
    • [変数名]はテーブル全体で指定した[tableへセットする配列名]内の配列のキー文字列と対応します。

実際に以下のようなHTMLを記載し、

<table key='bshe::xtable:table:table1' border=1>
  <tr key='bshe::xtable:row:table1'>
    <td key='bshe::xtable:col:table1'>
      <span key="bshe::xtable:val:table1:cel1"></span>
      <span key="bshe::xtable:val:table1:cel2"></span>
      <span key="bshe::xtable:val:table1:cel3"></span>
    </td>
    <td key='bshe::xtable:col:table1'>
      <span key="bshe::xtable:val:table1:cel1"></span>
      <span key="bshe::xtable:val:table1:cel2"></span>
      <span key="bshe::xtable:val:table1:cel3"></span>
    </td>
    <td key='bshe::xtable:col:table1'>
      <span key="bshe::xtable:val:table1:cel1"></span>
      <span key="bshe::xtable:val:table1:cel2"></span>
      <span key="bshe::xtable:val:table1:cel3"></span>
    </td>
  </tr>
</table>

table1という配列に以下のような配列をセットすると

array(
  0 =>
    array(
      'cel1' => 'a1',
      'cel2' => 'a2',
      'cel3' => 'a3',
    ),
  1 =>
    array(
      'cel1' => 'b1',
      'cel2' => 'b2',
      'cel3' => 'b3',
    ),
  2 =>
    array(
      'cel1' => 'c1',
      'cel2' => 'c2',
      'cel3' => 'c3',
    ),
  3 =>
    array(
      'cel1' => 'd1',
      'cel2' => 'd2',
      'cel3' => 'd3',
    )
)

以下のようなHTMLが生成されます

<table border=1>
  <tr >
    <td >
      <span >a1</span>
      <span >a2</span>
      <span >a3</span>
    </td>
    <td >
      <span >b1</span>
      <span >b2</span>
      <span >b3</span>
    </td>
    <td >
      <span >c1</span>
      <span >c2</span>
      <span >c3</span>
    </td>
  </tr>
  <tr >
    <td >
      <span >d1</span>
      <span >d2</span>
      <span >d3</span>
    </td>
    <td >
      <span ></span>
      <span ></span>
      <span ></span>
    </td>
    <td >
      <span ></span>
      <span ></span>
      <span ></span>
    </td>
  </tr>
</table>

値の他に、タグ自体に属性やスタイルをセットすることも可能です。
詳細はプログラマー向けマニュアルを参照してください。

Page Top
table繰返しを多重に行う。 anchor.png

table繰り返しおよびxtable繰り返し表現は多重にする（テーブルの中にテーブルを置く）ことができます。
(x)table繰り返しの中に設置される(x)table繰り返しの場合、テーブル全体を示すキー属性の表現が異なります。

  • 通常のテーブル全体 
    bshe::table:table:[tableへセットする配列名]
bshe::xtable:table:[tableへセットする配列名]
  • table繰り返しの中に設置されるtable繰り返しのテーブル全体 
    bshe::table:subtable:[tableへセットする配列名]
bshe::xtable:subtable:[tableへセットする配列名]
    このように、2つ目のtableをsubtableと記載します。

実際に以下のようなHTMLを記載し、

<table key='bshe::table:table:tablevalues' border=1>
  <tr key='bshe::table:row:tablevalues'>
    <td key='bshe::table:col:tablevalues:cel1'>a</td>
    <td>
      <table key='bshe::table:subtable:sub1' border=1>
        <tr key='bshe::table:row:sub1'>
          <td key='bshe::table:col:sub1:cel1'>a</td>
          <td key='bshe::table:col:sub1:cel2'>a</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

tablevaluesという配列に以下のようなデータをセットすると、

array(
  '_values' =>
    array(
      0 => array(
          'cel1' => 'a0',
          '_values' =>
            array(
              'sub1' =>
                array(
                  '_values' => array(
                    0 =>array(
                      'cel1' => 'aa0',
                      'cel2' => 'aa1'
                    ),
                    1 =>array(
                      'cel1' => 'aaa0',
                      'cel2' => 'aaa1'
                    )
                  )
                )
            )
        ),
      1 => array(
          'cel1' => 'b0',
          '_values' =>
            array(
              'sub1' =>
                array(
                  '_values' => array(
                    0 =>array(
                      'cel1' => 'ab0',
                      'cel2' => 'ab1'
                    ),
                    1 =>array(
                      'cel1' => 'aba0',
                      'cel2' => 'aba1'
                    )
                  )
                )
            )
        )
      )
    )

以下のようなHTMLが生成されます。

<table border="1" >
  <tr >
    <td >a0</td>
    <td >
      <table border="1" >
        <tr >
          <td >aa0</td>
          <td >aa1</td>
        </tr><tr >
          <td >aaa0</td>
          <td >aaa1</td>
        </tr>
      </table>
     </td>
   </tr>
   <tr >
     <td >b0</td>
     <td >
       <table border="1" >
         <tr >
           <td >ab0</td>
           <td >ab1</td>
         </tr><tr >
           <td >aba0</td>
           <td >aba1</td>
         </tr>
       </table>
     </td>
   </tr>
</table>

値の他に、タグ自体に属性やスタイルをセットすることも可能です。
詳細はプログラマー向けマニュアルを参照してください。

Front page   Diff Backup Copy Rename Reload   New List of pages Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom)
Page Info
Page Name :Bshe/manual/Bshe_View/doc/Designer/table
Page aliases :テーブルの表現
Page owner :abe
Can Read
Groups :All visitors
Users :All visitors
Can Edit
Groups :No one
Users :No one
Counter: 539, today: 1, yesterday: 0
Last-modified: 2009-01-26 (Mon) 21:40:32 (JST) (1209d) by abe
Links: manual Programmer Designer doc table MenuBar

Site admin: bshe@itassist.info