j-DataGrid - Total.js part 2

j-DataGrid je súčasťou client-side knižnice jComponent od Total.js. Viac informácií o tomto komponente môžete nájsť na webe componentator.com alebo v GitHub repozitári.

V predchádzajúcom blogu som písal o niektorých základných funkciách komponentu j-DataGrid, napríklad o tom, ako používať rôzne dátové typy pre stĺpce (string, number, phone, email, boolean, date). V tomto blogu vám chcem predstaviť komplexnejšie funkcie, napríklad ako spracovať udalosti kliknutia na jednotlivé riadky, ako používať zaškrtávacie políčka v riadkoch alebo ako používať ovládací panel pre každý riadok.

Zachytenie kliknutia na riadok

Komponent j-DataGrid podporuje funkciu zachytávania kliknutia na riadok v tabuľke. Je to veľmi jednoduché, ako prvé musíme pridať nastavenie click do konfigurácie nášho datagridu.

<ui-component name="datagrid" path="?.items" config="margin:22;click:?/click">
  <script type="text/plain">
    [
      { name: 'name', text: 'Name', width: 200 },
      { name: 'age', text: 'Age', type: 'number' },
      { name: 'phone', text: 'Phone', type: 'phone' },
      { name: 'email', text: 'Email', type: 'email' },
      { name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
      { name: 'created', text: 'Created', align: 1, template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }, 
    ]
  </script>
</ui-component>

Funkciu, ktorú chceme vyvolať sme nazvali ?/click. Túto funkciu si teda musíme vytvoriť v danom PLUGINe.

exports.click = function(row, grid, row_el) {
  console.log(row);
};

V tejto funkcií máme k dispozícií viacero argumentov, ale nám v tomto prípade postačí len prvý, ktorým je row, ktorý si vypíšeme do konzoly. Po kliknutí na niektorý z riadkov sa nám v konzole objaví celý objekt, ktorý sa nachádza v danom riadku. Po získaní týchto dát môžeme vykonať ďalšie operácie, ako napríklad presmerovať užívateľa na detail vybraného objektu.

Zaškrtávacie polia v riadkoch

Mohli ste si všimnúť, že v ľavej časti tabuľky máme v každom z riadkov zaškrtávacie pole. Môžeme ich zaškrtnúť a následne uložiť dáta z označených riadkov na definovanú cestu. Musíme si teda definovať cestu, kde chceme aby sa nám dáta ukladali a to urobíme tak, že pridáme nastavenie checked do konfigurácie nášho datagridu.

<ui-component name="datagrid" path="?.items" config="margin:22;click:?/click;checked:?.checked">
  <script type="text/plain">
    [
      { name: 'name', text: 'Name', width: 200 },
      { name: 'age', text: 'Age', type: 'number' },
      { name: 'phone', text: 'Phone', type: 'phone' },
      { name: 'email', text: 'Email', type: 'email' },
      { name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
      { name: 'created', text: 'Created', align: 1, template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }, 
    ]
  </script>
</ui-component>

S takto nastavenou konfiguráciou môžeme pristupovať k označeným riadkom na ceste ?.checked (absolútna cesta je common.checked, pretože sa nachádzame v plugine common).

Takto môžeme vykonávať operácie nad väčším množstvom dát súčasne.

Pridanie tlačidiel

Ak potrebujeme pridať viac ovládacích tlačidiel, s ktorými môže uživateľ pracovať, môžeme tak urobiť pridaním "vyskakovacieho" panelu nad jednotlivými riadkami.

Na ich pridanie musíme do nášho príkladu pridať dve veci, prvou je nastavenie button do konfigurácie nášho datagridu. Druhou je deklarácia týchto tlačidiel v script tagu.

<ui-component name="datagrid" path="?.items" config="margin:22;click:?/click;checked:?.checked;button:?/clicked">
  <script type="text/plain">
    [
      { name: 'name', text: 'Name', width: 200 },
      { name: 'age', text: 'Age', type: 'number' },
      { name: 'phone', text: 'Phone', type: 'phone' },
      { name: 'email', text: 'Email', type: 'email' },
      { name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
      { name: 'created', text: 'Created', align: 1, template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }, 
      { type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
    ]
  </script>
</ui-component>

Použitý kód:

{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }

Ako môžeme vidieť, tento objekt má dve vlastnosti. Prvou je type s hodnotou controls a druhou je template, v ktorom je template pre panel s tlačidlami. Náš ovládací panel bude obsahovať tri tlačidlá, ktorými sú Show, edit a remove.

Po kliknutí na každé z tlačidiel sa nám vyvolá funkcia ?.clicked, ktorú si teraz vytvoríme.

exports.clicked = function(btnname, row, button, e) {
  console.log(btnname, row);
};

V tejto funkcií máme možnosť využiť štyri argumenty, no nám postačia prvé dva, ktorými sú btnname a row, ktoré si zobrazíme v konzole.

V zobrazenom príklade môžeme vidieť, že keď presunieme kurzor nad niektorý z riadkov, tak sa nám zobrazí náš panel s tlačidlami. Po kliknutí na niektoré z tlačidiel sa nám v konzole zobrazí názov daného tlačidla (tento názov je prevzatý z atribútu name v tlačidle) a dáta z daného riadku. V tomto príklade sme použili tri tlačidlá, takže keď máme jeho názov a dáta, tak môžeme určiť akú operáciu chceme na daných dátach vykonať (v tomto príklade napríklad zobraziť detail, upraviť dáta alebo ich vymazať).

Dúfam, že ste sa v tomto blogu naučili niečo nové, ale nezabúdajte, že to bol len príklad pár základných možností tohto komponentu a ponúka nám toho oveľa viac.