|
|
Paskelbta 2018-10-29 14:54:16
|
|
|
|
"JQuery DataTables" yra labai naudingas duomenų sąrašo papildinys, nereikia rašyti savo puslapių rūšiavimo, filtravimo ir kitų funkcijų, tiesiog grąžinkite nurodytą JSON formatą, papildinys gali padėti rodyti duomenis. Kaip pritaikyti šį naudingą lentelės rodymo įskiepį "Angular" projektams?
Šiame straipsnyje integruojamas Angular+bootstrap+DataTables
Oficiali "DataTables" svetainė:Hipersaito prisijungimas matomas.
kampinės duomenų lentelės:Hipersaito prisijungimas matomas.
(Angular Structural Framework dinaminėms žiniatinklio programoms + DataTables jQuery įskiepis sudėtingoms HTML lentelėms)
"GitHub":Hipersaito prisijungimas matomas.
Pirmiausia pažvelkime į poveikį po integracijos, kaip parodyta toliau:
Starterio montavimas
Norėdami naudoti kampinių duomenų lentelę, turite įdiegti 8.9 ar naujesnę versiją ir NPM 6 ar naujesnę versiją.
Šiame dokumente nagrinėjami tik projektai, kuriuose naudojamas kampinis kli. Tiesą sakant, front-end ekosistema auga tokiu tempu, kad aš nebegaliu sekti. Taigi yra tik kampinio cli projekto pamoka. Jei jums pavyks tai padaryti, pavyzdžiui, SystemJS projektas, pateikite pull užklausą, kad patobulintumėte šią dokumentaciją. Ačiū!
Angular-CLI versija 7.YZ
Kampiniams projektams kurti ir valdyti rekomenduoju naudoti kampinį kli
Norėčiau jus įspėti, kad demonstracinė versija yra 7. YZ versija, o naujesnėms Angular-CLI versijoms gali reikėti kitokios konfigūracijos.
NPM
Kad galėtumėte gauti naujausią versiją su NPM, turite įdiegti jos priklausomybes:
Mano dabartinis projektas yra Angular 6.x, o sąsaja naudoja šabloną iš Bootstrap, ir jQuery buvo nurodyta, todėl mano projektui to reikiaSpecialus režimas，
NPM diegia tik toliau nurodytus dalykus.
Atsisiųskite papildinio paketą iš oficialios "datatables" svetainės, patikrinkite "Bootstrap 4" ir "DataTables" ir pasirinkite Atsisiųsti failus žemiau. Interneto svetainė:Hipersaito prisijungimas matomas.
Atsisiųstą paketą išskleidžiame į katalogą "src\assets\plugins\datatables.net",Katalogas Ne, susikurkite patys！！！
Redaguokite angular.json failą, kad įtrauktumėte priklausomybių į scenarijaus ir stiliaus ypatybes:
Daugiausia pridėkite datatables.css ir datatables.js failus prie projekto.
NgModule konfigūracija, importuokite DataTablesModule į atitinkamą programos lygį.
Kadangi mano maršrutas yra tingus įkelti kelią, ašTikrai neImportuota į "app.module.ts" failą, prašomeImportuokite pagal savo faktinę situaciją。
Jei importas neteisingas, klaida yra tokia:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Negalima susieti su 'dtOptions', nes tai nėra žinoma 'table' ypatybė. ("<div class="row">
<div class="col-12">
<lentelės duomenų lentelė [ERROR ->]
Puslapių numeravimas serveryje
HTML puslapis (baseinfocompany-list.component.html):
CSS kodas (turi būti pridėtas ir su įspėjimais):
baseinfocompany-list.component.scss failas:
styles.scss failas:
Mašinraščio kodas (baseinfocompany-list.component.ts)
Pastaba: HttpClientModule taip pat turėtų būti įtrauktas į app.module.ts, taip:
Kinų kinų kodas datatables yra toks:
Turistai, jei norite pamatyti paslėptą šio įrašo turinį, prašome Atsakyti
|
Ankstesnis:Kino ir televizijos postprodukcijos darbuotojai ir tie, kurie mėgsta studijuoti, turi naudoti kino ir televizijos klavišų technologijąKitą:npm pašalina pašalinimo modulį
|
Paskelbta 2018-11-10 21:58:48
|
Dalyvauti formos architektas