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
• ng-table
• 스마트 테이블

세 가지 모두 훌륭하지만 다르게 구현됩니다. 어느 쪽을 선택 하든지 다른 것보다 개인적인 취향에 더 잘 맞을 것입니다.

ng-grid 는 angular-ui와의 연관성으로 인해 가장 잘 알려져 있지만 개인적으로 ng-table을 선호 하며 구현 및 사용 방법을 정말 좋아하며 훌륭한 설명서와 예제를 제공하고 적극적으로 개선하고 있습니다.

기능이 풍부한 각도 그리드는 다음과 같습니다.

trNgGrid

그 기능 중 일부 :

• 단순성을 염두에두고 제작되었습니다.
• 브라우저가 렌더링을 최적화 할 수 있도록 일반 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를 설정하려면

1. JSON 데이터를 생성하려면 http://www.json-generator.com/ 을 참조하십시오 . 개발 속도를 높이기 위해 샘플 데이터 세트를 가져 오는 매우 멋진 도구입니다.

2. 구현을 위해이 플런저를 확인할 수 있습니다. 검색, 선택 및 페이지 매김을 포함하도록 수정했습니다. 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로 변환하는 방법에 대해 계속할 수 있지만 이미 다음 링크에서 언급했습니다.

• 현재 AngularJS 부트 스트랩 지시문과 호환되는 부트 스트랩 3?
• https://github.com/angular-ui/bootstrap/issues/331

스마트 테이블에 대해서는 각도 버전이 준비되어 있는지 확인해야합니다.

검도 그리드는 Wijmo뿐만 아니라 좋습니다. Kendo가 데이터 소스에 Angular 바인딩을 제공한다는 것을 알고 Wijmo에 Angular 플러그인이 있다고 생각합니다. 그래도 무료는 아닙니다.