[ 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.
|
|
|
Homepage
