site logo

Formulář jako tabulkový procesor

V některých případech je vhodné při editování vidět data z okolních záznamů, případně celou databázovou tabulku. Například při editování výkonových norem pro nový sortiment je vhodné vidět data starších výrobků a tedy již odladěných norem, při editování technologického postupu v aplikaci Nástrojárna je žádoucí vidět celý techologický postup při editování jedné, dílčí operace. Některé jednoduché tabulky, typicky číselníky, jsou rovněž vhodné pro použití tohoto typu formuláře.

V podstatě jde o to, že je zobrazena celá tabulka a kliknutím na vybraný řádek je otevřen editovací formulář pouze pro tento jeden řádek. Formulář je vizuálně součástí tabulky a takový způsob práce by mohl vzdáleně připomínat práci s tabulkovým procesorem. Pracovně to nazývám editování inline.

Ukázka formuláře není plně interaktivní, tj. formulář je trvale otevřen na jednom předvoleném řádku a nejde přepnout na jiný řádek, editovaná data se nikam neukládají. Cílem ukázky je funkční kompaktní formulář, zobrazující tabulková a formulářová data zarovnaná do zákrytu pod sebe, při zachování stejného vzhledu v běžných browserech.

pořadí příjmení jméno os. číslo aktivní
 1  Kopecký Marian 2720
 2  Kopecká Marie 2740
 3  Kovář Martin 2760
 5  Baroš Josef 1630  
 6  Ječmen Miloslav 3270  
 7  Venglář Vítězslav 2270  
přidej novou položku

Zarovnání tabulkových a formulářových dat vlevo i vpravo se přibližně shoduje. V některých prohlížečích je při pozorném prohlížení viditelný jednopixelový posun obsahu formulářových polí vůči tabulkovým datům.

Šířka vstupních polí je stanovena jednotně stylem width: 100%; padding: 0;. V browserech IE a Opera se projeví chyba typu mizející textový kurzor při pravém okraji textového pole. Zkuste smazat a zapisovat text ve sloupci os. číslo a sledujte textový kurzor na pozici vpravo.

V moderních browserech odstraníme chybu textového kurzoru nastavením padding: 0 4px; width: 100%; a současně nastavením box-sizing: border-box; pro všechna vstupní pole, tak aby byla správně vypočtena šířka polí input podle tradičního box modelu (je nutné doplnit správné prefixy pro všechny typy browserů). Současně musíme nastavit padding: 0; pro třídu .inp.

Ani pak nedosáhneme přesného řázení datových a formulářových polí přesně pod sebou. Firefox, Chrome a Safari vykreslí text v prvku input type="text" posunutý o 1 pixel podle zarovnání textu. Asi to souvisí s ošetřením chyby typu mizející textový kurzor. Posun je vidět i na screenshotech tohoto prvku.

V reálné aplikaci po odeslání formuláře a uložení změn je zobrazena updatovaná, stejná stránka aby bylo možné pokračovat v editování. Je dobré nastavit barevné pozadí naposledy editovaného řádku. Usnadní to zpětnou kontrolu vložených dat. Někdy je vhodné rozšířit formulář o přídavné tlačítko pro ukončení editování (zavření formuláře), případně o další tlačítko pro smazání záznamu. V číselnících, kde není možné smazat záznamy, nastavíme záznam do neaktivního stavu pomocí <input type="checkbox".../>.

Formátování tabulky a řádkový kuzor je popsáno ve článku tabulky a CSS.


<style type="text/css">
/* ---- table ----- */
table, input {font: normal 13px Arial, SansSerif, Verdana;}
table {
  border: 0;
  border-left: 1px solid #aaa;
  border-top:  1px solid #aaa;
  table-layout: fixed;
  width: 500px;
}
th, td {
  border: 0;
  border-right:  1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
th {
  background: url(/at/files/bg_table.png);
  font-weight: normal;
  border-left:  1px solid #cff;
  border-right: 1px solid #358;
}
td {text-align: center; padding: 0 4px; margin: 0;}
.tdL {text-align: left;}
.tdR {text-align: right;}

/* ------- form -------- */
td.inp  {background: #ffa;} 
.iL, .iR, .iC {width: 100%; margin:0; padding: 0; border:0;
               background: #ffa; float: left;}
.iL {text-align: left;}
.iR {text-align: right;}
.iC {text-align: center;}
.ok {width: 13px; height: 14px; margin: 0; border: 0;}
</style>

Dlouhá stránka

Při práci s tímto typem formuláře je na server střídavě posílán požadavek na otevření formuláře v tabulce, následovaný požadavkem na uložení editovaných dat (a zavření formuláře). Server vrací vždy stejnou (mírně upravenou) tabulku. Pokud stránka přesahuje výšku browseru budeme potřebovat udržet svislou pozici posuvníku stránky tak, aby se stránka vrácená ze serveru zobrazila ve stejné vertikální pozici. Jinak bychom museli rolovat svislým posuvníkem a hledat otevřený formulář, nebo právě upravený řádek.

Následující skript vrací horní pozici svislého posuvníku, tuto hodnotu uloží validační skript do skrytého pole formuláře před odesláním na server. Server vrátí pozici svislého posuvníku pomocí příkazu pro narolování stránky scrollTo(...) v elementu body.


<script type="text/javascript">
...
function topSL() {
  if (window.innerHeight) {
    return window.pageYOffset; // FF
  }
  else if (document.documentElement && document.documentElement.scrollTop) {
    return document.documentElement.scrollTop; // IE
  }
  else if (document.body) {
    return document.body.scrollTop;
  }
  return 0;
}
</script>

<body onload="scrollTo(0, 245)">
...
</body>

updated 18.12.2007