Cách tốt nhất để biểu diễn Grid hoặc Table trong AngularJS với Bootstrap 3? [đóng cửa]

Tôi đang tạo một Ứng dụng với AngularJS và Bootstrap 3. Tôi muốn hiển thị bảng / lưới có hàng ngàn hàng. Điều khiển tốt nhất có sẵn cho AngularJS & Bootstrap với các tính năng như Sắp xếp, Tìm kiếm, Phân trang, v.v.

Sau khi dùng thử ngGrid, ngTable, trNgGrid và Bảng thông minh , tôi đã đi đến kết luận rằng Bảng thông minh cho đến nay là triển khai tốt nhất AngularJS-khôn ngoan và Bootstrap-khôn ngoan. Nó được xây dựng chính xác giống như cách bạn xây dựng bảng ngây thơ của riêng mình bằng cách sử dụng góc chuẩn. Trên hết, họ đã thêm một vài chỉ thị giúp bạn thực hiện sắp xếp, lọc, v.v ... Cách tiếp cận của họ cũng làm cho việc mở rộng bản thân khá đơn giản. Việc họ sử dụng các thẻ html thông thường cho các bảng và lặp lại ng tiêu chuẩn cho các hàng và bootstrap tiêu chuẩn để định dạng làm cho điều này trở thành người chiến thắng rõ ràng của tôi.

Mã JS của họ phụ thuộc vào góc và html của bạn có thể phụ thuộc vào bootstrap nếu bạn muốn. Mã JS có tổng cộng 4 kb và bạn thậm chí có thể dễ dàng chọn những thứ ở ngoài đó nếu bạn muốn đạt được dấu chân thậm chí nhỏ hơn.

Trường hợp các lưới khác sẽ cung cấp cho bạn sợ bị giam cầm ở các khu vực khác nhau, Bảng thông minh chỉ cảm thấy mở và đi vào điểm chính.

Nếu bạn phụ thuộc nhiều vào chỉnh sửa nội tuyến và các tính năng nâng cao khác, bạn có thể bắt đầu và chạy nhanh hơn với ngTable chẳng hạn. Tuy nhiên, bạn có thể tự do thêm các tính năng như vậy khá dễ dàng trong Bảng thông minh.

Đừng bỏ lỡ Bảng thông minh !!!

Tôi không có liên quan đến Bảng thông minh, ngoại trừ việc tự sử dụng nó.

Tôi có cùng yêu cầu và giải quyết nó bằng các thành phần sau:

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : Tương thích với AngularJS 1.0.8 và Boostrap CSS 3.x.
• ng-lưới 2.0.7 : Tương thích với AngularJS 1.0.8
• Bootstrap CSS 3.0

Thành phần bảng ng-lưới có khả năng hiển thị hàng trăm hàng trong một lưới có thể cuộn. Nếu bạn phải đối phó với hàng ngàn mục, tốt hơn hết bạn nên sử dụng trình phân trang của ng-lưới. Các tài liệu của ng-lưới là tuyệt vời và chứa nhiều ví dụ. Sắp xếp và tìm kiếm được hỗ trợ ngay cả khi kết hợp với phân trang.

Đây là một ảnh chụp màn hình từ một dự án hiện tại để cho bạn một ấn tượng như thế nào:

[CẬP NHẬT tháng 7 năm 2017]

Sau khi có ng-lưới trong sản xuất trong một vài năm, tôi vẫn có thể nói rằng không có vấn đề lớn với thành phần này. Có, rất nhiều lỗi nhỏ, nhưng không có nút chặn hiển thị (ít nhất là trong các trường hợp sử dụng của tôi). Có nói rằng, tôi sẽ khuyên bạn không nên sử dụng thành phần này nếu bạn bắt đầu một dự án từ đầu. Thành phần này là một lựa chọn tốt nếu bạn đang bị ràng buộc để AngularJS 1.0.x . Nếu bạn có thể tự do chọn phiên bản Angular, hãy tìm một thành phần mới hơn. Một danh sách các thành phần bảng cho Angular 4 đã được Sam Deering biên soạn trong blog này .

Với "hàng ngàn hàng", đặt cược tốt nhất của bạn rõ ràng sẽ là phân trang phía máy chủ. Khi tôi nhìn vào các tùy chọn bảng / lưới AngularJs khác nhau một lúc trước, có ba mục yêu thích rõ ràng:

• lưới điện
• bàn ng
• Bàn thông minh

Cả ba đều tốt, nhưng thực hiện khác nhau. Cái nào bạn chọn có thể sẽ dựa trên sở thích cá nhân hơn bất cứ thứ gì khác.

ng-lưới có lẽ được biết đến nhiều nhất do sự liên kết của nó với angular-ui, nhưng cá nhân tôi thích ng-bàn , tôi thực sự thích cách triển khai của họ và cách bạn sử dụng nó, và họ có tài liệu và ví dụ tuyệt vời có sẵn và tích cực được cải thiện.

Một lưới Angular giàu tính năng là cái này:

trNgGrid

Một số tính năng của nó:

• Được xây dựng với sự đơn giản trong tâm trí.
• Đang sử dụng các bảng HTML đơn giản, cho phép các trình duyệt tối ưu hóa kết xuất.
• Khai báo đầy đủ, duy trì sự tách biệt các mối quan tâm, do đó cho phép bạn mô tả đầy đủ về HTML, mà không làm hỏng bộ điều khiển của bạn.
• Hoàn toàn có thể tùy chỉnh thông qua các mẫu và thuộc tính ràng buộc dữ liệu hai chiều.
• Dễ bảo trì, có mã được viết bằng TypeScript.
• Có một danh sách phụ thuộc rất ngắn: AngularJs và Bootstrap CSS, với các chủ đề Bootswatch tùy chọn.

Thưởng thức. Vâng, tôi là tác giả. Tôi phát ngán với tất cả các lưới Angular ngoài kia.

Đối với bất cứ ai đọc bài đăng này: Làm cho mình một ưu tiên và tránh xa ng-lưới. Có rất nhiều lỗi (thực sự..tất cả các phần của lib đều bị hỏng theo cách nào đó), các nhà phát triển đã từ bỏ sự hỗ trợ của nhánh 2.0.x để hoạt động trong 3.0, điều này rất sẵn sàng. Tự khắc phục các sự cố không phải là một nhiệm vụ dễ dàng, mã ng-lưới không nhỏ và không đơn giản, trừ khi bạn có nhiều thời gian và kiến ​​thức sâu về góc và js nói chung, đây sẽ là một nhiệm vụ khó khăn.

Tóm lại: có đầy đủ các lỗi và phiên bản ổn định cuối cùng đã bị hủy bỏ.

Các github có đầy đủ các PR, nhưng chúng đang bị bỏ qua. Và nếu bạn báo cáo một lỗi trong nhánh 2.x, nó sẽ bị đóng.

Tôi biết là một proyect mã nguồn mở và những lời phàn nàn nghe có vẻ hơi lạc lõng, nhưng từ góc độ của một nhà phát triển đang tìm kiếm một thư viện, đó là ý kiến ​​của tôi. Tôi đã dành nhiều giờ làm việc với ng-lưới trong một proyect lớn và những cơn đau đầu không bao giờ kết thúc

TrNgGrid đang hoạt động rất tốt cho đến nay. Dưới đây là những lý do tôi thích nó hơn ng-lưới và chuyển sang thành phần này

• Nó tạo ra các thành phần bảng để có thể khởi động và sử dụng tất cả sức mạnh của bootstrap .css (ng-lưới sử dụng các chủ đề UI UI).

• Đơn giản, tùy chọn lưới tài liệu tốt.

• Kích thước máy chủ hoạt động

Ở cuối câu trả lời này cho câu hỏi về cách suy nghĩ trong Angular nếu bạn có nền tảng jQuery, bài đăng hàng đầu từ Josh David Miller tóm tắt:

Thậm chí không sử dụng jQuery. Thậm chí không bao gồm nó. Nó sẽ giữ bạn lại. Và khi bạn gặp phải một vấn đề mà bạn nghĩ rằng bạn đã biết cách giải quyết trong jQuery, trước khi bạn tiếp cận $, hãy thử nghĩ về cách thực hiện nó trong giới hạn của AngularJS. Nếu bạn không biết, hãy hỏi! 19 trong số 20 lần, cách tốt nhất để làm điều đó không cần jQuery và cố gắng giải quyết nó với kết quả jQuery mang lại nhiều công việc hơn cho bạn.

Bây giờ nếu bạn muốn một mạng lưới với vô số tính năng và tùy chọn để tùy chỉnh, jQuery DataTables là một trong những tính năng tốt nhất. Các lưới chỉ có góc mà tôi đã thấy không gần với những gì jQuery DataTables có thể làm.

Tuy nhiên , jQuery DataTables không tích hợp tốt với AngularJS. (Đã có nhiều nỗ lực khác nhau, nhưng không có sự tích hợp liền mạch nào.)

Có lẽ điều đó để lại một người có hai lựa chọn.

Đầu tiên là sử dụng lưới Angular thuần túy không có tính năng phong phú như DataTables. Tôi đồng ý với @Moonstom về việc chán ngấy các lưới Angular khác ngoài kia, và trNgGrid trông rất tuyệt.

Tùy chọn thứ hai là để nói: đây là một trong số 1 trường hợp hiếm hoi trong số 20 trường hợp bạn nên sử dụng jQuery và đi kèm với trình cắm thêm DataTables của jQuery, bởi vì những nỗ lực tái tạo lại bánh xe với các lưới Angular thuần túy đã mang lại một bánh xe ít mạnh mẽ hơn so với DataTables.

Sẽ thật tuyệt nếu nó khác, nhưng tôi chưa thấy hệ sinh thái Angular có lưới mạnh như jQuery DataTables, và nó không phải là một mạng dữ liệu tốt là một ứng dụng tốt trong ứng dụng web : một lưới tốt là một điều cần thiết.

Bạn có thể sử dụng 3 lớp bootstrap và xây dựng bảng bằng chỉ thị ng-repeat

Thí dụ:

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>

ví dụ trực tiếp: http://jsfiddle.net/choroshin/5YDJW/5/

Cập nhật:

hoặc bạn luôn có thể thử ng-lưới phổ biến , ng-lưới rất tốt cho việc sắp xếp, tìm kiếm, nhóm, v.v., nhưng tôi chưa thử nghiệm nó trên dữ liệu quy mô lớn.

Dây đeo thích ứng . Đây là câu đố .

Nó rất nhẹ và có chiều cao hàng năng động.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Như đã đề cập trong các câu trả lời khác: Đối với một bảng có tìm kiếm, chọn và phân trang " ng-lưới " là các tùy chọn tốt nhất. Một vài điều tôi đã đi qua tôi sẽ đề cập đến những điều có thể hữu ích trong khi thực hiện:

Để đặt env:

1. http://www.json-generator.com/ để tạo dữ liệu JSON. Đây là một công cụ khá tuyệt vời để thiết lập dữ liệu mẫu của bạn để giúp phát triển nhanh hơn.

2. Bạn có thể kiểm tra plunker này để thực hiện. Tôi đã sửa đổi để bao gồm: tìm kiếm, chọn và phân trang http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Bạn có thể kiểm tra hướng dẫn này về Bảng thông minh, Cung cấp tất cả thông tin bạn cần: http://lorenzofox3.github.io/smart-table-website/

Sau đó, câu hỏi tiếp theo là bootstrap 3: Nó không chính xác nhưng mẫu này có vẻ tốt. - Bạn chỉ có thể sử dụng https://github.com/angular-ui/bootstrap/tree/master/template tất cả các mẫu được viết tốt.

Tôi có thể tiếp tục về cách chuyển đổi bootstrap 3 thành angularjs nhưng nó đã được đề cập trong các liên kết sau:

• Bootstrap 3 tương thích với các chỉ thị bootstrap AngularJS hiện tại?
• https://github.com/angular-ui/bootstrap/issues/331

xin lưu ý rằng liên quan đến bảng thông minh, bạn phải kiểm tra xem nó đã sẵn sàng cho phiên bản góc cạnh của bạn chưa

Lưới Kendo là tốt như Wijmo. Tôi biết Kendo đi kèm với các ràng buộc Angular cho nguồn dữ liệu của họ và tôi nghĩ Wijmo có một plugin Angular. Không phải là miễn phí mặc dù.