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:

Cena Typ Km/h
Cena:  
Typ:  
Km/h:  
   

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ý:

<form name="demo">
<table border="0" cellspacing="0" bgcolor="white">
    <tr>
    <td align="left">Cena</td><td align="left">Typ</td><td align="left">Km/h</td>
    </tr>
    <tr>
        <td align="left"><select name="field1" size="4" onChange="Reselect(this)">
            <option value="250000">250000</option>
            <option value="3000000">3000000</option>
            <option value="5000">5000</option>
            <option value="120000">120000</option>
        </select></td>
        <td align="left"><select name="field2" size="4" onChange="Reselect(this)">
            <option value="auto">auto</option>
            <option value="letadlo">letadlo</option>
            <option value="kolobezka">kolobezka</option>
            <option value="motorka">motorka</option>
        </select></td>
        <td align="left"><select name="field3" size="4" onChange="Reselect(this)">
            <option value="145">145</option>
            <option value="800">800</option>
            <option value="5">5</option>
            <option value="180">180</option>
        </select></td>
    </tr>
    <tr>
        <td align="right">Cena:</td>
        <td align="left"><input type="text" name="cena" size="7"></td>
        <td align="left">&nbsp;</td>
    </tr>
    <tr>
        <td align="right">Typ:</td>
        <td align="left"><input type="text" name="typ" size="14"></td>
        <td align="left">&nbsp;</td>
    </tr>
    <tr>
        <td align="right">Km/h:</td>
        <td align="left"><input type="text" name="kmh" size="7"></td>
        <td align="left">&nbsp;</td>
    </tr>
    <tr>
        <td align="left">&nbsp;</td>
        <td align="left"><input type="button" value="Zapsat" name="B1" onClick="WriteValues()"></td>
        <td align="left">&nbsp;</td>
    </tr>
</table>
</form>

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:

function Reselect(theSelect){
    // zjistíme index aktuálně vybraného prvku
    selindex = theSelect.selectedIndex
    with(document.demo) {
       
        // Zmenime vyber ve vsech polich formulare
        field1.selectedIndex = selindex
        field2.selectedIndex = selindex
        field3.selectedIndex = selindex
        // Prepiseme hodnoty do edit. poli
        cena.value = field1.options[selindex].value
        typ.value = field2.options[selindex].value
        kmh.value = field3.options[selindex].value
    }
}

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):

function WriteValues() {
    with(document.demo) {
        // zjistíme index aktuálně vybraného prvku
        selindex = field1.selectedIndex
        if(selindex<0) return;
        // Prepis zpet do select poli
        field1.options[selindex].value = cena.value
        field1.options[selindex].text = cena.value
        field2.options[selindex].value = typ.value
        field2.options[selindex].text = typ.value
        field3.options[selindex].value = kmh.value
        field3.options[selindex].text = kmh.value
    }   
}

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.

Žádný příspěvek v diskuzi

Odpovědět