Editace položek ve vícesloupcovém seznamu 1.

V mých předchozích článcích jsme si ukázali postupy a JavaScripty, sloužící k napodobení chování Windows dialogových boxů na HTML stránkách. Tentokrát v tom budeme pokračovat a předvedeme si simulaci vícesloupcového seznamu, spojeného s možností editace jednotlivých položek.

Jednodušší než dlouhé popisy funkce bude rovnou si ukázat, jak zmíněný strojek pracuje. Prohlédněte si (a zkuste obsloužit) následující formulář – kliknutím na některý ze seznamů v horní části vyberete položku, v dolní části formuláře ji můžete opravit a kliknutím na tlačítko „Zapsat“ přepíšete opravené hodnoty zpět do seznamu:

Funkčnost celého příkladu zajišťují dvě JavaScriptové funkce. Než si ukážeme, jak pracují, nejprve uvedeme HTML kód obsluhovaného formuláře. Jednotlivá formulářová pole jsou uvedena v buňkách tabulky a vzhledem k jejich množství je celý kód poněkud dlouhý - nikoliv však složitý:

V uvedeném HTML kódu jsou důležité zejména:

• prvky potřebné pro adresaci: název formuláře je "demo", názvy jednotlivých polí SELECT v horní části formuláře jsou "field1" až "field3". Editační pole v dolní části formuláře se jmenují "cena", "typ" a "kmh".
• vazby na JavaScript: z handleru události onChange na jednotlivých polích select je volána funkce Reselect(select_field); z handleru události onClick na tlačítku "Zapsat" je volána funkce WriteValues().
• způsob zápisu informace v polích SELECT: jak hodnota jednotlivých položek (vlastnost value), tak zobrazený text jsou nastaveny na stejnou hodnotu.

První JavaScript funkcí, volanou z formuláře, je funkce Reselect(), volaná z handlerů události onChange na jednotlivých seznamech, tj. vždy, když je v některém ze seznamů změněn výběr. Její vstupní parametr určuje, na kterém ze seznamů událost onChange nastala. Úkolem funkce Reselect() je především "srovnat" výběr ve všech třech polích SELECT na stejnou hodnotu - tedy zajistit, aby ve všech seznamech byla vybrána stejná položka. Druhým úkolem je přepis právě vybraných hodnot do editačních polí ve spodní části formuláře. Zde je kód funkce Reselect:

Hodnoty, přepisované ze seznamů do editačních polí, bereme z vlastnosti value jednotlivých položek. Protože jak zobrazený text (vlastnost text), tak hodnota value jsou nastaveny na stejnou hodnotu, je fakticky jedno, odkud přepisovaný údaj vezmeme. Pokud byste však upravovali skript tak, aby ve vlastnosti value byla jiná hodnota, než uživatel vidí (má-li ovšem taková úprava smysl), pak by bylo nutné na podobnou změnu pamatovat zde.

Druhá použitá funkce se jmenuje WriteValues(), volá se po stisku tlačítka "Zapsat" (událost onClick), a má za úkol přepsat hodnoty z editačních polí opačným směrem, do aktuálně vybrané položky v seznamu (seznamech):

Text je zpět do seznamů přepisován dvojmo, jednou do vlastnosti value, podruhé do viditelného textu (vlastnosti text) - viz poznámka k předchozí funkci. Aktuálně vybraný řádek zjišťujeme v prvním seznamu SELECT, vzhledem k tomu, že máme předchozí funkcí zajištěny tyto hodnoty stejné ve všech třech seznamech, mohli bychom brát uvedenou hodnotu i ze seznamu jiného.

A to je k vícesloupcovému seznamu pro tentokrát vše, přeji vám příjemný den.