현재 시장에는 오픈 소스 타사 및 자체 제작 및 판매를 포함하여 많은 수의 JavaScript 데이터 테이블 컨트롤이 있습니다. Wijmo의 Flexgrid는 현재 Angular 2에 적합한 최고의 테이블 컨트롤이라고 말할 수 있습니다.
Angular 2 데이터 테이블 기본 요구 사항 : 작고 빠르며 친숙합니다.
Angular 2 형식을 사용하려면 먼저 양식의 기본 요구 사항을 이해해야합니다. Flexgrid는 1996 년 Visual Basic 용 컨트롤이 C ++에서 사용되었을 때 시작되었습니다. 수년에 걸쳐 여러 플랫폼, 특히 JavaScript 플랫폼에서 진화하고 완성되었습니다. Flexgrid는 Flex의 개념으로 인해 명명되었으며 컨트롤에는 가장 필요한 주요 기능 세트와 확장 가능한 기능이 포함되어야합니다. 정렬, 그룹화, 편집 및 기타 멋진 것들과 같은 기본 기능은 선택적 확장을 통해 제공 될 수 있습니다. 이렇게하면 컨트롤을 간소화하고 효율적으로 유지하면서 고객에게 깊이 커스터마이징 할 수 있습니다.
또 다른 중요한 지표는 성능입니다. Flexgrid는 우리가 충분히 빠르게 보장하기 위해 다른 제품과 지속적으로 비교하고 있습니다. Flex 개념은 파일을 충분히 작게 만들고 (압축 후 약 25k) 다른 프레임 워크에 의존하지 않습니다. 가장 중요한 성능 향상은 가상 렌더링을 통한 것입니다. FlexGrid는 모든 DOM을 가상화하여 한 번에 뷰포트 (및 일부 버퍼)로 채워야하는 셀만을 그립니다. 테이블이 스크롤되면 셀 (DOM 요소)이 재활용됩니다. 가상 렌더링은 그리드가 1 초 안에 수백만 개의 데이터를 바인딩 할 수 있음을 의미합니다.
마지막으로 가장 중요한 기능 중 하나는 친숙한 작업입니다. Flexgrid는 Excel의 모든 상호 작용 동작을 기반으로하며 사용자가 그리드를 운영하는 가장 일반적으로 사용되는 방법 일 수 있습니다. 사람들은 스크롤, 클릭 할 때, 특히 스스로를 발명하기보다는 키보드 명령 (클립 보드 기능 포함)을 사용할 때 명확한 동작을 원합니다. 우리는 Excel을 모방하여 사용자가 테이블을 사용하여 편안하게 느끼고 놀랍게도 다른 많은 그리드가 자신의 동작을 발명하거나 스크롤 및 키보드 동작을 완전히 지원하지 않았습니다. 예를 들어, 데이터 행의 행을 선택하고 아래쪽 화살표를 잡을 때 많은 테이블에 예상되는 동작이 표시되지 않습니다.
마크 업 언어를 사용하여 UI 컨트롤을 선언하십시오
이제 AngularJS에서 FlexGrid의 장점을 살펴 보겠습니다. AngularJS에서 가장 큰 이점은 Flexgrid의 마크 업 언어입니다. Angular 구성 요소는 마크 업 언어를 사용하여 컨트롤을 선언 할 수있는 기능을 제공합니다. 선언 마커는 MVVM 디자인 패턴을 잘 따릅니다. 우리는 View (Markup Language)를 통해 구성 요소를 완전히 구성 할 수 있습니다.
Flexgrid는 완전한 API를 선언하기 위해 각도 마크 업 언어를 사용하는 것을 지원합니다. 마크 업 언어를 사용하여 속성을 설정하고 이벤트를 첨부하며 하위 구성 요소 (예 : 열)를 구성 할 수 있습니다.
다음은 Angular2 Markup 언어를 사용하여 FlexGrid를 구성하는 방법을 보여주는 예입니다.
<wj-flex-grid [itemsSource] = "data"> <wj-flex-grid-column [header] = " 'country'"[binding] = " 'country'"[width] = " '*'" "> </wj-flex-grid-column> <wj-flex-grid-column [header] =" 'date' "[binding] =" ' "> <wj-flex-grid-column [header] = " 'revenue'"[binding] = " 'molity]"[format] = "'n0 '"> </wj-flex-grid-column> <wj-flex-grid-column [header] = "'active '"[binding] = "'active '"> </wj-flex-grid-colum> </wj-flex-grid>
다음은 우리가 선언 한 마크 업 언어에서 얻은 결과입니다.
다른 많은 그리드 구성 요소는 마크 업 언어를 사용하여 컨트롤을 선언 할 수있는 기능 만 제공하므로 JavaScript (ViewModel)를 사용하여 수행 해야하는 모든 구성이 발생합니다. 이로 인해 View와 ViewMode가 혼란스러워 개발자가 JavaScript를 사용하여 제어 UI를 변경해야합니다. 이렇게하면 각도 결합의 모든 이점을 놓칠 것입니다. 우리는 그렇게하는 것이 반란이라고 생각합니다. 아래 차이점을 참조하십시오.
<ag-grid-ng2 #Aggrid // 컨트롤러의 속성에 바인딩 된 항목 [gridoptions] = "gridoptions"[columnDefs] = "columnDefs"> </ag-grid-ng2>
마크 업 언어를 완벽하게 지원하는 구성 요소를 사용하면 전체 MVVM 패턴 지원을 받고 다른 개발 플랫폼 (ASP.NET, Java, Silverlight, Flex)과 같은 응용 프로그램을 구축 할 수 있습니다.
재사용 가능한 셀 유형 템플릿을 선언합니다
마크 업 언어를 사용하여 FlexGrid 멤버를 선언하기 위해 셀 템플릿도 제공합니다. 셀 템플릿은 다른 유형의 셀에 대해 재사용 가능한 템플릿을 선언하는 방법입니다. 셀 템플릿은 바운드 표현식, HTML 및 기타 구성 요소를 포함하여 유효한 각도 태그를 지원합니다. 셀 템플릿 유형은 다음과 같습니다. 제목 셀, 편집 모드 셀, 정상 모드 셀 등
Flexgrid는 셀 템플릿을 통해 구성 요소를 생성하기위한 표현을 제공합니다. 마크 업 언어로 FlexGrid를 선언 할 수있을뿐만 아니라 모든 셀에서 모든 각도 구문을 사용할 수 있습니다. Flexgrid 셀 템플릿 태그가 얼마나 강력한 지 살펴 보겠습니다.
<wj-flex-grid [itemsSource] = "data1"[enlowort] = "false"[deferresizing] = "true"> <템플릿 wjflexgridCellTemplate [CellType] = " 'topleft'" *ngif = "CustomTopleft"> № </</템플릿> *ngif = "customRowheader" #cell = "cell"> {{cell.row.index}}} </template> <wj-flex-grid-colum header = "country"binding = "country"> <템플릿 wjflexgridcelltemplate [celltype] = " 'cell'" *ngif = "customcell" "ait"> <img "> {item.country}}. png " /> {{item.country}} < /템플릿> < /템플릿> <템플릿 wjflexgridCellTemplate [ 'groupheader'" *ngif = "customgroupheader" #item = "셀 ="셀 "> input type ="checkbox " [(ngmodel)] = "cell.row.iscollapsed"/> {{item.name}} ({{item.items.length}} 항목) </템플릿> </wj-flex-grid-column> <wj-flex-grid-column header = "downloads"sum '[thegregate] "[170"[170 ". wjflexgridCellTemplate [CellType] = " 'columnheader'" *ngif = "CustomColumnheader"> <input type = "checkbox"[(ngmodel)] = "uictx.highlightdownloads" /> downloads < /template> <template wjflexgridcelltemplate [celltype] = "Cell ' *ngif =" ""셀 - " #item = "item"> <span [ngstyle] = "{color : uictx.highlightdownloads? *ngif = "customgroup" #cell = "cell"> sum = {{cell.value | 번호 : '1.0-0'}} </템플릿> </wj-flex-grid-column> </wj-flex-grid>우리가 셀 템플릿으로 선언 한 결과
Angular2의 재사용 가능한 셀 템플릿
다시, 다른 테이블 컨트롤 에서이 효과를 달성하려면 JavaScript 파일을 편집하고 ViewModel에 작성해야합니다.
데이터 바인딩을 사용하여 컨트롤을 자동으로 업데이트합니다.
Angular의 가장 생산적인 이점은 바인딩 표현이라고 생각합니다.이 표현은 데이터 변경에 자동으로 응답 할 수있는 구속력있는 표현입니다.
FlexGrid의 모든 특성은 데이터 바인딩을 지원합니다. 또한, 우리는 양방향 데이터 바인딩이 필요한 일부 특성에 대해 양방향 결합을 제공합니다. 코드를 쓰지 않으면 구성 요소를 바인딩하여 이벤트를 처리하고 모델 데이터와 상호 작용할 수 있습니다.
데이터 바인딩은 모든 개발 플랫폼 (Java, .NET)의 일류 시민이며 Angular는 편도 및 양방향 데이터 바인딩을 더 쉽게 지원하며 지원합니다.
TypeScript : Angular에서 작업 2 일.
FlexGrid 및 모든 Wijmo 컨트롤은 TypeScript로 작성되었습니다. 우리는 Microsoft 플랫폼에서 일하는 매우 오랜 역사를 가지고 있으므로 TypeScript가 성숙 해지면 집에 대한 감각이 있습니다. TypeScript는 C#, 상속, 강력한 타이핑, 유형 확인, 빌드 타임 오류 확인 등을 쓰는 것과 유사한 경험을 제공합니다. 다른 플랫폼에서와 마찬가지로 Enterprise-Grade JavaScript 컨트롤을 만드는 것은 촉매제입니다. API 또는 구문에서 타협 할 필요가 없습니다.
아마도 가장 중요한 것은 TypeScript가 위젯 대신 실제 컨트롤을 만들 수있는 기능을 제공합니다. 클래스로서의 Flexgrid는 기본 제어 클래스에서 상속됩니다. 위젯이 부끄러운 함수를 사용하여 속성을 설정하고 값을 전달하도록 강요하면 Flexgrid는 직접 설정할 수있는 getter 및 setter 액세서를 가지고 있습니다. Wijmo에는 간단히 핸들러를 추가하기위한 이벤트 모델도 포함되어 있습니다.
사용자가 개발에 tpyescript를 사용하기로 선택한 경우, 지원되는 IDE에서 스마트 프롬프트 및 경고를 받고 부정확 한 유형을 속성에 할당하려고 할 때 오류 메시지가 나타납니다.
TypeScript의 가장 매력적인 기능은 고객이 Flex 철학과 일치하고 제어 사용자 정의를 단순화하고 오류를 줄이는 컨트롤을 상속하고 확장 할 수 있다는 것입니다.
마지막으로, 우리는 Angular2와 손을 잡고 있습니다. 몇 년 전에 Microsoft의 언어를 사용하여 결정을 내린 것에 놀랐습니다. 우리의 컨트롤 클래스는 이미 TypeScript를 사용하므로 Angular2와 완벽하게 결합 할 수 있습니다. 우리는 단순히 그것들을 확장하고 메타 데이터를 추가하여 Angular2 구성 요소에 노출되었습니다.
내 일방적 인 단어를 믿지 마십시오. 시도하십시오
Cisco의 BJ Jeong은“우리는 Wijmo를 구입했고 그들의 팀은 아름다운 인터페이스, 사려 깊은 건축, 잘 개발 된 문서, 변화하는 기술을 유지하는 데 큰 도움이되었습니다.
내 텍스트가 당신을 설득하지 않으면 Flexgrid를 시도하고 나를 옳고 그름을 증명하도록 격려하십시오. 내가 틀렸고 Flexgrid가 다른 그리드 컨트롤에 맞는 경우, 당신은 저에게 말할 수 있습니다. 우리는 20 년 동안 개발과 개선을 멈추지 않았으며 결코 멈추지 않을 것입니다. 경험하려면 지금 다운로드하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.