[ 16. December 1999]
- Martin_Nemecek
Zotrieďovacia tabuľka pomocou JavaScriptu
JavaScript v určitých situáciách dokáže svojími schopnosťami veľmi ulahčiť prácu a pomôcť tvorcovi dynamickej stránky napríklad
vytvoriť ťabuľku, podobnú excelovskej, v ktorej sa dajú údaje zotrieďovať spôsobom akým je potrebné.
Potom je napríklad možné údaje v takejto tabuľke zotrieďovať podľa viacerých kritérií, kombinovať zotrieďovanie podľa jednotlivých stĺpcov, alebo riadkov v tabuľke, jednoduchým kliknutím na záhlavie v danom stĺci, alebo riadku.
Táto schopnosť JavaScriptu je daná jeho možnosťami v oblasti modelovania objektov a týmto spôsobom výrazne rozširuje možnosti klasického HTML v dynamickej oblasti spracovania dát.
Nasledovný príklad vám umožní zakomponovať si do vašej HTML stránky tabuľku v ktorej údaje sa budú dať zotriediť podľa viacerých možností. Konkrétne podľa údajov v stĺpcoch. Tento spôsob zotrieďovania údajov je výhodné použiť vo viacerých situáciách. Napríklad v tabuľke zamestnancov je možné celý zoznam roztriediť podľa veku zamestnancov, ich platu, alebo veku. Taktiež zotriedenie napríklad mien podľa abcedy.
Teraz si trochu bližšie popíšme nášu úlohu.
V prvom rade si musíme vytvoriť objekt ZotrTable
Objekt ZotrTable je tvorený ako constructor.
var table = new ZotrTable(id,rows,columns,border,width,align)
Čiže hodnoty construktora sú údaje, ktoré identifikujú jednotlivé hodnoty tabuľky ako sú : id - id tabuľky ,rows - počet riadkov v tabuľke,columns - počet stĺpcov v tabuľke,border - či má tabuľka okraj,width - veľkosť v bodoch,align - zarovnanie.
Napríklad by to mohlo vyzerať aj takto :
var table = new ZotrTable("priklad",5,5,1,"400","CENTER")
Takže táto tabuľka by sa nazývala "priklad", mala by 5 stľpcov aj riadkov, bola by s okrajom, veľkosť 400 bodov a zarovnaná by bola na stred. Potom by zadefinovanie tagu <TABLE> vyzeralo asi nasledovne :
<TABLE BORDER="1" WIDTH="400" ALIGN="CENTER">
Po vytvorení objektu ZotrTable je potrebné zadefinovať dáta, ktorými chceme zaplniť našu tabuľku a tlačítka, ktoré budú v záhlaví tabuľky a bude nimi ovládané samotné zotrieďovanie.
Na zadefinovanie dát použijeme metódu setData() a na zadefinovanie tlačítok - buttons metódu setButtons() .
var data = new Array( new Array("row0
col0","row0 col1","row0 col2"), new Array("row1 col0","row1
col1","row1 col2"), new Array("row2 col0","row2 col1","row2
col2"), new Array("row3 col0","row3 col1","row3 col2"), ) var
table = new
ZotrTable("priklad2",4,3,1,"300","CENTER") table.setData(data)
Metóda setButtons() vytvára usporiadanie butonov v záhlaví tabuľky a prideľuje im názvy a argumenty. Napríklad budeme chcieť zotriediť tabuľku podľa veku, čísla topánok a priezviska. Potom názvy butonov budú :"Vek", "Topanky" a "Priezvisko"
var buttons = new Array("Vek","Topanky","Priezvisko") table.setButtons(buttons)
Keď je objekt ZotrTable vytvorený a zinicializovaný, je možné ho zobraziť pomocou metódy display(). Kompletný príklad by potom mohol vypadať nasledovne:
var data = new Array( new
Array("Jakes","Andrej","10"), new Array("Beres","Michal","8"), new
Array("Kratky","Peter","9"), new
Array("Smely","Jan","7"), ) var buttons = new Array("Priezvisko","Meno","CisloTopanok") var table = new
ZotrTable("priklad3",4,3,1,"250","RIGHT") table.setData(data) table.setButtons(buttons) table.display()
A výsledná tabuľka by mohla mať nasledujúcu podobu:
Súbor zotrTable.js, kde sú zadeklarované jednotlivé funkcie a samotný mechanizmus zotrieďovania sa nachádza na samostatnej adrese.
|
|
|