Editor stromového menu v JavaScriptu - Dokončení

JavaScript Hotová řešení Editor stromového menu v JavaScriptu - Dokončení

V minulém tutoriálu o tvorbě editoru stromového menu v JavaScriptu jsme se věnovali obsluze tlačítek a načítání dat AJAXem. Dnes si na stránce vytvoříme editor a dopíšeme ukládání položek, čímž celý projekt dokončíme.

Vytvoření editorů na stránce

Ještě musíme na stránce z inputu ve formuláři vytvořit samotné editory. Metodou querySelectorAll() předáme selector na vybrání požadovaných inputů. Ty zpracujeme cyklem a každý input předáme konstruktoru objektu TreeEditor jako parametr. Nově vytvořený objekt vložíme do globálního pole editors, abychom s editorem mohli případně ještě v budoucnu nějak rozumně pracovat nebo jej mohli využít různými doplňky a podobně.

var editors = [];
function CreateTreeEditor() {
        var elements = document.querySelectorAll("input[data-tree-editor]");
        for (var i = 0; i < elements.length; i++) {
                editors.push(new TreeEditor(elements[i]));
        }
}

Metodu zavolejme v obsluze události načtení webové stránky.

window.onload = function () {
        CreateTreeEditor();
};

Pokud máme správně nastavenou URL a server správně vrací data, měl by editor obsahovat základně formátovaná podobná políčka.

Editor stromového menu v JavaScriptu

Na to, že jsme se ještě vůbec nezabývali stylováním, výsledek nevypadá špatně.

Styly aplikace

Přidejme si do aplikace nějaký styl a nalinkujme ho do stránky.


 

...konec náhledu článku...

Prémiový článek

Prémiový článek

Na itnetwork.cz se nachází největší a nejucelenější česká databáze s výukovými články, jejímž cílem je umožnit kvalitní vzdělání v oblasti IT úplně každému. Měsíčně zobrazíme k milionu článků a sklidíme desítky děkovných emailů, kde nám sdělujete, že jsme vám pomohli k lepšímu zaměstnání nebo vzdělání.

Ačkoli se snažíme držet většinu obsahu úplně zadarmo, udržovat síť v provozu a aktuální stojí obrovské úsilí. Proto je nějaký obsah, jako cvičení nebo odbornější články, přístupný pouze za body. Nebojte, nestojí to skoro nic :)

Popis článku

Požadovaný článek má následující obsah:

Dokončení webové aplikace pro editaci stromového menu. Ukážeme si, jak lze data jednoduše posílat na server, jak správně ošetřit skryté položky a ukládaní.
Pro přístup k článku potřebuješ 10 bodů
Na svém účtu máš aktuálně 0 bodů
10 bodů získáš za přidání svého článku na síť nebo za 25 Kč

Před koupí tohoto článku je třeba koupit předchozí díl

Koupí článku k němu získáš neomezený přístup a to napořád. Posuneš své znalosti zas kousek dopředu a zároveň nám pomůžeš udržovat celý projekt při životě a pomáhat vám tak k lepší budoucnosti.

Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.

Body získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.

Dobít body můžeš okamžitě např.:

Kartou SMS Převodem
Kartou SMS Převodem

  Aktivity (1)

Článek pro vás napsal Michal Žůrek (misaz)
Avatar
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.