Hlavná stránka · Diskusné Fórum · Pracovné príležitosti · Zoznam

 Main Menu
o Hlavná stránka
o Zoznam tém
o Zoznam
o Odporučte nás
o Užívatelia
o Vaše konto
o Pridaj článok
o Štatistiky
o Top 10

 Reklama


 Developer Zone's
o Internet
o Tools
o Linux
o CGI Zone
o ASP Zone
o ASP.net
o PHP Zone
o CSS Zone
o JavaScript
o MySQL
o WAP / WML
o WML / WMLScript
o XML / XHTML
o Tipy a triky
o Best of web
o WebServers
o WebDesign
o Grafika

 Servis
o Vyhľadávanie
o Fórum
o Workoffice
o Zoznam článkov
o Reklama
o Pridaj článok
o Pridaj novinku

Napíšte nám
Homepage Do favoritov

 LinkExpres
Interval.cz · Pc.sk
Builder.cz · Mobilmania
PCSvet.cz · Asp.cz
Webdnes · Živě.sk
Zoznam.sk · Atlas.sk
Inzine.sk · PHP.sk
Agent.sk · Lupa.cz
Code.box.sk · Root.cz
Pixel32 · Grafika.cz

 forum.developer.sk
o Fórum ::
o Markup languages
o Scriptové jazyky
o CGI
o PHP/MySQL
o Perl
o Grafika
o Webservery
o HTML Editory
o Browsery
o Bookmarx
o ASP
o Vytvor tému ::

 Pracovné príležitosti
o Ponúkate prácu?
o Hľadáte prácu?

 Autori developer.sk
o Martin Nemeček
o Sväťo Straka
o Jany Masaryk
o Jozef Murín

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

 
 Príslušné odkazy k téme
  • Javascript.sk
    Viac o téme: JavaScript | Iné články od: Admin | Pošli komentár | Stránka vhodná na tlač width=15 height=11  Pošli tento článok priateľovi, známemu width=15 height=11


    Najčítanejšie články JavaScript:
    Pulldown menu a tabuľka odkazov

    Ďalšie články v rubrike JavaScript:

  •  

    "Zotrieďovacia tabuľka pomocou JavaScriptu" | Login / vytvor konto | 0 Komentárov
    Prah
    Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok.



    Autorské práva:   ©1999 - 2001 Developer Zone [developer@developer.sk]

    Všetky články sú vlastníctvom autorov Developer Zone. Všetky práva vyhradené. Stránky Developer.sk sú vytvorené pomocou PHP-Nuke.
    Odkazy na nové články je možné preberať pomocou:Backend.php.