Kendo UIの強(qiáng)力なコンポーネントライブラリを使用すると、概念から完全なアプリケーションの構(gòu)築に迅速に進(jìn)むことができます。 100を超えるコンポーネントがあり、React、Angular、またはVueアプリケーションに簡(jiǎn)単に統(tǒng)合できます。 Kendo UIは、実際には4つのネイティブJavaScriptライブラリのコレクションであり、それぞれが対応するフレームワークのために構(gòu)築されています。さらに、前述したように、これらのコンポーネントは非常にテーマのカスタマイズであり、必要に応じて外観を調(diào)整できます。

Kendo UIの本當(dāng)の利點(diǎn)は、それが重い持ち上げにかかることです。優(yōu)れたスタイルは重要ですが、剣道UIを他のコンポーネントフレームワークと本當(dāng)に區(qū)別するのは、すぐに使用できる機(jī)能です。

例：データ処理。データをコンポーネントにバインドする最良の方法を探すのに多くの時(shí)間を費(fèi)やす必要はありません。KendoUIはすべてを処理し、テーマデザインとUIの最適化に集中するためにより多くの時(shí)間を費(fèi)やすことができます。

Kendo UIがデータ処理を簡(jiǎn)素化する方法を理解するために、最良の方法は実際にそれを行うことです。

Angularグリッドコンポーネントを見(jiàn)てみましょう

これは、AngularのKendo UIのデータグリッドコンポーネントです。多くのデータが含まれていますよね？私たちが見(jiàn)るのは、各人の名前、畫像、その他の情報(bào)を示す従業(yè)員のリストです。

すべてのKendo UIコンポーネントと同様に、複數(shù)のフレームワークで一般的な単純なデータグリッドコンポーネントではありません。このデータグリッドは、kendoreactuctグリッドコンポーネントが反応用に特別に設(shè)計(jì)されているように、Angular向けに特別に構(gòu)築および設(shè)計(jì)されています。

通常、シンプルです<table>要素はニーズを満たす<em>かも</em>しれませんよね？ただし、Angularのデータグリッド用のKendo UIには、ユーザーエクスペリエンスを大幅に改善できる多くの追加機(jī)能が含まれています。 ExcelやPDFへのデータのエクスポートなどのインタラクティブな機(jī)能を提供することにすぐに気付くことができます。それ以外の場(chǎng)合は、達(dá)成するために多くの時(shí)間と労力を要する他の多くの特別な機(jī)能があります。<h3 id="フィルター">フィルター</h3> <p>ここに関數(shù)があります：データグリッドのフィルタリング。上記のデータグリッドの例と同様の従業(yè)員のリストを見(jiàn)ているが、同社には何千人もの従業(yè)員がいるとします。検索、ソート可能、ページングなどのさまざまな機(jī)能がなければ、特定の人を見(jiàn)つけることは困難です。KendoUIのデータグリッドにはこれらの機(jī)能があります。</p> <p>ユーザーは、Angular Data Gridにバインドされたデータをすばやく解析できます。専用のフィルター行を介してフィルターをかけるか、列ヘッダーのフィルターアイコンからフィルターメニューのポップアップをクリックしてフィルタリングできます。</p> <p> Kendo UIのドキュメントは優(yōu)れています。コンポーネントを迅速に稼働させる方法は次のとおりです。</p> <h3 id="まず-コンポーネントをインポートします">まず、コンポーネントをインポートします</h3> <p>ここにはトリックはありません - 他のコンポーネントのインポートなどのデータグリッドのインポート：</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="次に-コンポーネントを呼び出します">次に、コンポーネントを呼び出します</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>もちろん、これは不完全です。</p> <h3 id="コンポーネントを構(gòu)成します">コンポーネントを構(gòu)成します</h3> <p>有効にしたい重要な機(jī)能はフィルタリングですが、KendoのAngular Gridは、ソートとグループ化、ページネーション、仮想化など、一方で急いで有効にできるさまざまな機(jī)能パラメーターを受け入れます。</p> <p>フィルター？コードの1行だけで列ヘッダーにバインドすることのみが可能です。</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="次に-UIの殘りの部分をマークします">次に、UIの殘りの部分をマークします</h3> <p>ここで深く入りません。 Kendo UIのドキュメントでどのように見(jiàn)えるかについての優(yōu)れた例があります。これは、スタイルパラメーターで行われるスタイルに対処するのに良い時(shí)期でもあります。同様に、Kendo UIコンポーネントのテーマ設(shè)定は非常に簡(jiǎn)単です。</p> <p>実際のデータを挿入する前でさえ、すでに見(jiàn)栄えの良いデータグリッドがあります！</p> <h3 id="最後に-データをバインドします">最後に、データをバインドします</h3> <p>コンポーネントをインポートすると、「従業(yè)員」データを同時(shí)にインポートすることに気付いた場(chǎng)合があります。そのデータをコンポーネントにバインドする必要があります。今、私のような人々は隅に隠れて泣いているかもしれませんが、剣道UIはプロセスをあまりにも簡(jiǎn)単にしています。</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;// 在初始化時(shí)激活組件export class AppComponent implements OnInit { // 將員工數(shù)據(jù)綁定到組件@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // 將網(wǎng)格的數(shù)據(jù)源設(shè)置為員工數(shù)據(jù)文件public gridData: any[] = employees; // 將數(shù)據(jù)源應(yīng)用于Grid 組件視圖public gridView: any[]; public mySelection: string[] = []; public ngOnInit(): void { this.gridView = this.gridData; } // 開(kāi)始處理數(shù)據(jù)public onFilter(inputValue: string): void { this.gridView = process(this.gridData, { filter: { // 設(shè)置邏輯類型(and/or) logic: &quot;or&quot;, // 定義篩選器及其運(yùn)算符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="デモをもう一度見(jiàn)てみましょう">デモをもう一度見(jiàn)てみましょう</h3> <p>このような強(qiáng)力な機(jī)能は、最小限の労力で達(dá)成されます。 Kendo UI APIは非常に広く、最も複雑な機(jī)能でさえ非常に簡(jiǎn)単です。</p> <p> Kendo UIコンポーネントの他の優(yōu)れた機(jī)能についてはまだ觸れていません。たとえば、アクセシビリティ。このようなコンポーネントを簡(jiǎn)単にアクセスできるようにするために必要な考えを想像できますか？私たちが取得した他のすべての強(qiáng)力な機(jī)能と同様に、Kendo UIは私たちのアクセシビリティの問(wèn)題を解決し、WCAG 2.0 Alice、セクション508、およびWai-Ariaの基準(zhǔn)に準(zhǔn)拠したキーボードに優(yōu)しいUIを作成するという重いものを取り上げています。</p> <p> Kendo UI Data Gridを始めましょう！</p> </table>

以上がフィルタリングにより角度データグリッドを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。