47.15.6. Zobrazení dat v tabulkové formě

47.15.6. Zobrazení dat v tabulkové formě
	47.15. Formuláře

47.15.6.1. HTML tabulky
47.15.6.2. Přehled záznamů s metodou index

Tabulka je přirozený způsob jak reprezentovat informace které jsou umístněny v pravidelné mřížce tabulky. O tom jak prezentovat data pomocí tabulek si ukážeme v následujících stránkách.

WORKING: Editovat.

Někdy potřebujeme zobrazit data z databáze ve formě tabulky, protože je to přirozený způsob jejich prezentace. Něž přistoupíme k samotnému vytváření pohledu, popíšeme si jak bude tabulka vypadat v XHTML 1.1..

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1/EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    ⋮
    ⋮
</html>

Nyní, když víme jaký html kód budeme vytvářet, můžeme přistoupit k psaní pohledu. Pohled rozdělíme do dvou souborů. V prvním což je list.rhtml je pospána samotná tabulka a její hlavička. V druhém, vnořeném pohledu jsou popsány řádky tabulky. Nejdříve tabulka a její hlavička v souboru app/views/tabulka/list.rhtml:

<h1>Název tabulky</h1>
<table class="data" rules="all">
  <caption>Název tabulky</caption>
  <thead>
    <tr class="head">
      <th>#</th>
      <th>sloupec</th>
      ⋮ titulky k jednotlivým sloupcům v tazích <th>
    </tr>
  </thead>
  <tbody>
    <%= render_collection_of_partials 'table_row', @tabulka %>
  </tbody>
</table>

V uvedeném vzoru jsem použil jak popis před tabulkou v tagu h1, tak i popis v tabulce pomocí tagu caption. V značkách table a tr definuji class, jenž používám v css k úpravě designu tabulky. Samotné řádka tabulky, její tělo, nechám na zobrazení vloženému pohledu table_row. Tento je uložen v souboru app/views/tabulka/_table_row.rhtml

<%# table_row_counter začíná počítat řádky od 0.  My je logicky číslujeme od 1.  Proto ten výraz. -%<
<tr class="<%= table_row_counter.+(1).modulo(2).nonzero? ? 'odd' : 'even' -%>">
  <td><$= table_row.id -></td>
  <td><$= table_row.sloupec -></td>  
  ⋮ zobrazení dat ostatních sloupců v tazích <td>
  <%# Následuje definice příkazů na řádku: >
  <td><%= link_to 'Ukaž', :action => 'show', :id => table_row %></td>
  <td><%= link_to 'Odstraň', { :action => 'destroy', :id => table_row }, :confirm => 'Jste si jist?', :method => :post %></td>  
</tr>

Na uvedené předloze je zajímavý způsob definice class pro rozlišení lichých a sudých řádků. Protože počitadlo table_row_counter počítá řádky od nuly, a my chceme aby číslování počínalo jedničkou. Tedy první řádek tabulky je řádek lichý, zvětšíme pro výpočet lichost/sudosti toto počitadlo o jedničku. Zvolil jsem raději tento zápis než kratší a více kryptické prohození řetězců "odd" a "even".

V Rails existuje elegantnější zápis pro proužkování než předchozí. Využívá se při nem pomocná metoda cycle. Uvedený řádek s tr elementem bude vypadat za použití této pomocné metody následovně:

<tr class="<%= cycle('odd', 'even')%>">

K uvedeným šablonám ještě patří část css souboru jenž nám tabulku obarví. Efekt kterého chci dosáhnout je ten že liché a sudé řádky mají jinou barvu podkladu a vytvářejí tak proužky. Pro odlišení ještě zvolím jinou barvu podkladu pro první řádek tabulky s nadpisy slpoupců.

/*
 * Nastavení vlastností tabulek s daty.
 */
table.data tr.head { background-color: #E0E0F0; } /* Titulek: šedá do modra */
table.data tr.odd  { background-color: #FFFFE0; } /* Lichý: světle žlutý */
table.data tr.even { background-color: #E0FFE0; } /* Sudý: světle zelený */

FIXME:EDIT


47.15.5. Číselník v modelu		47.15.6.1. HTML tabulky