フィルタリングにより角度データグリッドを構築します

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

Kendo UIの本当の利点は、それが重い持ち上げにかかることです。優れたスタイルは重要ですが、剣道UIを他のコンポーネントフレームワークと本当に区別するのは、すぐに使用できる機能です。

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

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

Angularグリッドコンポーネントを見てみましょう

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

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

通常、シンプルです<table>要素はニーズを満たす<em>かも</em>しれませんよね？ただし、Angularのデータグリッド用のKendo UIには、ユーザーエクスペリエンスを大幅に改善できる多くの追加機能が含まれています。 ExcelやPDFへのデータのエクスポートなどのインタラクティブな機能を提供することにすぐに気付くことができます。それ以外の場合は、達成するために多くの時間と労力を要する他の多くの特別な機能があります。<h3 id="フィルター">フィルター</h3> <p>ここに関数があります：データグリッドのフィルタリング。上記のデータグリッドの例と同様の従業員のリストを見ているが、同社には何千人もの従業員がいるとします。検索、ソート可能、ページングなどのさまざまな機能がなければ、特定の人を見つけることは困難です。KendoUIのデータグリッドにはこれらの機能があります。</p> <p>ユーザーは、Angular Data Gridにバインドされたデータをすばやく解析できます。専用のフィルター行を介してフィルターをかけるか、列ヘッダーのフィルターアイコンからフィルターメニューのポップアップをクリックしてフィルタリングできます。</p> <p> Kendo UIのドキュメントは優れています。コンポーネントを迅速に稼働させる方法は次のとおりです。</p> <h3 id="まず-コンポーネントをインポートします">まず、コンポーネントをインポートします</h3> <p>ここにはトリックはありません - 他のコンポーネントのインポートなどのデータグリッドのインポート：</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">ログイン後にコピー</div></div> <h3 id="次に-コンポーネントを呼び出します">次に、コンポーネントを呼び出します</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">ログイン後にコピー</div></div> <p>もちろん、これは不完全です。</p> <h3 id="コンポーネントを構成します">コンポーネントを構成します</h3> <p>有効にしたい重要な機能はフィルタリングですが、KendoのAngular Gridは、ソートとグループ化、ページネーション、仮想化など、一方で急いで有効にできるさまざまな機能パラメーターを受け入れます。</p> <p>フィルター？コードの1行だけで列ヘッダーにバインドすることのみが可能です。</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">ログイン後にコピー</div></div> <h3 id="次に-UIの残りの部分をマークします">次に、UIの残りの部分をマークします</h3> <p>ここで深く入りません。 Kendo UIのドキュメントでどのように見えるかについての優れた例があります。これは、スタイルパラメーターで行われるスタイルに対処するのに良い時期でもあります。同様に、Kendo UIコンポーネントのテーマ設定は非常に簡単です。</p> <p>実際のデータを挿入する前でさえ、すでに見栄えの良いデータグリッドがあります！</p> <h3 id="最後に-データをバインドします">最後に、データをバインドします</h3> <p>コンポーネントをインポートすると、「従業員」データを同時にインポートすることに気付いた場合があります。そのデータをコンポーネントにバインドする必要があります。今、私のような人々は隅に隠れて泣いているかもしれませんが、剣道UIはプロセスをあまりにも簡単にしています。</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">ログイン後にコピー</div></div> <h3 id="デモをもう一度見てみましょう">デモをもう一度見てみましょう</h3> <p>このような強力な機能は、最小限の労力で達成されます。 Kendo UI APIは非常に広く、最も複雑な機能でさえ非常に簡単です。</p> <p> Kendo UIコンポーネントの他の優れた機能についてはまだ触れていません。たとえば、アクセシビリティ。このようなコンポーネントを簡単にアクセスできるようにするために必要な考えを想像できますか？私たちが取得した他のすべての強力な機能と同様に、Kendo UIは私たちのアクセシビリティの問題を解決し、WCAG 2.0 Alice、セクション508、およびWai-Ariaの基準に準拠したキーボードに優しいUIを作成するという重いものを取り上げています。</p> <p> Kendo UI Data Gridを始めましょう！</p> </table>

以上がフィルタリングにより角度データグリッドを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。