Tabulka s dynamickými sloupci a řádky projekt do předmětu WAP, autor Radim Buchtela

Rezise modul

Drag&drop modul

Zobrazit nativní UI prvky
Složitost tabulky

Doporučení: pro správné grafické vyobrazení ukázkových příkladů je vhodné použít moderní prohlížeč s podporou CSS3 (vlastnosti gradient, shadow, rotate, rgba). Např. Firefox, Chrome či Opera v aktualizované verzi.

Zobrazit pouze demo

Dokumentace

Tabulka s dynamickými sloupci a řádky je navržena jako třída, která byla implementována v javascriptu bez pomoci extrerních knihoven. Naimplementované řešení postihuje zadání projektu v celé šíři, navíc obsahuje i další vychytávky, které lze nastavit v podobě volitených parametrů.

Vlastnosti

Podpora

Funkčnost dynamické tabulky byla úspěšně testována v prohlížečích Firefox, Chrome, Opera a IE8.

Použití

Nalinkování javascriptového souboru dynamicTable.js do hlavičky vašeho HTML dokumentu.

<head>
  …
  <script type="text/javascript" src="dynamicTable.js"></script>
  …
</head>

Vytvoření tabulky v HTML dokumentu opatřené identifikátorem id.

<table id="myTable"> … </table>

Vytvoření dynamické tabulky - vytvoření instance třídy DynamicTable.

<head>
  …
  <script type="text/javascript">
    window.onload = function() { new DynamicTable("myTable", options); };
  </script>
</head>

Interface třídy DynamicTable

Třída DynamicTable poskytuje následují interface, pomocí kterého lze s třídou komunikovat.

DynamicTable(idTable, [options]) Kontruktor třídy, volán při vytváření nové instance třídy. Význam parametrů popsán v sekci níže.
moveCol(indexSrc, indexDst) Přesune sloupec tabulky na nové místo v tabulce. IndexSrc označuje zdrojový sloupec, IndexDst označuje cílový sloupec.
moveRow(indexSrc, indexDst) Přesune řádek tabulky na nové místo v tabulce. IndexSrc označuje zdrojový řádek, IndexDst označuje cílový řádek.
resizeCol(indexCol, width) Změní šířku sloupce na požadovanou hodnotu. IndexCol specifikuje sloupec, width specifikuje šířku sloupce v pixelech.
resizeRow(indexRow, height) Změní výšku řádku na požadovanou hodnotu. IndexRow specifikuje řádek, height specifikuje výšku řádku v pixelech.
var dt = new DynamicTable(idTable, options);
dt.moveRow(0, 2); // přesun řádku o indexu 0 na pozici 2
dt.resizeCol(0, 50); // nastavení prvního sloupce na šířku 50px

Konstruktor třídy DynamicTable

1. parametr: idTable [typ: string] [povinný]

Určuje identifikátor tabulky.

2. parametr: options [typ: object] [nepovinný]

Objekt specifikuje vlastní nastavení. Obsahuje následující vlastnosti:

Proměnná Typ Default Význam
fixedWidthTable boolean false Pevná velikost tabulky.
minWidth number 15 Minimalní šířka sloupce v pixelech.
minHeight number 10 Minimalní výška řádku v pixelech.
visibleHelper boolean true Zobrazení buněk během přesunu.
tolerance string "POINTER" Specifikuje mód pro testovaní, zda-li tažená položka překrývá další položku.
  • "INTERSECT": Ukazatel myši překrývá jinou položku nejméně z 50%.
  • "POINTER": Ukazatel myši překrývá jinou položku.
toleranceDist number 0 Přidává offset pro testování překryvu (v pixelech).
var options = {minWidth: 20, fixedWidthTable: true, tolerance: "INTERSECT"};
var dt = new DynamicTable(idTable, options);

CSS

Naše javascriptová třída DynamicTable během provozu dynamicky generuje/řídí dva třídní modifikátory:

/* CSS code */
.dt-dest { background: blue; }
.dt-selected { background: red; }
table { table-layout: fixed; }

Diskuse

Naše třída si během své inicializace modifikuje strukturu tabulky vložením pomocných HTML elementů. Jako možnou nevýhodu tohoto řešení lze spatřovat v nárůstu nových pomocných HTML elementů (obsah každé buňky je obalen třemi novými elementy), které mohou negativně ovlivňovat výkon překreslování tabulky. Na druhou stranu však toto řešení přináší širokou variabilitu ve stylování vzhledu tabulky a především její nově přidaných řídících elementů, což pro nás bylo prvořadé.