필터링으로 각도 데이터 그리드 구축

Kendo UI의 강력한 구성 요소 라이브러리를 사용하면 개념에서 완전한 응용 프로그램 구축으로 빠르게 이동할 수 있습니다. 반응, 각도 또는 VUE 응용 프로그램에 쉽게 통합 할 수있는 100 개가 넘는 구성 요소가 있습니다. Kendo UI는 실제로 4 개의 기본 JavaScript 라이브러리 모음으로 각각 해당 프레임 워크를 위해 구축되었습니다. 또한 앞에서 언급했듯이 이러한 구성 요소는 극도로 테마 사용자 정의이며 원하는대로 모양을 조정할 수 있습니다.

Kendo UI의 진정한 장점은 무거운 리프팅을 취한다는 것입니다. 우수한 스타일은 중요하지만 Kendo UI를 다른 구성 요소 프레임 워크와 실제로 구별하는 것은 상자 외 기능입니다.

예 : 데이터 처리 . Kendo UI는 데이터를 구성 요소에 바인딩하는 가장 좋은 방법을 찾는 데 많은 시간을 할애 할 필요가 없습니다. Kendo UI는 테마 디자인 및 UI 최적화에 더 많은 시간을 할애 할 수 있습니다.

Kendo UI가 데이터 처리를 단순화하는 방법을 이해하려면 가장 좋은 방법은 실제로 수행하는 것입니다.

각도 그리드 구성 요소를 살펴 보겠습니다

이것은 각도에 대한 Kendo UI의 데이터 그리드 구성 요소입니다. 많은 데이터가 포함되어 있습니까? 우리가 보는 것은 각 사람의 이름, 이미지 및 기타 정보를 보여주는 직원 목록입니다.

모든 Kendo UI 구성 요소와 마찬가지로 여러 프레임 워크에서 공통적 인 간단한 데이터 그리드 구성 요소가 아닙니다. 이 데이터 그리드는 Kendoreact 그리드 구성 요소가 React 용으로 특별히 설계된 것처럼 각도를 위해 특별히 구축되고 설계되었습니다.

일반적으로 간단합니다<table> 요소는 필요를 충족시킬 <em>수</em> 있습니다. 그러나 Angular의 데이터 그리드 용 Kendo UI에는 사용자 경험을 크게 향상시킬 수있는 많은 추가 기능이 포함되어 있습니다. 데이터를 Excel 또는 PDF로 내보내는 것과 같은 대화식 기능을 즉시 알 수 있습니다. 달성하는 데 많은 시간과 노력이 필요한 다른 특별한 기능이 많이 있습니다.<h3 id="필터"> 필터</h3> <p> 여기에는 기능이 있습니다 : 데이터 그리드 필터링. 위의 데이터 그리드 예제와 유사한 직원 목록을보고 있지만 회사에는 수천 명의 직원이 있습니다. 검색, 정렬 가능 및 페이징과 같은 다양한 기능이 없으면 특정 사람을 찾기가 어렵습니다. Kendo UI의 데이터 그리드에는 이러한 기능이 있습니다.</p> <p> 사용자는 각도 데이터 그리드에 데이터를 신속하게 구문 분석 할 수 있습니다. 전용 필터 행을 통해 필터링하거나 열 헤더의 필터 아이콘에서 필터 메뉴 팝업을 클릭하여 필터링 할 수 있습니다.</p> <p> Kendo UI에 대한 문서는 훌륭합니다. 다음은 구성 요소를 빠르게 작동시키고 실행하는 방법입니다.</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="구성-요소를-구성합니다"> 구성 요소를 구성합니다</h3> <p> 우리가 활성화하려는 주요 기능은 필터링이지만 Kendo의 Angular Grid는 정렬 및 그룹화, 페이지 매김 및 가상화와 같이 한 번에 활성화 될 수있는 다양한 기능 매개 변수를 수용합니다.</p> <p> 필터? 한 줄의 코드만으로 열 헤더에만 바인딩 할 수 있습니다.</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의 문서에서 어떻게 보이는지에 대한 훌륭한 예가 있습니다. 이것은 또한 스타일 매개 변수로 수행되는 스타일을 다루기에 좋은시기입니다. 마찬가지로 Kendo UI 구성 요소의 테마 설정은 매우 간단합니다.</p> <p> 실제 데이터를 삽입하기 전에도 이미 멋진 데이터 그리드가 있습니다!</p> <h3 id="마지막으로-데이터를-바인딩하십시오"> 마지막으로 데이터를 바인딩하십시오</h3> <p> 구성 요소를 가져 오면 "직원"데이터를 동시에 가져 오는 것을 알 수 있습니다. 해당 데이터를 구성 요소에 바인딩해야합니다. 이제 나와 같은 사람들은 모퉁이에 숨어 울고 있을지 모르지만 Kendo UI는 그 과정을 너무 간단하게 만듭니다.</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="데모를-다시-살펴-보겠습니다"> 데모를 다시 살펴 보겠습니다</h3> <p> 이러한 강력한 기능은 최소한의 노력으로 달성됩니다. Kendo UI API는 매우 광범위하며 가장 복잡한 기능조차도 매우 간단합니다.</p> <p> 우리는 아직 Kendo UI 구성 요소의 다른 훌륭한 기능에 대해서도 다루지 않았습니다. 예를 들어, 접근성. 그러한 구성 요소에 쉽게 액세스 할 수 있도록하는 데 얼마나 많은 생각이 필요한지 상상할 수 있습니까? Kendo UI는 우리가 얻은 다른 모든 강력한 기능과 마찬가지로 우리를위한 접근성 문제를 해결하여 WCAG 2.0 Alice, 섹션 508 및 WAI-Aria 표준을 준수하는 키보드 친화적 인 UI를 생성하는 데 큰 도움이됩니다.</p> <p> Kendo UI 데이터 그리드를 시작하십시오!</p> </table>

위 내용은 필터링으로 각도 데이터 그리드 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!