V AG Grid věnujeme naší dokumentaci hodně úsilí, protože chápeme, že dobrá dokumentace pomáhá vývojářům dosáhnout jejich cílů. V tomto příspěvku chci zdůraznit některé funkce naší dokumentace, které mohou výrazně zlepšit vaši produktivitu.
Rámec volby
AG Grid je agnostická datová mřížka, která je dodávána s vyhrazenými balíčky pro Angular, React a Vue navíc k nabídce vanilla Javascript/Typescript.
Jak si dokážete představit, způsob interakce s mřížkou bude záviset na používaném rámci. V důsledku toho přizpůsobíme fragmenty kódu dokumentace a příklady na základě vašeho rámce. Navíc k textovému obsahu přidáváme poznámky specifické pro daný framework na základě vašeho výběru.
To je důvod, proč je důležité vybrat si svůj rámec, abyste viděli co nejpřesnější dokumentaci. Jako příklad se podívejte, jak se mění definice sloupců na základě vašeho výběru rámce v následujícím příkladu kódu.
Javascript / Typescript
Úhlové
Reagovat
Vue
Příklad kódu specifického pro rámec
Dalším klíčovým prvkem naší dokumentace je náš závazek poskytovat úplné příklady kódu pro všechny funkce mřížky/grafu. Aby bylo možné zkopírovat kód z našich příkladů přímo do vašich projektů, vytváříme příklady napsané v každém frameworku.
V době psaní tohoto článku podporujeme všechny následující varianty rámců.
- Javascript / Typescript
- Úhlové
- Reagovat – Háčky / třídy
- Vue – 2/3
Všimněte si, jak se příklad znovu načte, když změníte variantu rámce.
Chcete-li zobrazit zdrojový kód příkladu, použijte postranní nabídku příkladu běžce.
Moduly vs balíčky
V předchozím příspěvku jsme vysvětlili, jak používat moduly funkcí k minimalizaci velikosti balíčku aplikací. Součástí kódu vyžadovaného tímto přístupem je registrace modulů funkcí.
Pro vývojáře je velmi užitečné mít možnost vidět, které moduly funkcí jsou pro danou funkci vyžadovány. Naše příklady modulů to dělají. Zahrnují registraci modulů funkcí, která vám umožní rychle zjistit, které moduly je třeba importovat do vaší aplikace.
import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
// Register the required feature modules with the Grid
ModuleRegistry.registerModules([
ClientSideRowModelModule,
RangeSelectionModule,
]);
Případně, pokud pracujete s packages není vyžadována žádná registrace modulu, takže vám můžeme poskytnout výstižnější kód.
Správné cesty importu
Cesty importu pro moduly a balíčky jsou různé. Aby bylo zajištěno, že můžete zkopírovat kód z našich příkladů, aniž byste museli provádět změny, použijte formát, který je konzistentní s nastavením vaší aplikace.
Balíčky mají importy jako:
import { ColDef, GridOptions } from 'ag-grid-community';
Moduly mají importy jako:
import { ColDef, GridOptions } from '@ag-grid-community/core';
Experiment v Plunkeru
U každého příkladu můžete kliknout na tlačítko Otevřít v Plunkeru a příklad se automaticky otevře v Plunkeru, abyste jej mohli vyladit a experimentovat. To vám umožní používat funkci, aniž byste museli trávit čas nastavováním vývojářského prostředí.
Již brzy v naší další verzi budou příklady Typescript a Angular obsahovat chyby typu a automatické dokončování v programu Plunker, takže experimentování bude ještě jednodušší!
Vaše předvolby jsou zapamatovány
Jakmile vyberete rámec a variaci příkladu, pamatujeme si je, takže když se pohybujete v dokumentech, nemusíte tato nastavení neustále aktualizovat. Doufáme, že vám to umožní být co nejproduktivnější a usnadní vám to převzít kód z našich příkladů a bezproblémově jej integrovat do vašich aplikací.
Předchozí verze AG Gridu
Pokud nejste schopni používat nejnovější verzi AG Gridu, stojí za to vědět, že si můžete prohlédnout celý dokumentační web stejně jako v předchozích verzích prostřednictvím našeho archivu. Doporučil bych to však pouze v případě, že zjistíte nesrovnalosti s nejnovější verzí.
Závěr
Doufám, že vám tyto rady pomohou zlepšit vaši produktivitu při používání naší dokumentace a umožní vám vytvářet skvělé aplikace s AG Grid! Jako vždy nám dejte vědět v sekci komentářů, pokud jako uživatel máte nějaké nápady, jak dokumentaci ještě vylepšit!