วิธีที่ดีที่สุดในการแสดง Grid หรือ Table ใน AngularJS ด้วย Bootstrap 3 [ปิด]

ฉันกำลังสร้างแอพด้วย AngularJS และ Bootstrap 3 ฉันต้องการแสดงตาราง / ตารางที่มีหลายพันแถว อะไรคือการควบคุมที่ดีที่สุดสำหรับ AngularJS และ Bootstrap พร้อมคุณสมบัติเช่นการเรียงลำดับการค้นหาการแบ่งหน้า ฯลฯ

หลังจากลองใช้ ngGrid, ngTable, trNgGrid และSmart Tableฉันได้ข้อสรุปว่าSmart Tableเป็นการใช้งานที่ดีที่สุด AngularJS-wise และ Bootstrap-wise มันถูกสร้างขึ้นในลักษณะเดียวกับที่คุณจะสร้างตารางไร้เดียงสาของคุณเองโดยใช้มุมมาตรฐาน ยิ่งไปกว่านั้นพวกเขาได้เพิ่มคำสั่งบางอย่างที่ช่วยให้คุณเรียงลำดับการกรองและอื่น ๆ วิธีการของพวกเขายังทำให้มันค่อนข้างง่ายที่จะขยายตัวเอง ความจริงที่ว่าพวกเขาใช้แท็ก html ปกติสำหรับตารางและทำซ้ำมาตรฐานสำหรับแถวและ bootstrap มาตรฐานสำหรับการจัดรูปแบบทำให้ผู้ชนะของฉันชัดเจน

รหัส JS ของพวกเขาขึ้นอยู่กับมุมและ html ของคุณขึ้นอยู่กับ bootstrap หากคุณต้องการ รหัส JS คือทั้งหมด 4 kb และคุณสามารถเลือกสิ่งต่าง ๆ ได้อย่างง่ายดายถ้าคุณต้องการเข้าถึงรอยเท้าที่เล็กลง

ในที่ที่กริดอื่น ๆ จะให้ความรู้สึกไม่สบายในพื้นที่ต่าง ๆ Smart Table จะรู้สึกเปิดกว้างและตรงประเด็น

หากคุณพึ่งพาการแก้ไขแบบอินไลน์และคุณสมบัติขั้นสูงอื่น ๆ คุณอาจลุกขึ้นและทำงานได้เร็วขึ้นด้วย ngTable เป็นต้น อย่างไรก็ตามคุณสามารถเพิ่มคุณสมบัติดังกล่าวได้อย่างง่ายดายใน Smart Table

อย่าพลาดSmart Table !!!

ฉันไม่มีความเกี่ยวข้องกับ 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
• Bootstrap CSS 3.0

องค์ประกอบของตาราง ng-grid สามารถแสดงหลายร้อยแถวในตารางที่เลื่อนได้ หากคุณต้องจัดการกับหลายพันรายการคุณจะดีกว่าโดยใช้ตัวจัดระเบียบของ ng-grid เอกสารของ ng-grid นั้นยอดเยี่ยมและมีตัวอย่างมากมาย รองรับการเรียงลำดับและค้นหาแม้ใช้ร่วมกับการแบ่งหน้า

นี่คือภาพหน้าจอจากโครงการปัจจุบันเพื่อสร้างความประทับใจให้กับคุณ:

[อัพเดทกรกฎาคม 2017]

หลังจากมี ng-grid ในการผลิตเป็นเวลาสองปีฉันยังสามารถบอกได้ว่าไม่มีปัญหาสำคัญกับส่วนนี้ ใช่มีข้อบกพร่องเล็กน้อยมากมาย แต่ไม่มีตัวหยุดการแสดง (อย่างน้อยในกรณีใช้งานของฉัน) ต้องบอกว่าฉันจะขอแนะนำอย่างยิ่งกับการใช้ส่วนนี้หากคุณเริ่มโครงการตั้งแต่เริ่มต้น ส่วนนี้เป็นตัวเลือกที่ดี แต่ถ้าคุณจะผูกพันกับAngularJS 1.0.x หากคุณมีอิสระที่จะเลือกเวอร์ชันของ Angular ให้ไปที่ส่วนประกอบที่ใหม่กว่า รายการส่วนประกอบของตารางสำหรับ Angular 4 รวบรวมโดย Sam Deering ในบล็อกนี้

ด้วย "พันแถว" ทางออกที่ดีที่สุดของคุณคือการทำเพจจิ้งด้านเซิร์ฟเวอร์ เมื่อฉันดูตัวเลือกตาราง / กริด AngularJs ที่แตกต่างกันในขณะที่กลับมีสามรายการโปรดที่ชัดเจน:

• NG-ตาราง
• NG-ตาราง
• สมาร์ทเทเบิล

ทั้งสามเป็นสิ่งที่ดี แต่ดำเนินการแตกต่างกัน สิ่งที่คุณเลือกอาจจะขึ้นอยู่กับความชอบส่วนบุคคลมากกว่าสิ่งอื่นใด

ng-gridน่าจะเป็นที่รู้จักมากที่สุดเนื่องจากความสัมพันธ์กับ angular-ui แต่โดยส่วนตัวแล้วผมชอบng-tableผมชอบการนำไปใช้และวิธีการใช้งานของพวกเขาและพวกเขามีเอกสารและตัวอย่างที่ดีและมีการปรับปรุงอย่างแข็งขัน

ฟีเจอร์ตารางเชิงมุมที่หลากหลายคืออันนี้:

trNgGrid

คุณสมบัติบางอย่าง:

• ถูกสร้างขึ้นด้วยความเรียบง่ายในใจ
• กำลังใช้ตาราง HTML ธรรมดาทำให้เบราว์เซอร์สามารถปรับการแสดงผลให้เหมาะสมที่สุด
• เปิดเผยอย่างเต็มที่รักษาการแยกความกังวลจึงช่วยให้คุณสามารถอธิบายได้อย่างเต็มที่ในรูปแบบ HTML โดยไม่ทำให้ตัวควบคุมของคุณยุ่งเหยิง
• สามารถปรับแต่งได้อย่างสมบูรณ์ผ่านเทมเพลตและแอตทริบิวต์การผูกข้อมูลสองทาง
• ดูแลรักษาง่ายโดยมีรหัสที่เขียนใน TypeScript
• มีรายการการอ้างอิงสั้น ๆ : AngularJs และ Bootstrap CSS พร้อมด้วยธีม Bootswatch ที่เป็นตัวเลือก

สนุก. ใช่ฉันเป็นคนเขียน ฉันเบื่อหน่ายกับตะแกรงมุมทั้งหมดที่นั่น

สำหรับทุกคนที่อ่านโพสต์นี้: ทำตัวเองชอบและอยู่ห่างจาก ng-grid เต็มไปด้วยข้อบกพร่อง (จริง ๆ .. เกือบทุกส่วนของ lib จะถูกทำลายอย่างใด) devs ได้ละทิ้งการสนับสนุนของสาขา 2.0.x เพื่อทำงานใน 3.0 ซึ่งอยู่ไกลจากความพร้อม การแก้ไขปัญหาด้วยตัวเองไม่ใช่เรื่องง่ายรหัส ng-grid ไม่เล็กและไม่ง่ายเว้นแต่คุณจะมีเวลามากและมีความรู้เชิงลึกเกี่ยวกับเชิงมุมและ js โดยทั่วไปมันจะเป็นงานที่ยาก

Bottom Line:เต็มไปด้วยข้อบกพร่องและรุ่นเสถียรล่าสุดถูกทอดทิ้ง

GitHub นั้นเต็มไปด้วย PRs แต่พวกมันถูกเพิกเฉย และถ้าคุณรายงานข้อผิดพลาดในสาขา 2.x มันจะถูกปิด

ฉันรู้ว่าเป็นโอเพนซอร์ซโอเพนซอร์สและการร้องเรียนอาจฟังดูแปลก ๆ แต่จากมุมมองของนักพัฒนาที่กำลังมองหาห้องสมุดนั่นเป็นความคิดของฉัน ฉันใช้เวลาหลายชั่วโมงในการทำงานกับ ng-grid ใน proyect ขนาดใหญ่และ headcache ไม่สิ้นสุด

TrNgGrid ใช้งานได้ดีจนถึงตอนนี้ นี่คือเหตุผลที่ฉันชอบมันเพื่อ ng-grid และย้ายไปที่ส่วนนี้

• มันทำให้องค์ประกอบของตารางเพื่อให้สามารถ bootswatch และใช้พลังทั้งหมดของ bootstrap .css (ng-grid ใช้ธีม jQuery UI)

• ง่ายตารางตัวเลือกเอกสารที่ดี

• การเพจขนาดเซิร์ฟเวอร์ใช้งานได้

ในตอนท้ายของคำตอบสำหรับคำถามเกี่ยวกับวิธีคิดในเชิงมุมถ้าคุณมีพื้นหลัง jQuery โพสต์บนสุดจาก Josh David Millerสรุป:

อย่าใช้แม้แต่ jQuery อย่ารวมไว้ด้วย มันจะรั้งคุณไว้ และเมื่อคุณพบปัญหาที่คุณคิดว่าคุณรู้วิธีแก้ปัญหาใน jQuery แล้วก่อนที่คุณจะไปถึงให้$ลองคิดถึงวิธีทำภายในขอบเขตของ AngularJS ถ้าคุณไม่รู้ถาม! 19 ครั้งจาก 20 วิธีที่ดีที่สุดในการทำมันไม่จำเป็นต้อง jQuery และพยายามที่จะแก้ปัญหาด้วย jQuery ผลลัพธ์ในการทำงานมากขึ้นสำหรับคุณ

ตอนนี้ถ้าคุณต้องการกริดที่มีคุณสมบัติและตัวเลือกมากมายสำหรับการปรับแต่ง jQuery DataTablesเป็นหนึ่งในดีที่สุด กริดแบบเชิงมุมเท่านั้นที่ฉันเห็นไม่ใกล้กับ jQuery DataTables ที่สามารถทำได้

อย่างไรก็ตาม jQuery DataTables ทำงานได้ไม่ดีกับ AngularJS (มีความพยายามหลายอย่าง แต่ไม่มีการบูรณาการที่ราบรื่น)

บางทีนั่นอาจทำให้คนมีสองตัวเลือก

สิ่งแรกคือไปกับกริด Angular ล้วนๆซึ่งไม่ได้มีคุณสมบัติที่สมบูรณ์เหมือนกับ DataTables ฉันเห็นด้วยกับ @ Moonstom เกี่ยวกับการเบื่ออาหารกับ Angular grids อื่น ๆ ที่นั่นและ trNgGrid ดูดี

ตัวเลือกที่สองคือการพูดว่า: นี่เป็นหนึ่งในผู้ที่หายาก 1 ใน 20 กรณีที่คุณควรใช้ jQuery และไปกับปลั๊กอิน jQuery DataTables เนื่องจากความพยายามในการคิดค้นล้อใหม่ด้วยกริด Angular บริสุทธิ์ได้ให้ ล้อที่แข็งแกร่งน้อยกว่า DataTables

มันจะดีถ้ามันเป็นอย่างอื่น แต่ฉันไม่ได้เห็นระบบนิเวศเชิงมุมมาพร้อมกับตารางที่แข็งแกร่งเป็น jQuery DataTables และมันก็ไม่เหมือนกับตารางข้อมูลที่ดีที่ดีในเว็บแอป : กริดที่ดีเป็นสิ่งจำเป็น

คุณสามารถใช้ bootstrap 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. http://www.json-generator.com/เพื่อสร้างข้อมูล JSON มันเป็นเครื่องมือที่ยอดเยี่ยมที่จะทำให้ชุดข้อมูลตัวอย่างของคุณพัฒนาได้เร็วขึ้น

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แม่แบบทั้งหมดที่เขียนได้ดี

ฉันสามารถไปเกี่ยวกับวิธีการแปลง bootstrap 3 เป็น angularjs แต่มันกล่าวถึงแล้วในลิงค์ต่อไปนี้:

• Bootstrap 3 เข้ากันได้กับคำสั่ง bootstrap AngularJS ปัจจุบันหรือไม่
• https://github.com/angular-ui/bootstrap/issues/331

โปรดทราบว่าเกี่ยวกับสมาร์ทตารางคุณต้องตรวจสอบว่ามันพร้อมสำหรับรุ่นเชิงมุมของคุณ

ตาราง Kendo นั้นดีเช่นเดียวกับ Wijmo ฉันรู้ว่าเคนโด้มาพร้อมกับ Angular bindings สำหรับแหล่งข้อมูลของพวกเขาและฉันคิดว่า Wijmo มีปลั๊กอิน Angular ไม่ว่าจะฟรีก็ตาม