그리드 또는 테이블을 각도로 표시하는 가장 좋은 방법부트스트랩3이 있는 JS?
Angular로 앱을 만들고 있습니다.JS 및 부트스트랩 3수천 개의 행이 있는 테이블/그리드를 표시합니다.Angular에 가장 적합한 컨트롤은 무엇입니까?JS 및 부트스트랩(Sorting, Searching, Pagination 등)
ngGrid, ngTable, trNgGrid 및 SmartTable을 사용해 본 결과 스마트 테이블이 단연 최고의 구현 Angular라는 결론을 얻었습니다.JS와 부트스트랩이 있습니다.이것은 표준 각도를 사용하여 자신만의 순진한 테이블을 만드는 것과 정확히 같은 방식으로 만들어집니다.또한 정렬, 필터링 등을 지원하는 몇 가지 지침이 추가되었습니다.그들의 접근 방식은 또한 자신을 확장하는 것을 매우 쉽게 만듭니다.테이블에는 일반 html 태그를 사용하고 행에는 표준 ng-repeat을 사용하고 포맷에는 표준 부트스트랩을 사용하고 있기 때문에 이것이 확실한 승자입니다.
JS 코드는 angular에 의존하며, HTML은 부트스트랩에 의존할 수 있습니다.JS 코드는 총 4kb이며, 더 작은 설치 공간을 원하는 경우 JS 코드에서 데이터를 쉽게 선택할 수 있습니다.
다른 그리드에서는 밀실 공포증이 다른 영역에서 나타나지만 스마트 테이블은 개방적이고 요령 있게 느껴집니다.
인라인 편집 및 기타 고급 기능에 크게 의존하는 경우 예를 들어 ngTable을 사용하여 보다 빠르게 시작 및 실행할 수 있습니다.그러나 스마트 테이블에서 이러한 기능을 쉽게 추가할 수 있습니다.
스마트 테이블을 직접 사용하는 것 외에는 스마트 테이블과 관계가 없습니다.
같은 요건을 충족하고 다음 컴포넌트를 사용하여 해결했습니다.
- AngularJS 1.0.8
- AngularUI Boostrap 0.10.0: AngularJS 1.0.8 및 Boostrap CSS 3.x와 호환됩니다.
- ng-grid 2.0.7: AngularJS 1.0.8과 호환
- 부트스트랩 CSS 3.0
테이블 컴포넌트 ng-grid는 스크롤 가능한 그리드에 수백 개의 행을 표시할 수 있습니다.수천 개의 엔트리를 처리해야 하는 경우 ng-grid의 페이지 작성자를 사용하는 것이 좋습니다.ng-grid의 문서는 훌륭하고 많은 예를 포함하고 있다.페이지 번호 부여와 조합하여도 정렬 및 검색이 지원됩니다.
다음은 현재 프로젝트의 스크린샷입니다.
[2017년 7월 갱신]
몇 년 동안 ng-grid를 생산해도 이 부품에는 큰 문제가 없다는 것을 알 수 있습니다.네, 사소한 버그는 많지만 쇼 스토퍼는 없습니다(적어도 제 사용 예에서는).그렇다고는 해도, 처음부터 프로젝트를 개시하는 경우는, 이 부품을 사용하지 말아 주세요.이 구성 요소는 AngularJS 1.0.x에 바인딩되어 있는 경우에만 적합합니다.Angular 버전을 자유롭게 선택할 수 있는 경우 새 구성 요소를 선택하십시오.Angular 4의 테이블 컴포넌트 목록은 Sam Deering에 의해 이 블로그에 정리되었습니다.
「수천 개의 행」에서는, 서버측의 페이징을 실시하는 것이 최선의 방법입니다.조금 전에 AngularJs 테이블/그리드 옵션을 조사했을 때, 다음과 같은 세 가지 확실한 즐겨찾기가 있었습니다.
이 세 가지 모두 좋지만 구현 방식이 다릅니다.어떤 것을 선택하느냐는 다른 어떤 것보다 개인적인 취향에 따라 결정될 것입니다.
ng-grid는 angular-ui와의 관련성 때문에 가장 잘 알려져 있을 것입니다만, 저는 개인적으로 ng-table을 선호합니다.그들의 구현과 사용법이 매우 마음에 들고, 이용 가능한 훌륭한 문서와 예를 가지고 있으며, 적극적으로 개선되고 있습니다.
기능이 풍부한 각도 그리드는 다음과 같습니다.
일부 기능:
- 단순함을 염두에 두고 제작되었습니다.
- 일반 HTML 테이블을 사용하여 브라우저가 렌더링을 최적화할 수 있습니다.
- 완전히 선언적이어서 문제를 분리할 수 있으므로 컨트롤러를 혼란시키지 않고 HTML로 완전히 설명할 수 있습니다.
- 템플릿 및 양방향 데이터 바인딩 속성을 통해 완전히 사용자 정의할 수 있습니다.
- 코드가 TypeScript로 작성되어 유지보수가 용이합니다.
- 의존관계 목록이 매우 짧습니다.AngularJs 및 Bootstrap CSS (옵션의 Bootswatch 테마 포함)
즐기세요. 네, 저자입니다.앵귤러 그리드에 질렸어
이 투고를 읽는 모든 사용자:ng-grid에서 멀리 떨어지세요.버그로 가득 차 있다(정말..lib의 거의 모든 부분이 고장났습니다).devs는 2.0.x 브랜치의 지원을 포기하고 3.0으로 동작합니다.이것은, 아직 준비가 되어 있지 않습니다.문제를 스스로 해결하는 것은 쉬운 작업이 아닙니다.ng-grid 코드는 시간이 많이 걸리고 일반적으로 각도 및 js에 대한 깊은 지식이 없으면 어려운 작업이 될 것입니다.
결론: 버그로 가득 차 있으며, 마지막 안정 버전은 포기되었습니다.
Github에는 PR이 가득하지만 무시되고 있습니다.2.x 브랜치에서 버그를 보고하면 닫힙니다.
저는 오픈 소스 프로그램이라는 것을 알고 있습니다.불만은 조금 부적절하게 들릴 수 있지만, 라이브러리를 찾고 있는 개발자의 입장에서는 그렇게 생각합니다.큰 프로젝트로 ng-grid로 많은 시간을 보냈는데 헤드캐시가 끝나지 않는다.
TrNgGrid는 지금까지 잘 작동하고 있습니다.ng-grid보다 이 컴포넌트로 이동한 이유는 다음과 같습니다.
부트스트랩 .css의 모든 파워를 사용할 수 있도록 테이블 요소를 만듭니다(ng-grid는 jQuery UI 테마를 사용합니다).
단순하고 문서화된 그리드 옵션.
서버 크기 페이징 기능
jQuery의 배경을 가지고 있는 경우 Angular에서 어떻게 생각할 것인가에 대한 이 답변의 마지막에 Josh David Miller의 첫 번째 글은 다음과 같이 요약합니다.
j도 Query " " " " "Query" 。함함포그리고 을 알고 가 생겼을 , jQuery에 에,
$AngularJS의 '각 J'입니다.번르20번쿼리Query를 사용하여 문제를 해결하려고 하면 더 많은 작업이 수행됩니다.
커스터마이즈를 위한 수많은 기능과 옵션을 갖춘 그리드를 원한다면 jQuery DataTables가 가장 좋은 옵션 중 하나입니다.지금까지 본 각도 전용 그리드는 jQuery DataTables의 기능에 근접하지 않습니다.
그러나 jQuery DataTables는 AngularJs와 잘 통합되지 않습니다(다양한 노력이 있었지만, 어느 것도 매끄러운 통합을 제공하지 않습니다).
아마도 그것은 사람에게 두 가지 선택권을 남길 것이다.
첫 번째는 DataTables만큼 기능이 풍부하지 않은 순수한 Angular 그리드를 사용하는 것입니다.다른 Angular 그리드에 질렸다는 @Moonstom의 의견에 동의하며, trNgGrid는 보기 좋습니다.
두 번째 옵션은 jQuery를 사용하여 jQuery DataTables 플러그인을 사용해야 하는 드문 사례 중 하나입니다. 순수 Angular 그리드를 사용하여 휠을 재발명하려고 하면 DataTables보다 휠의 견고성이 떨어지기 때문입니다.
그렇지 않다면 좋겠지만, 나는 Angular 생태계가 jQuery DataTables만큼 강력한 그리드를 생각해 낸 적이 없을 뿐더러, 좋은 데이터 그리드가 웹 앱에서 좋은 것은 아닙니다. 좋은 그리드가 필수적입니다.
부트스트랩3 클래스를 사용하여 ng-repeat 디렉티브를 사용하여 테이블을 작성할 수 있습니다.
예:
angular.module('App', []);
function ctrl($scope) {
$scope.items = [
['A', 'B', 'C'],
['item1', 'item2', 'item3'],
['item4', 'item5', 'item6']
];
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="ctrl">
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="itemA in items[0]">{{itemA}}</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="itemB in items[1]">{{itemB}}</td>
</tr>
<tr>
<td ng-repeat="itemC in items[2]">{{itemC}}</td>
</tr>
</tbody>
</table>
</div>
</div>라이브 예: http://jsfiddle.net/choroshin/5YDJW/5/
업데이트:
또는 인기 있는 ng-grid, ng-grid는 정렬, 검색, 그룹화 등에 적합하지만 아직 대규모 데이터로 테스트한 적은 없습니다.
매우 가볍고 다이내믹한 열 높이를 갖추고 있습니다.
<ad-table-lite table-name="carsForSale"
column-definition="carsTableColumnDefinition"
local-data-source="models.carsForSale"
page-sizes="[7, 20]">
</ad-table-lite>
다른 답변에서 언급한 바와 같이:검색 기능이 있는 테이블의 경우 "ng-grid"를 선택하고 페이지 번호를 지정하는 것이 가장 좋습니다.실장 중에 도움이 될 수 있는 몇 가지 사항을 언급하겠습니다.
env를 설정하려면:
http://www.json-generator.com/을 클릭하여 JSON 데이터를 생성합니다.샘플 데이터 세트를 입수하여 개발 시간을 단축할 수 있는 매우 뛰어난 툴입니다.
이 플런커는 실장용으로 체크할 수 있습니다.다음을 포함하도록 수정했습니다.검색, 선택 및 페이지 번호 지정 http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
스마트 테이블에 대한 이 튜토리얼은 필요한 모든 정보를 제공합니다.http://lorenzofox3.github.io/smart-table-website/
그리고 다음 질문은 "정확하지는 않지만 이 템플릿은 보기 좋습니다."입니다.- https://github.com/angular-ui/bootstrap/tree/master/template 를 사용하면 모든 템플릿이 잘 작성되어 있습니다.
부트스트랩3을 angularjs로 변환하는 방법에 대해서는 다음 링크에서 이미 언급되어 있습니다.
스마트 테이블에 대해서는 각진 버전에 대응하고 있는지 확인해야 합니다.
검도 그리드는 Wijmo만큼 좋습니다.Kendo는 데이터 소스에 Angular Bindings를 사용하고 있으며, Wijmo에는 Angular 플러그인이 있는 것으로 알고 있습니다.하지만 둘 다 공짜는 아니다.
언급URL : https://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3
'programing' 카테고리의 다른 글
| AngularJS - jQuery 없이 dom에 HTML 요소 추가 (0) | 2023.03.23 |
|---|---|
| 스프링 부트에서의 Servlet Context Listener 등록 방법 (0) | 2023.03.23 |
| ASP.NET 업데이트 패널 시간 초과 (0) | 2023.03.23 |
| JSON에 null 값을 포함해야 함 (0) | 2023.03.23 |
| 각도에서 보기 간에 변경할 때 스코프 모델 유지JS (0) | 2023.03.23 |