Bootstrap 3을 사용하여 AngularJS에서 그리드 또는 테이블을 나타내는 가장 좋은 방법은 무엇입니까? [닫은]
AngularJS와 Bootstrap 3을 사용하여 앱을 만들고 있습니다. 수천 행의 테이블 / 그리드를 보여주고 싶습니다. 정렬, 검색, 페이지 매김 등과 같은 기능으로 AngularJS 및 Bootstrap에 가장 적합한 제어 기능은 무엇입니까?
ngGrid, ngTable, trNgGrid 및 Smart Table을 시도한 후에 Smart Table 이 AngularJS와 Bootstrap에 가장 적합한 구현 이라는 결론에 도달했습니다 . 표준 각도를 사용하여 자신의 순진한 테이블을 만들 때와 동일한 방식으로 빌드됩니다. 또한 정렬, 필터링 등을 수행하는 데 도움이되는 몇 가지 지시문을 추가했습니다. 이러한 접근 방식을 사용하면 자신을 확장하는 것이 매우 간단합니다. 테이블에 일반 html 태그를 사용하고 행에 표준 ng-repeat를 사용하고 서식을 지정하기 위해 표준 부트 스트랩을 사용한다는 사실이 분명한 승자가되었습니다.
JS 코드는 각도에 따라 다르며 원하는 경우 html은 부트 스트랩에 의존 할 수 있습니다. JS 코드는 총 4KB이며 더 작은 설치 공간에 도달하려는 경우 쉽게 물건을 선택할 수 있습니다.
다른 그리드가 다른 영역에서 폐소 공포증을 유발할 수있는 곳에 Smart Table은 개방 된 느낌을줍니다.
인라인 편집 및 기타 고급 기능에 크게 의존하는 경우 예를 들어 ngTable을 사용하여 더 빨리 시작할 수 있습니다. 그러나 Smart Table에서 이러한 기능을 매우 쉽게 추가 할 수 있습니다.
스마트 테이블을 놓치지 마세요 !!!
스마트 테이블을 직접 사용하는 것 외에는 스마트 테이블과 관련이 없습니다.
나는 동일한 요구 사항을 가지고 다음 구성 요소를 사용하여 해결했습니다.
- 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 버전을 자유롭게 선택할 수 있으면 최신 구성 요소로 이동하십시오. Sam Deering은 Angular 4의 테이블 구성 요소 목록을 이 블로그 에서 컴파일했습니다 .
"수천 개의 행"을 사용하면 서버 측 페이징을 수행하는 것이 가장 좋습니다. 다른 AngularJs 테이블 / 그리드 옵션을 잠시 살펴 보았을 때 세 가지 확실한 즐겨 찾기가있었습니다.
세 가지 모두 훌륭하지만 다르게 구현됩니다. 어느 쪽을 선택 하든지 다른 것보다 개인적인 취향에 더 잘 맞을 것입니다.
ng-grid 는 angular-ui와의 연관성으로 인해 가장 잘 알려져 있지만 개인적으로 ng-table을 선호 하며 구현 및 사용 방법을 정말 좋아하며 훌륭한 설명서와 예제를 제공하고 적극적으로 개선하고 있습니다.
기능이 풍부한 각도 그리드는 다음과 같습니다.
그 기능 중 일부 :
- 단순성을 염두에두고 제작되었습니다.
- 브라우저가 렌더링을 최적화 할 수 있도록 일반 HTML 테이블을 사용하고 있습니다.
- 우려의 분리를 유지하면서 완전히 선언적이므로 컨트롤러를 손상시키지 않고 HTML로 완전히 설명 할 수 있습니다.
- 템플릿 및 양방향 데이터 바인딩 된 속성을 통해 완전히 사용자 지정할 수 있습니다.
- TypeScript로 작성된 코드로 유지 관리가 쉽습니다.
- 선택적 Bootswatch 테마가있는 AngularJ 및 Bootstrap CSS는 매우 짧은 종속성 목록이 있습니다.
즐겨. 네, 저자입니다. 나는 거기에 모든 각도 그리드를 먹었습니다.
이 게시물을 읽는 사람 : 자신에게 호의를 베풀고 ng-grid를 멀리하십시오. 버그로 가득 차 있습니다 (실제로 .lib의 거의 모든 부분이 어떻게 든 손상되었습니다). 개발자는 3.0에서 작동하기 위해 2.0.x 분기 지원을 포기했습니다. ng-grid 코드는 작지 않고 간단하지 않습니다. 많은 시간과 일반적으로 각도와 js에 대한 깊은 지식이 없다면 어려운 작업이 될 것입니다.
결론 : 버그로 가득 차 있으며 마지막 안정 버전은 버려졌습니다.
github은 PR로 가득 차 있지만 무시됩니다. 그리고 2.x 브랜치에서 버그를보고하면 닫힙니다.
나는 오픈 소스 proyect이며 불만이 조금 어긋난 것처럼 들릴 수도 있지만 라이브러리를 찾는 개발자의 관점에서 볼 때 그것은 내 의견입니다. 큰 proyect에서 ng-grid로 많은 시간을 보냈으며 헤드 캐시는 끝나지 않습니다.
TrNgGrid는 지금까지 훌륭하게 작동하고 있습니다. ng-grid를 선호 하고이 구성 요소로 이동 한 이유는 다음과 같습니다.
그것은 부트 요소가 될 수 있도록 테이블 요소를 만들고 부트 스트랩 .css의 모든 기능을 사용합니다 (ng-grid는 jQuery UI 테마를 사용합니다).
간단하고 잘 문서화 된 그리드 옵션.
서버 크기 페이징 작동
jQuery 배경이있는 경우 Angular에서 어떻게 생각하는지에 대한이 답변의 끝 에서 Josh David Miller의 최상위 게시물은 다음과 같습니다.
jQuery를 사용하지 마십시오. 포함하지 마십시오. 그것은 당신을 다시 잡아 것입니다. 그리고 jQuery에서 이미 해결하는 방법을 알고 있다고 생각하는 문제가 발생하면을 얻기 전에
$AngularJS를 제한하는 방법을 생각해보십시오. 모른다면 물어보십시오! 20 중 19 번, jQuery가 필요하지 않고 jQuery 결과로 해결하려고 시도하는 가장 좋은 방법은 더 많은 작업을 수행하는 것입니다.
이제 사용자 지정을위한 수많은 기능과 옵션이 포함 된 그리드를 원한다면 jQuery DataTables 가 가장 좋습니다. 내가 본 Angular 전용 그리드는 jQuery DataTables가 할 수있는 것에 가깝지 않습니다.
그러나 jQuery DataTables는 AngularJS와 잘 통합되지 않습니다. (다양한 노력이 있었지만 완벽한 통합을 제공하는 것은 없습니다.)
아마도 그것은 두 가지 옵션을 가진 사람을 떠날 것입니다.
첫 번째는 DataTables만큼 기능이 풍부한 순수한 Angular 그리드를 사용하는 것입니다. 나는 거기에 다른 Angular 그리드와 함께 먹는 것에 대해 @Moonstom에 동의하며 trNgGrid는 멋지게 보입니다.
두 번째 옵션은 다음과 같습니다. 이것은 순수한 Angular 그리드로 휠을 재발 명하려는 노력으로 인해 jQuery를 사용하고 jQuery DataTables 플러그인과 함께 사용해야 하는 20 가지 중 드문 경우 중 하나입니다 . 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를 설정하려면
JSON 데이터를 생성하려면 http://www.json-generator.com/ 을 참조하십시오 . 개발 속도를 높이기 위해 샘플 데이터 세트를 가져 오는 매우 멋진 도구입니다.
구현을 위해이 플런저를 확인할 수 있습니다. 검색, 선택 및 페이지 매김을 포함하도록 수정했습니다. http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
스마트 테이블에 대한이 자습서를 확인할 수 있습니다. 필요한 모든 정보를 제공합니다. http://lorenzofox3.github.io/smart-table-website/
다음 질문은 bootstrap 3: 정확하지는 않지만이 템플릿은 좋아 보입니다. - 당신은 사용할 수 있습니다 https://github.com/angular-ui/bootstrap/tree/master/template 모든 템플릿 잘 작성됩니다.
부트 스트랩 3을 angularjs로 변환하는 방법에 대해 계속할 수 있지만 다음 링크에서 이미 언급했습니다.
스마트 테이블과 관련하여 각도 버전이 준비되어 있는지 확인해야합니다.
검도 그리드는 Wijmo뿐만 아니라 좋습니다. Kendo가 데이터 소스에 Angular 바인딩을 제공한다는 것을 알고 Wijmo에 Angular 플러그인이 있다고 생각합니다. 그래도 무료는 아닙니다.
'Programing' 카테고리의 다른 글
| git pull과 git pull --rebase의 차이점 (0) | 2020.03.21 |
|---|---|
| 인수를 전달하여 다른 Python 스크립트에서 Python 스크립트를 실행하십시오. (0) | 2020.03.21 |
| C #에서 스택 추적을 잃지 않고 InnerException을 다시 발생시키는 방법은 무엇입니까? (0) | 2020.03.21 |
| 동적 표현식을 컴파일하는 데 필요한 하나 이상의 유형을 찾을 수 없습니다. (0) | 2020.03.21 |
| VS 2017에서 디버깅을 중지 할 때 브라우저 닫기를 자동으로 중지하는 방법 (0) | 2020.03.21 |