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만큼 강력한 그리드를 제공하는 것을 보지 못했습니다. 웹 애플리케이션에서 좋은 데이터 그리드가 좋은 것처럼 보이지는 않습니다 좋은 그리드는 필수입니다.
