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> 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> Pertama, import komponen</h3> <p> Tidak ada helah di sini - mengimport grid data seperti mengimport komponen lain:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <h3> Seterusnya, hubungi komponen</h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <p> Sudah tentu, ini tidak lengkap kerana seterusnya kita perlu ...</p> <h3> 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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <h3> 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> 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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <h3> 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!