|
|
Publicēts 29.10.2018 14:54:16
|
|
|
|
JQuery DataTables ir ļoti noderīgs datu saraksta spraudnis, nav nepieciešams rakstīt savu lapu kārtošanu, filtrēšanu un citas funkcijas, vienkārši atgrieziet norādīto JSON formātu, spraudnis var palīdzēt parādīt datus. Kā piemērot šo noderīgo tabulas displeja spraudni Angular projektiem?
Šajā rakstā ir integrēts Angular+bootstrap+DataTables
DataTables oficiālā vietne:Hipersaites pieteikšanās ir redzama.
leņķa datu tabulas:Hipersaites pieteikšanās ir redzama.
(Angular Structural Framework dinamiskām tīmekļa lietojumprogrammām + DataTables jQuery spraudnis sarežģītām HTML tabulām)
GitHub:Hipersaites pieteikšanās ir redzama.
Vispirms apskatīsim efektu pēc integrācijas, kā parādīts tālāk:
Startera uzstādīšana
Lai izmantotu leņķa datu tabulu, jums jāinstalē mezgls 8.9 vai jaunāka versija un NPM 6 vai jaunāka versija.
Šis dokuments attiecas tikai uz projektiem, kuros tiek izmantots leņķis-cli. Patiesībā front-end ekosistēma aug tādā tempā, ka es vairs nevaru sekot. Tātad ir tikai apmācība leņķa cli projektam. Ja jums izdodas panākt, lai tas darbotos, piemēram, SystemJS projekts, lūdzu, iesniedziet pull pieprasījumu, lai uzlabotu šo dokumentāciju. Paldies!
Angular-CLI versija 7.YZ
Es iesaku izmantot angular-cli, lai izveidotu un pārvaldītu leņķa projektus
Es gribētu jūs brīdināt, ka demo versija ir 7. YZ versija, savukārt jaunākām Angular-CLI versijām var būt nepieciešama cita konfigurācija.
NPM
Pirms varat iegūt jaunāko versiju ar NPM, jums jāinstalē tās atkarības:
Mans pašreizējais projekts ir Angular 6.x, un interfeiss izmanto veidni no Bootstrap, un jQuery ir atsauce, tāpēc manam projektam tas ir vajadzīgsĪpaša attieksme，
npm instalē tikai:
Lejupielādējiet spraudņa pakotni no datatables oficiālās vietnes, pārbaudiet Bootstrap 4 un DataTables un atlasiet Lejupielādēt failus zemāk. Tīmekļa vietne:Hipersaites pieteikšanās ir redzama.
Mēs izvelkam lejupielādēto pakotni direktorijā "src \ assets \ plugins \ datatables.net",Katalogs Nē, lūdzu, izveidojiet to pats！！！
Rediģējiet angular.json failu, lai skripta un stila rekvizītos pievienotu atkarības:
Galvenokārt pievienojiet projektam datatables.css un datatables.js failus.
NgModule konfigurācija, importējiet DataTablesModule atbilstošajā lietojumprogrammas līmenī.
Tā kā mans maršruts ir slinks, lai ielādētu ceļu, esNe īstiImportēts failā "app.module.ts", lūdzuImportējiet atbilstoši jūsu faktiskajai situācijai。
Ja importēšana ir nepareiza, kļūda ir šāda:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nevar piesaistīt 'dtOptions', jo tas nav zināms 'tabulas' rekvizīts. ("<div class="row">
<div class="col-12">
<tabulas datu tabula [KĻŪDA ->]
Servera puses lapošana
HTML lapa (baseinfocompany-list.component.html):
CSS kods (jāpievieno un ar brīdinājumiem):
baseinfocompany-list.component.scss fails:
styles.scss fails:
Mašīnraksta kods (baseinfocompany-list.component.ts)
Piezīmes: HttpClientModule ir jāpievieno arī app.module.ts šādi:
Ķīnas ķīniešu kods datu tabulām ir šāds:
Tūristi, ja vēlaties redzēt šīs ziņas slēpto saturu, lūdzu Atbildi
|
Iepriekšējo:Filmu un televīzijas pēcapstrādes darbiniekiem un tiem, kam patīk mācīties, ir jāizmanto filmu un televīzijas atslēgu tehnoloģijaNākamo:npm noņem atinstalēšanas moduli
|
Publicēts 10.11.2018 21:58:48
|
Piedalieties formas arhitekts