Týdenní kalendář pomocí zatržítek a JavaScriptu

    0

    Následující článek popisuje základy vytvoření a obsluhy dvourozměrné tabulky se zatržítky – checkboxy. Jde o skript, který se po nezbytné modifikaci hodí například pro zadávání vytížení automobilů během týdne, rezervaci ubytování a podobné aplikace.

    Ve své nejjednodušší formě může vypadat dvourozměrná tabulka checkboxů nějak takto (tlačítka v záhlaví sloupců, potažmo řádků invertují výběr v příslušném sloupci/řádku):

    Skript, pracující v této ukázce, je velmi jednoduchý: skládá se z „kreslící“ funkce, jež vytváří tabulku s příslušnými ovládacími prvky (tj. checkboxy a tlačítky), a z dvojice funkcí, které zabezpečují inverzi označení checkboxů v příslušném řádku či sloupci. Nejdříve ze všeho však maximálně zjednodušený HTML kód formuláře, z nějž je volána první, „kreslící“ funkce:

    <form name="menu">
        <script>
            WriteTable("menu")
        </script>
    </form>

    Kreslící funkce WriteTable má na vstupu jediný parametr, určující jméno formuláře, v němž je tabulka umístěna (toto jméno se předává dál, do obslužných funkcí inverze sloupce či řádku). Zde je kód funkce WriteTable:

    function WriteTable( formname ) {
    var j,tag;
        document.write(‚<table border="1">‘)
        for(var i=0; i<=rows; i++) {
            document.write(‚<tr>‘)
            for(j=0; j<=columns; j++) {
                if(i==0) {
                tag = (j==0) ?
                ‚&nbsp;‘ :    
                ‚<input type="button" onclick="CheckColumn(\“ + formname + ‚\‘,’+j+‘)" value=" ‚ + j +‘ " name="A">‘
                    document.write(‚<td>‘ + tag + ‚</td>‘)
                } else {
                    tag = (j==0) ?
                    ‚<input type="button" onclick="CheckRow(\“ + formname + ‚\‘,’+i+‘)" value="‘ + rowNames[i-1]+’" name="A">‘ :
                    ‚<input type="checkbox" name="C_‘ + i + ‚_‘ + j+’" value="ON">‘
                    document.writeln(‚<td>‘ + tag + ‚</td>‘)
                }
            }
            document.write(‚</tr>‘)
        }
        document.write(‚</table>‘)
    }

    Jde (jako obvykle u tohoto typu funkcí) víceméně jen o množství document.write, důležité je především pojmenování jednotlivých checkboxů – jejich jména jsou konstruována stylem C_cisloradku_cislosloupce (toto pojmenování využívají níže uvedené funkce). Funkce také používá několik konstant, s jejichž pomocí lze měnit počet řádků a sloupců v tabulce a také názvy tlačítek v záhlaví jednotlivých řádků:

    var columns=9;
    var rows = 5;
    var rowNames = new Array( ‚Po‘,’Út‘,’St‘,’Čt‘,’Pá‘);

    Po stisku tlačítka v záhlaví příslušného sloupce/řádku je volána (v handleru události onClick jedna z dvojice funkcí na inverzi příslušného sloupce/řádku. Obě funkce jsou téměř totožné a jejich kód vypadá takto:

    function CheckRow(formname,row) {
    var chb;
        for(var i=1; i<=columns; i++) {
            chb = eval(‚document.forms["‘ + formname + ‚"].C_‘ + row + ‚_‘ + i);
            chb.checked = !chb.checked
        }
    }
    function CheckColumn(formname,column) {
    var chb;
        for(var i=1; i<=rows; i++) {
            chb = eval(‚document.forms["‘ + formname + ‚"].C_‘ + i + ‚_‘ + column);
            chb.checked = !chb.checked
        }
    }

    Tolik k příkladu, na závěr si ještě řekněme několik slov o využití a rozšíření tohoto skriptu.

    Po nezbytných modifikacích lze skript použít všude tam, kde potřebujeme HTML rozhraním (často i v podnikové síti intranetu) plánovat užití určité sumy zdrojů v závislosti na druhé, nejčastěji časové ose. Namátkou lze jmenovat užití služebních aut v průběhu dne/týdne, plánování rozvrhu hodin, rezervace ubytování atp. Je samozřejmé, že věšina aplikací se neobejde bez spolupráce se serverovými skripty a ovšem databázemi, to je už ale trochu jiná kapitola.

    Co se týká možných vylepšení skriptu, určitě by se uplatnila rozšířená obsluha zaškrknutí jednotlivých sloupců/řádků – tedy nejen inverze, ale také zaškrknout/odškrknout vše, původní hodnoty atp. Druhým významným vylepšením by pro některé aplikace byla možnost více stavů v jednotlivých políčkách než jen zapnuto/vypnuto – zde se dá s výhodou využít kombinace s tří (či vícestavovým) checkboxem, popsaném v jednom z minulých článků.

    Zda si některou konkrétní aplikaci uvedeného skriptu ukážeme příště, záleží na vás čtenářích – pokud se mi v poště nebo v diskusi pod článkem sejde od čtenářů více návrhů na stejné téma, pokračování článku na sebe nenechá dlouho čekat.

    Přeji vám příjemný den.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

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

    Odpovědět