JavaScript / JQuery Grid แบบไดนามิกที่ดีที่สุด [ปิด]

87

ฉันกำลังทำงานกับ JavaScript, JQuery และ HTML UI ของโครงการของฉันเป็นแบบไดนามิกอย่างสมบูรณ์ ฉันกำลังมองหา JavaScript / JQuery Grid แบบไดนามิกซึ่งรองรับคุณสมบัติต่อไปนี้

ใครช่วยบอกหน่อยว่ามี Grid โอเพ่นซอร์สที่ดูดีที่รองรับคุณสมบัติต่อไปนี้หรือไม่

  1. ฉันควรจะสามารถสร้างอินสแตนซ์ของกริดได้ในขณะรันไทม์และเพิ่มไปยัง DOM
  2. รองรับเทมเพลตคอลัมน์ (กล่องข้อความเลือกช่องทำเครื่องหมายหรืออินพุตใด ๆ หรือข้อความธรรมดา)
  3. รองรับการตั้งค่าเทมเพลตคอลัมน์ใหม่หรือแทนที่เทมเพลตคอลัมน์ที่มีอยู่แบบเรียลไทม์
  4. การควบคุมอินพุตไม่กี่ (เช่นช่อง, ช่องทำเครื่องหมาย .. ) ปัจจุบันภายใต้คอลัมน์อาจจะเปิดใช้งานและอาจจะไม่กี่คนพิการ
  5. รองรับ setData () แบบเรียลไทม์
  6. รองรับเหตุการณ์หากข้อมูลอินพุตใด ๆ เปลี่ยนแปลงโดยผู้ใช้
  7. ควรสนับสนุนการเลือกแถว
  8. เพิ่มแถวหรือลบแถวรองรับแบบเรียลไทม์โดยไม่ต้องแสดงผลทั้งเส้นตาราง
  9. รองรับเพจจิ้ง
  10. รองรับการจัดเรียงตามคอลัมน์แบบเรียลไทม์
  11. เริ่มเหตุการณ์หากข้อมูลถูกจัดเรียงตามผู้ใช้แบบเรียลไทม์
  12. Grid UI ต้องรองรับคอลัมน์ที่สามารถสร้างได้
  13. ปรับขนาดใหม่อัตโนมัติ (จะดีมากถ้ากริดปรับขนาดได้อัตโนมัติตามขนาดขององค์ประกอบหลัก)
  14. มีเอกสารที่ดีแน่นอน
javascript  jquery  grid 
— สมนาถ
แหล่งที่มา
7
เขียนเอง. หากคุณต้องการคุณสมบัติเหล่านั้นทั้งหมดคุณต้องทำเอง โซลูชันที่กำหนดเองเป็นทางออกที่ดีที่สุดเสมอ
— Raynos
28
ฉันไม่แน่ใจว่ามันเป็นทางออกที่ดีที่สุดเสมอไป ฉันหมายความว่า - ฉันไม่ได้กำลังจะสร้างเครื่องมือฐานข้อมูลของตัวเองแทนที่จะใช้ InnoDB ...
— กริม ...
2
@Roynos ฉันได้เขียนบางสิ่งด้วยตัวเอง แต่ฉันต้องใช้เวลามากในการใช้คุณสมบัติทั้งหมดเช่นการเรียงลำดับการปรับขนาด ... ฉันยังคงประเมินกริดทั้งหมดทีละเส้น
— สมนาถ
22
@Raynos นั่นมันไร้สาระ ทางออกที่ดีที่สุดคือโซลูชันที่ทำงานด้วยต้นทุนต่ำที่สุด จะสร้างมันทำไมถ้ามันทำไปแล้ว?
— richard
@RichardDesLonde คุณพูดถูก ตัวเลือกของฉันคือเลือกโซลูชันที่ดีที่สุดที่มีอยู่และขยายตามความต้องการของคุณ
— สมนาถ

คำตอบ:

42

มีประโยชน์บางอย่าง ได้แก่ :

ฟรี:

จ่าย:

รายการที่ดีที่สุดในความคิดของฉันคือ Flexigrid และ jQuery Grid

— โซแฮม
แหล่งที่มา
จนถึงตอนนี้ฉันเริ่มชอบ jQuery Grid trirand.com/blog/jqgrid/jqgrid.htmlแต่ก็ยังไม่แน่ใจ อัพเดทให้ทราบ ...
— สมนาถ
@ สมนาถ - jQuery grid เป็นสิ่งที่คุณมีความสุขที่สุดหรือไม่? ฉันมีความต้องการที่คล้ายกันและกำลังประเมิน DataTables แต่การเพิ่มแถว (และให้แถวนั้นเป็นส่วนหนึ่งของลำดับการจัดเรียง) ทำงานได้ไม่ดี
— MattW
@MattW ใช่ฉันชอบ jQuery Grid การเพิ่มข้อมูลเป็นเรื่องง่ายมาก นอกจากนี้คุณสามารถจัดเรียงทุกคอลัมน์ได้เพียงแค่ตั้งค่าสถานะ รายการความต้องการของฉันใหญ่มาก แต่มีบางสิ่งที่ฉันสร้างขึ้นเองและในบางกรณีฉันใช้ jQuery Grid มันมี API ที่ยอดเยี่ยมและใช้งานง่ายด้วย ณ เวลานี้ฉันมีความสุขกับ jQuery Grid ดี.
— สมนาถ
@ สมนาถแล้วสุดท้ายคุณเลือกอันไหน? ฉันส่วนหัว DataTable ก็เป็นตัวเลือกที่ดีเช่นกัน อันไหนเร็วที่สุด? และข้อใดสนับสนุนการจัดกลุ่ม?
— Vivek Vardhan
@VivekVardhan ฉันใช้trirand.com/blog/jqgrid/jqgrid.html
— สมนาถ
38

คุณสามารถลองhttp://datatables.net/

DataTables เป็นปลั๊กอินสำหรับไลบรารี jQuery Javascript เป็นเครื่องมือที่มีความยืดหยุ่นสูงโดยอาศัยพื้นฐานของการเพิ่มประสิทธิภาพแบบก้าวหน้าซึ่งจะเพิ่มการควบคุมการโต้ตอบขั้นสูงให้กับตาราง HTML ใด ๆ คุณสมบัติหลัก:

  • เลขหน้าความยาวตัวแปร
  • การกรองขณะบิน
  • การจัดเรียงหลายคอลัมน์พร้อมการตรวจจับชนิดข้อมูล
  • การจัดการความกว้างของคอลัมน์อย่างชาญฉลาด
  • แสดงข้อมูลจากแหล่งข้อมูลเกือบทุกแห่ง
  • DOM อาร์เรย์ Javascript ไฟล์ Ajax และการประมวลผลฝั่งเซิร์ฟเวอร์ (PHP, C #, Perl, Ruby, AIR, Gears ฯลฯ )
  • ตัวเลือกการเลื่อนสำหรับวิวพอร์ตตาราง
  • เป็นสากลอย่างเต็มที่
  • สนับสนุน jQuery UI ThemeRoller
  • Rock solid - ได้รับการสนับสนุนโดยชุดการทดสอบมากกว่า 2,600 หน่วย
  • มีปลั๊กอินที่หลากหลาย TableTools, FixedColumns, KeyTable และอื่น ๆ
  • แจกฟรี!
  • ประหยัดรัฐ
  • คอลัมน์ที่ซ่อนอยู่
  • การสร้างตารางแบบไดนามิก
  • Ajax โหลดข้อมูลอัตโนมัติ
  • กำหนดตำแหน่ง DOM ที่กำหนดเอง
  • การกรองคอลัมน์เดียว
  • ประเภทการแบ่งหน้าทางเลือก
  • ปฏิสัมพันธ์ DOM แบบไม่ทำลาย
  • การจัดเรียงคอลัมน์ที่ไฮไลต์
  • ตัวเลือกแหล่งข้อมูลขั้นสูง
  • การสนับสนุนปลั๊กอินที่กว้างขวาง
  • การเรียงลำดับการตรวจจับประเภทฟังก์ชัน API การแบ่งหน้าและการกรอง
  • กำหนดธีมได้อย่างเต็มที่โดย CSS
  • เอกสารที่เป็นของแข็ง
  • ตัวอย่างที่สร้างไว้ล่วงหน้า 110+ ตัวอย่าง
  • รองรับ Adobe AIR อย่างเต็มที่
— ล้อมรอบ
แหล่งที่มา
3
โปรดทำการจัดรูปแบบที่เหมาะสมสำหรับคุณสมบัติหลัก อย่าใช้แค่คัดลอก / วาง ต้องอ่านครั้งเดียวหลังจากคัดลอก / วาง?
"ปฏิสัมพันธ์ DOM แบบไม่ทำลาย" หมายความว่าอย่างไร มีช่วงเวลาที่ยากลำบากในการทำความเข้าใจว่าเหตุใดจึงเป็นเรื่องแปลกใหม่หรือคุณลักษณะและสิ่งที่ครอบคลุม / รับประกัน
— John Zabroski
1
@ จอห์นไม่ได้กล่าวถึงในหน้าที่เชื่อมโยงอีกต่อไป แต่ถ้าคุณค้นหาในเว็บเพื่อหาประโยคนั้นคุณจะพบว่า"การเปลี่ยนแปลงที่ใหญ่ที่สุดใน v1.4 คือการโต้ตอบ DOM ที่ไม่ทำลายสิ่งนี้หมายความว่า DataTables จะไม่เขียนทับ องค์ประกอบของตารางเพื่อทำหน้าที่ของมัน (การเพิ่มประสิทธิภาพแบบโปรเกรสซีฟที่แท้จริง!) แต่มันจะย้ายองค์ประกอบไปรอบ ๆ ใน v1.3 และก่อนที่มันจะสร้าง HTML แบบไดนามิกที่จำเป็นสำหรับ tbody ในการวาดแต่ละครั้งจะไม่เป็นเช่นนั้นอีกต่อไป ข้อได้เปรียบทันทีคือแอตทริบิวต์ทั้งหมด (คลาส ฯลฯ ) บนตารางเดิมจะถูกเก็บรักษาไว้ [... ] "
— CodeCaster
5
มันไม่ใช่ซอฟต์แวร์ฟรีที่ฉันคิดว่าอืมมีปัญหากับมัน
— David
4
ดูเหมือนว่าเหล่านี้กริด DataTables เย็นไม่สามารถแก้ไขได้และถ้าคุณต้องการ - คุณจะต้องจ่ายสำหรับรุ่นที่สามารถแก้ไขได้: editor.datatables.net/purchase/index
— yetanothercoder
8

คำแนะนำของฉันสำหรับไดนามิก JQuery Grid อยู่ด้านล่าง

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

สิ่งที่ดีที่สุดคือ:

DataTablesเป็นปลั๊กอินสำหรับไลบรารี jQuery Javascript เป็นเครื่องมือที่มีความยืดหยุ่นสูงโดยอาศัยพื้นฐานของการเพิ่มประสิทธิภาพแบบก้าวหน้าซึ่งจะเพิ่มการควบคุมการโต้ตอบขั้นสูงให้กับตาราง HTML ใด ๆ

เลขหน้าความยาวตัวแปร

การกรองขณะบิน

การจัดเรียงหลายคอลัมน์พร้อมการตรวจจับชนิดข้อมูล

การจัดการความกว้างของคอลัมน์อย่างชาญฉลาด

แสดงข้อมูลจากแหล่งข้อมูลเกือบทุกแห่ง

DOM อาร์เรย์ Javascript ไฟล์ Ajax และการประมวลผลฝั่งเซิร์ฟเวอร์ (PHP, C #, Perl, Ruby, AIR, Gears ฯลฯ )

ตัวเลือกการเลื่อนสำหรับวิวพอร์ตตาราง

เป็นสากลอย่างเต็มที่

สนับสนุน jQuery UI ThemeRoller

Rock solid - ได้รับการสนับสนุนโดยชุดการทดสอบมากกว่า 2,600 หน่วย

มีปลั๊กอินที่หลากหลาย TableTools, FixedColumns, KeyTable และอื่น ๆ

การสร้างตารางแบบไดนามิก

Ajax โหลดข้อมูลอัตโนมัติ

กำหนดตำแหน่ง DOM ที่กำหนดเอง

การกรองคอลัมน์เดียว

ประเภทการแบ่งหน้าทางเลือก

ปฏิสัมพันธ์ DOM แบบไม่ทำลาย

การจัดเรียงคอลัมน์ที่ไฮไลต์

ตัวเลือกแหล่งข้อมูลขั้นสูง

การสนับสนุนปลั๊กอินที่กว้างขวาง

การเรียงลำดับการตรวจจับประเภทฟังก์ชัน API การแบ่งหน้าและการกรอง

กำหนดธีมได้อย่างเต็มที่โดย CSS

เอกสารที่เป็นของแข็ง

ตัวอย่างที่สร้างไว้ล่วงหน้า 110+ ตัวอย่าง

รองรับ Adobe AIR อย่างเต็มที่

5

ดูที่ agiletoolkit.org เนื่องจากมี CRUD ที่ใช้งานง่ายซึ่งรองรับ 2,4,6,7,9,10 และ 12 นอกกรอบ (ใช้ Ajax เพื่อป้องกันกริดเมื่อเพิ่มลบข้อมูลและรวมเข้ากับ jquery

ฉันจะโพสต์ตัวอย่าง แต่บน iPad ในขณะนี้

— Trevor North
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.