cari
Rumahhujung hadapan webtutorial cssMembina grid data sudut dengan penapisan

Membina grid data sudut dengan penapisan

Perpustakaan komponen kuat Kendo UI membolehkan anda cepat pergi dari konsepsi untuk membina aplikasi lengkap. Ia mempunyai lebih daripada 100 komponen yang boleh diintegrasikan dengan mudah ke dalam aplikasi React, Sudut atau VUE anda. Kendo UI sebenarnya adalah koleksi empat perpustakaan JavaScript asli, masing -masing dibina untuk kerangka yang sepadan. Lebih -lebih lagi, seperti yang telah kami sebutkan tadi, komponen -komponen ini adalah penyesuaian tema yang sangat dan anda boleh menyesuaikan penampilan mereka seperti yang anda mahukan.

Kelebihan sebenar Kendo UI adalah bahawa ia mengambil pengangkat berat . Gaya yang sangat baik adalah penting, tetapi apa yang benar-benar membezakan Kendo UI dari kerangka komponen lain adalah ciri luar kotak.

Sebagai contoh: Pemprosesan Data . Anda tidak perlu menghabiskan banyak masa mencari cara terbaik untuk mengikat data anda kepada komponen, Kendo UI telah mengendalikan semuanya untuk anda, membolehkan anda menghabiskan lebih banyak masa untuk memberi tumpuan kepada reka bentuk tema dan pengoptimuman UI.

Untuk memahami bagaimana Kendo UI memudahkan pemprosesan data, cara terbaik adalah untuk melakukannya, jadi ...

Mari kita lihat komponen grid sudut

Ini adalah komponen grid data Kendo UI untuk sudut. Ia mengandungi banyak data, bukan? Apa yang kita lihat ialah senarai pekerja yang menunjukkan nama, imej, dan maklumat lain setiap orang.

Seperti semua komponen Kendo UI, ia bukan komponen grid data mudah yang biasa merentasi pelbagai kerangka. Grid data ini dibina khas dan direka untuk sudut, sama seperti komponen grid kendoreAct mereka direka khusus untuk bertindak balas.

Biasanya, mudah<table> Unsur -unsur <em>boleh</em> memenuhi keperluan, bukan? Tetapi Kendo UI untuk grid data Angular mengandungi banyak ciri tambahan yang dapat meningkatkan pengalaman pengguna dengan ketara. Anda dapat melihat dengan segera bahawa ia menyediakan ciri -ciri interaktif seperti mengeksport data ke Excel atau PDF. Terdapat banyak ciri luar biasa yang lain yang akan mengambil banyak masa dan usaha untuk dicapai.<h3 id="penapis"> penapis</h3> <p> Terdapat fungsi di sini: penapisan grid data. Katakan anda melihat senarai pekerja yang serupa dengan contoh grid data di atas, tetapi syarikat itu mempunyai beribu -ribu pekerja. Tanpa pelbagai ciri seperti carian, sortable, dan paging, sukar untuk mencari orang tertentu -dan grid data Kendo UI mempunyai keupayaan ini.</p> <p> Pengguna dengan cepat boleh menghuraikan data terikat ke grid data sudut. Anda boleh menapis melalui baris penapis khusus, atau dengan mengklik menu penapis pop timbul dari ikon penapis dalam tajuk lajur.</p> <p> Dokumentasi untuk Kendo UI sangat baik. Inilah cara untuk mendapatkan komponen dan berjalan dengan cepat:</p> <h3 id="Pertama-import-komponen"> Pertama, import komponen</h3> <p> Tidak ada helah di sini - mengimport grid data seperti mengimport komponen lain:</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;import { Component, OnInit, ViewChild } from '@angular/core'; import { DataBindingDirective } from '@progress/kendo-angular-grid'; import { process } from '@progress/kendo-data-query'; import { employees } from './employees'; import { images } from './images';&lt;/code&gt;</pre> <h3 id="Seterusnya-hubungi-komponen"> Seterusnya, hubungi komponen</h3> <pre class="brush:php;toolbar:false"> &lt;code&gt;@Component({ selector: 'my-app', template: `&lt;kendo-grid&gt; // ...&lt;/kendo-grid&gt; ` })&lt;/code&gt;</pre> <p> Sudah tentu, ini tidak lengkap kerana seterusnya kita perlu ...</p> <h3 id="Konfigurasikan-komponen"> Konfigurasikan komponen</h3> <p> Ciri utama yang kami mahu aktifkan ialah penapisan, tetapi grid sudut Kendo menerima pelbagai parameter fungsional yang boleh diaktifkan dalam satu kejatuhan, seperti menyusun dan mengumpulkan, penomboran, dan virtualisasi.</p> <p> Penapis? Ia hanya mungkin untuk mengikatnya ke tajuk lajur dengan hanya satu baris kod.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;@Component({ selector: 'my-app', template: `&lt;kendo-grid filter=&quot;&quot; kendogridselectby=&quot;id&quot; true=&quot;&quot;&gt; // etc.&lt;/kendo-grid&gt; ` })&lt;/code&gt;</pre> <h3 id="Kemudian-tandakan-sisa-UI"> Kemudian, tandakan sisa UI</h3> <p> Kami tidak akan masuk ke dalamnya secara mendalam di sini. Terdapat contoh yang sangat baik tentang apa yang kelihatan seperti dalam dokumentasi Kendo UI. Ini juga merupakan masa yang baik untuk menangani gaya, yang dilakukan dalam parameter gaya. Begitu juga, tetapan tema komponen Kendo UI sangat mudah.</p> <p> Malah sebelum kita memasukkan data sebenar, kita sudah mempunyai grid data yang bagus!</p> <h3 id="Akhirnya-mengikat-data"> Akhirnya, mengikat data</h3> <p> Apabila kami mengimport komponen, anda mungkin menyedari bahawa kami mengimport data "pekerja" pada masa yang sama. Kita perlu mengikat data tersebut kepada komponen. Sekarang, orang seperti saya mungkin bersembunyi di sudut dan menangis, tetapi Kendo UI membuat proses terlalu mudah.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;// 在初始化时激活组件export class AppComponent implements OnInit { // 将员工数据绑定到组件@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // 将网格的数据源设置为员工数据文件public gridData: any[] = employees; // 将数据源应用于Grid 组件视图public gridView: any[]; public mySelection: string[] = []; public ngOnInit(): void { this.gridView = this.gridData; } // 开始处理数据public onFilter(inputValue: string): void { this.gridView = process(this.gridData, { filter: { // 设置逻辑类型(and/or) logic: &quot;or&quot;, // 定义筛选器及其运算符filters: [ { field: 'full_name', operator: 'contains', value: inputValue }, { field: 'job_title', operator: 'contains', value: inputValue }, { field: 'budget', operator: 'contains', value: inputValue }, { field: 'phone', operator: 'contains', value: inputValue }, { field: 'address', operator: 'contains', value: inputValue } ], } }).data; this.dataBinding.skip = 0; } // ... }&lt;/code&gt;</pre> <h3 id="Mari-kita-lihat-demo-lagi"> Mari kita lihat demo lagi</h3> <p> Ciri -ciri yang kuat seperti itu dicapai dengan usaha yang minimum. API Kendo UI sangat luas, dan juga ciri -ciri yang paling kompleks adalah sangat mudah.</p> <p> Kami belum lagi menyentuh ciri -ciri hebat komponen Kendo UI. Sebagai contoh, aksesibiliti. Bolehkah anda bayangkan berapa banyak pemikiran yang diperlukan untuk membuat komponen sedemikian mudah diakses? Seperti semua ciri-ciri berkuasa lain yang telah kami perolehi, Kendo UI menyelesaikan masalah kebolehcapaian untuk kami, mengambil pengangkat berat untuk mewujudkan UI yang mesra papan kekunci yang mematuhi piawaian WCAG 2.0 Alice, Seksyen 508, dan WAI-Aria.</p> <p> Bermula dengan grid data Kendo UI!</p> </table>

Atas ialah kandungan terperinci Membina grid data sudut dengan penapisan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Menambah bayang -bayang kotak ke blok dan elemen WordPressMenambah bayang -bayang kotak ke blok dan elemen WordPressMar 09, 2025 pm 12:53 PM

CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.

Buat borang hubungan JavaScript dengan rangka kerja pintarBuat borang hubungan JavaScript dengan rangka kerja pintarMar 07, 2025 am 11:33 AM

Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.

Pembaca Skrin Demystifying: Borang & Amalan Terbaik DiaksesPembaca Skrin Demystifying: Borang & Amalan Terbaik DiaksesMar 08, 2025 am 09:45 AM

Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam

Buat editor teks sebaris dengan atribut yang boleh dipertikaikanBuat editor teks sebaris dengan atribut yang boleh dipertikaikanMar 02, 2025 am 09:03 AM

Membina editor teks sebaris tidak remeh. Proses ini bermula dengan membuat elemen sasaran yang boleh diedit, mengendalikan potensi pengecualian syntaxError di sepanjang jalan. Membuat editor anda Untuk membina editor ini, anda perlu mengubahsuai kandungan secara dinamik

Bekerja dengan Caching GraphqlBekerja dengan Caching GraphqlMar 19, 2025 am 09:36 AM

Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

Menjadikan Peralihan Svelte Khas pertama andaMenjadikan Peralihan Svelte Khas pertama andaMar 15, 2025 am 11:08 AM

API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)Mar 04, 2025 am 10:22 AM

Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP

Muat naik fail dengan multer di node.js dan ekspresMuat naik fail dengan multer di node.js dan ekspresMar 02, 2025 am 09:15 AM

Tutorial ini membimbing anda melalui membina sistem muat naik fail menggunakan Node.js, Express, dan Multer. Kami akan merangkumi muat naik fail tunggal dan berganda, dan juga menunjukkan menyimpan imej dalam pangkalan data MongoDB untuk mendapatkan semula kemudian. Pertama, sediakan Projek anda

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.