|
|
Közzétéve 2018. 10. 29. 14:54:16
|
|
|
|
A JQuery DataTables egy nagyon hasznos adatlista plugin, nem kell saját oldalrendezést, szűrést és egyéb funkciókat írni, csak add vissza a megadott json formátumot, a plugin segíthet az adatok megjelenítésében. Hogyan lehet ezt a hasznos táblázatmegjelenítő bővítményt alkalmazni Angular projektekre?
Ez a cikk az Angular+bootstrap+DataTables elemeket integrálja
DataTables hivatalos weboldala:A hiperlink bejelentkezés látható.
szög-adattáblák:A hiperlink bejelentkezés látható.
(Angular Structural Framework dinamikus webalkalmazásokhoz + DataTables jQuery plugin összetett HTML táblákhoz)
GitHub:A hiperlink bejelentkezés látható.
Először nézzük meg az integráció utáni hatást, ahogy az alábbiakban látható:
Indító telepítés
Az angular adattábla használatához telepítened kell a Node 8.9-et vagy újabbat, valamint az NPM 6-ot vagy újabbat.
Ez a dokumentum csak olyan projekteket érint, amelyek angular-cli-t használnak. Valójában a front-end ökoszisztéma olyan tempóban növekszik, amit már nem tudok követni. Tehát csak egy tutorial van az angular-cli projekthez. Ha például egy SystemJS projekt esetén sikerül működőképessé tenni, kérlek, nyújts be egy pull requestet a dokumentáció javítására. Köszönöm!
Angular-CLI 7.YZ verzió
Azt javaslom, hogy az angular-cli segítségével készítsd és kezeld az angular projekteket
Inkább figyelmeztetlek, hogy a demó verzió 7-en van. YZ verzió, míg az újabb Angular-CLI verzióknak eltérő konfigurációra van szükségük.
NPM
Mielőtt a legújabb verziót megszerezhetnéd az NPM-mel, telepítened kell a függőségeit:
A jelenlegi projektem az Angular 6.x, és a felület egy Bootstrap sablont használ, és a jQuery-re is hivatkoztak, így a saját projektemnek is szüksége van ráKülönleges bánásmód，
Az NPM csak a következőket telepíti:
Töltse le a plug-in csomagot a datatables hivatalos weboldaláról, ellenőrizze a Bootstrap 4-et és a DataTables-t, majd válassza az alábbi letöltési fájlokat. Weboldal:A hiperlink bejelentkezés látható.
A letöltött csomagot a "src\assets\plugins\datatables.net" könyvtárba csomagoljuk,Katalógus Nem, kérlek, készítsd el magad！！！
Szerkesszük a angular.json fájlt, hogy a script és stílus tulajdonságaiban függőségeket adj hozzá:
Főleg datatables.css és datatables.js fájlokat adok hozzá a projekthez.
NgModule konfigurációval importáljuk a DataTablesModule-t az alkalmazás megfelelő szintjére.
Mivel az én útvonalam lusta a betöltéshez, énNem igazánImportálva a "app.module.ts" fájlba, kéremImportálj a tényleges helyzeted szerint。
Ha az import hibás, a hiba a következő:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nem tudok 'dtOptions'-hoz kötni, mert az nem ismert tulajdonság a 'table'-nek. ("<div class="sor">
<div class="col-12">
<table datatable [ERROR ->]
Szerveroldali pagezés
HTML oldal (baseinfocompany-list.component.html):
CSS kód (hozzá kell adni, és fenntartásokkal):
baseinfocompany-list.component.scss fájl:
styles.scss fájl:
Typescript kód (baseinfocompany-list.component.ts)
Megjegyzés: A HttpClientModule is hozzá kell kerülni app.module.ts-ben, az alábbiak szerint:
A kínai kínai adattáblák kódja a következő:
Turisták, ha szeretnétek megnézni ennek a bejegyzésnek a rejtett tartalmát, kérlek Válasz
|
Előző:A film- és televíziós posztprodukciós munkásoknak, valamint azoknak, akik szeretnek tanulni, film- és televíziós kulcstechnológiát kell alkalmazniukKövetkező:Az NPM eltávolítja az eltávolítási modult
|
Közzétéve 2018. 11. 10. 21:58:48
|
Részt vegyen az építészképző formában