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.

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...
Pokračuj dál