ag grid ดาวน์โหลด - ag grid ดาวน์โหลดซอร์สโค้ด

ag grid

ซอร์สโค้ดอื่น ๆ

ดาวน์โหลด

ตารางข้อมูล JavaScript | ตารางจาวาสคริปต์

โลโก้กริด AG

- เว็บไซต์ • ? เอกสารประกอบ • ?️ ชุมชน

GitHub ส้อม

AG Grid เป็น JavaScript Data Grid ที่ มีคุณลักษณะครบถ้วน และ ปรับแต่งได้สูง ให้ ประสิทธิภาพที่โดดเด่น ไม่มีการพึ่งพาบุคคลที่สาม และมาพร้อมกับการสนับสนุน ตอบสนอง เชิงมุม และ วิว .

ภาพรวม

สารบัญ

ตารางข้อมูล JavaScript | ตารางจาวาสคริปต์

การสนับสนุนองค์กร
รายงานข้อผิดพลาด
คำถาม
มีส่วนร่วม
เครื่องมือและส่วนขยาย
ตู้โชว์
นักดูดาว
ส่วนประกอบที่กำหนดเอง
ธีมส์
ธีมที่กำหนดเอง
การติดตั้ง
ตั้งค่า
โครงการเมล็ดพันธุ์
คุณสมบัติ
ตัวอย่าง
- ภาพรวม
⚡️ เริ่มต้นอย่างรวดเร็ว
️ การปรับแต่ง
- ชุมชน
- สนับสนุน
ใบอนุญาต

AG Grid มีให้เลือกสองเวอร์ชัน: ชุมชนและองค์กร

ag-grid-community เป็นบริการฟรีภายใต้ใบอนุญาต MIT และมาพร้อมกับคุณสมบัติหลักทั้งหมดที่คาดหวังจากตารางข้อมูล JavaScript ซึ่งรวมถึงการเรียงลำดับ การกรอง การแบ่งหน้า การแก้ไข ส่วนประกอบที่กำหนดเอง ธีม และอื่นๆ
ag-grid-enterprise มีให้บริการภายใต้ใบอนุญาตเชิงพาณิชย์และมาพร้อมกับคุณสมบัติขั้นสูง เช่น การสร้างแผนภูมิแบบรวม การจัดกลุ่มแถว การรวม Pivoting หลัก/รายละเอียด โมเดลแถวฝั่งเซิร์ฟเวอร์ และการส่งออก นอกเหนือจากการสนับสนุนเฉพาะจากทีมวิศวกรของเรา

คุณสมบัติ

คุณสมบัติ	ชุมชนเอจีกริด	เอจี กริด เอ็นเตอร์ไพรส์
การกรอง		✅ (ขั้นสูง)
การเรียงลำดับ
การแก้ไขเซลล์
ส่งออก CSV
ลากและวาง
ธีมและสไตล์
การคัดเลือก
การเข้าถึง
การเลื่อนที่ไม่มีที่สิ้นสุด
การแบ่งหน้า
ข้อมูลฝั่งเซิร์ฟเวอร์		✅ (ขั้นสูง)
ส่วนประกอบที่กำหนดเอง
การสร้างแผนภูมิแบบรวม
การเลือกช่วง
การจัดกลุ่มแถวและการรวมกลุ่ม
การหมุน
เอ็กซ์เซลส่งออก
การดำเนินงานคลิปบอร์ด
ปริญญาโท/รายละเอียด
ข้อมูลต้นไม้
เมนูคอลัมน์
เมนูบริบท
แผงเครื่องมือ
สนับสนุน

ℹ️ หมายเหตุ:
ไปที่หน้าราคาเพื่อดูการเปรียบเทียบแบบเต็ม

ตัวอย่าง

เราได้สร้างการสาธิตหลายรายการเพื่อแสดงฟีเจอร์ที่หลากหลายของ AG Grid ในกรณีการใช้งานที่แตกต่างกัน ดูการทำงานด้านล่างหรือโต้ตอบกับพวกเขาในหน้าสาธิตของเรา

การสาธิตทางการเงิน

ตัวอย่างข้อมูลทางการเงินที่มีการอัปเดตสดและเส้นประกายไฟ:

การสาธิตสด • ซอร์สโค้ด

การสาธิตสินค้าคงคลัง

ตัวอย่างข้อมูลสินค้าคงคลังเพื่อดูและจัดการผลิตภัณฑ์:

การสาธิตสด • ซอร์สโค้ด

การสาธิตทรัพยากรบุคคล

ตัวอย่างข้อมูล HR ที่แสดงข้อมูลพนักงานแบบลำดับชั้น:

การสาธิตสด • ซอร์สโค้ด

⚡️ เริ่มต้นอย่างรวดเร็ว

AG Grid ติดตั้งง่าย - สิ่งที่คุณต้องทำคือให้ข้อมูลและกำหนดโครงสร้างคอลัมน์ของคุณ อ่านคำแนะนำในการติดตั้ง vanilla JavaScript ต่อไป หรือดูคำแนะนำเฉพาะเฟรมเวิร์กของเรา ตอบสนอง เชิงมุม และ วิว.

การติดตั้ง

 ติดตั้ง $ npm -- บันทึก ag-grid-community

ตั้งค่า

1. จัดเตรียมคอนเทนเนอร์

โหลดไลบรารี AG Grid และสร้าง div คอนเทนเนอร์ div ควรมีความสูงเนื่องจาก Data Grid จะเติมขนาดของคอนเทนเนอร์หลัก:

 <html lang="en"> <head> <!-- รวม JS & CSS ทั้งหมดสำหรับ JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- คอนเทนเนอร์ตารางข้อมูลของคุณ --> <div id="myGrid" style="height: 500px"></div> </body></html>

2. การสร้างอินสแตนซ์ตารางข้อมูล JavaScript

สร้าง Data Grid ภายใน div คอนเทนเนอร์ของคุณโดยใช้ createGrid

 // ตัวเลือกกริด: ประกอบด้วยการกำหนดค่า Data Grid ทั้งหมดconst gridOptions = {};// โค้ด Javascript ของคุณเพื่อสร้าง Data Gridconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions);

3. กำหนดแถวและคอลัมน์

 // ตัวเลือกกริด: ประกอบด้วยการกำหนดค่า Data Grid ทั้งหมด const gridOptions = { // ข้อมูลแถว: ข้อมูลที่จะแสดง    rowData: [ { ยี่ห้อ: 'Tesla' รุ่น: 'รุ่น Y' ราคา: 64950 ไฟฟ้า: true } { ยี่ห้อ: 'Ford' รุ่น: 'F-Series' ราคา: 33850 ไฟฟ้า: false }, { make: 'Toyota', รุ่น: 'Corolla', ราคา: 29600, electric: false }, ], // คำจำกัดความของคอลัมน์: กำหนดคอลัมน์ที่จะแสดง    columnDefs: [{ ฟิลด์: 'make' }, { ฟิลด์: 'model' }, { ฟิลด์: 'ราคา' }, { ฟิลด์: 'ไฟฟ้า' }],};

ℹ️ หมายเหตุ:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างตารางข้อมูลด้วย AG Grid โปรดดูเอกสารประกอบของเรา

โครงการเมล็ดพันธุ์

นอกจากนี้เรายังมีโครงการเมล็ดพันธุ์เพื่อช่วยให้คุณเริ่มต้นกับการกำหนดค่าทั่วไป:

สิ่งแวดล้อม	แพ็คเกจ	โมดูล
สร้างแอป React (CRA)	แพ็คเกจ	โมดูล
วิท	แพ็คเกจ	โมดูล
เยี่ยม - TypeScript	แพ็คเกจ	โมดูล
Webpack 5 - ไทป์สคริปต์	แพ็คเกจ	โมดูล
เวบแพ็ก 5 - จาวาสคริปต์	แพ็คเกจ	โมดูล
CLI เชิงมุม	แพ็คเกจ	โมดูล
นัท	แพ็คเกจ	โมดูล
วิท	แพ็คเกจ	โมดูล

การปรับแต่ง

AG Grid สามารถปรับแต่งได้อย่างเต็มที่ ทั้งในแง่ของรูปลักษณ์และฟังก์ชันการทำงาน มีหลายวิธีในการปรับแต่งกริด และเรามีเครื่องมือให้เลือกมากมายเพื่อช่วยสร้างการปรับแต่งเหล่านั้น

ส่วนประกอบที่กำหนดเอง

คุณสามารถสร้างส่วนประกอบแบบกำหนดเองของคุณเองเพื่อปรับแต่งลักษณะการทำงานของตารางได้ ตัวอย่างเช่น คุณสามารถปรับแต่งวิธีแสดงผลเซลล์ วิธีแก้ไขค่า และสร้างตัวกรองของคุณเองได้

มีประเภทส่วนประกอบต่างๆ หลายประเภทที่คุณสามารถระบุให้กับกริดได้ ได้แก่:

ส่วนประกอบของเซลล์: เพื่อปรับแต่งเนื้อหาของเซลล์
ส่วนประกอบส่วนหัว: เพื่อปรับแต่งส่วนหัวของคอลัมน์และกลุ่มคอลัมน์
แก้ไขส่วนประกอบ: เพื่อปรับแต่งการแก้ไขเซลล์
ส่วนประกอบตัวกรอง: สำหรับตัวกรองคอลัมน์แบบกำหนดเองที่ปรากฏภายในเมนูคอลัมน์
ตัวกรองแบบลอย: สำหรับตัวกรองแบบลอยคอลัมน์แบบกำหนดเองที่ปรากฏภายในเมนูคอลัมน์
องค์ประกอบวันที่: เพื่อปรับแต่งองค์ประกอบการเลือกวันที่ในตัวกรองวันที่
กำลังโหลดส่วนประกอบ: เพื่อปรับแต่งแถวโหลดเซลล์เมื่อใช้โมเดลแถวฝั่งเซิร์ฟเวอร์
องค์ประกอบการซ้อนทับ: เพื่อปรับแต่งการโหลดและไม่มีส่วนประกอบการซ้อนทับแถว
ส่วนประกอบแถบสถานะ: สำหรับส่วนประกอบแถบสถานะแบบกำหนดเอง
ส่วนประกอบแผงเครื่องมือ: สำหรับส่วนประกอบแผงเครื่องมือแบบกำหนดเอง
ส่วนประกอบคำแนะนำเครื่องมือ: สำหรับส่วนประกอบคำแนะนำเครื่องมือของเซลล์แบบกำหนดเอง
ส่วนประกอบรายการเมนู: เพื่อปรับแต่งรายการเมนูที่แสดงในเมนูคอลัมน์และบริบท

หากต้องการจัดหาตัวเรนเดอร์เซลล์แบบกำหนดเองและส่วนประกอบตัวกรองให้กับ Grid ให้สร้างการอ้างอิงโดยตรงไปยังส่วนประกอบของคุณภายในคุณสมบัติ gridOptions.columnDefs :

 gridOptions = { columnDefs: [ { field: 'country', // คอลัมน์สำหรับเพิ่มส่วนประกอบใน cellRenderer: CountryCellRenderer, // ตัวกรององค์ประกอบเซลล์ที่คุณกำหนดเอง: CountryFilter, // ส่วนประกอบตัวกรองที่คุณกำหนดเอง }, ],};

ธีมส์

AG Grid มี 4 ธีม แต่ละธีมมีให้เลือกใช้ในโหมด light และ dark :

ควอตซ์	วัสดุ

อัลไพน์	บาลัม

ธีมที่กำหนดเอง

ธีม AG Grid ทั้งหมดสามารถปรับแต่งได้โดยใช้ Theming API หรือคุณสามารถสร้างธีมใหม่ตั้งแต่ต้นด้วยความช่วยเหลือของ Theme Builder หรือ Figma Design System ของเรา

ชุมชน

เครื่องมือและส่วนขยาย

AG Grid มีชุมชนขนาดใหญ่และกระตือรือร้นซึ่งได้สร้างระบบนิเวศของเครื่องมือ ส่วนขยาย และยูทิลิตี้ของบุคคลที่สาม เพื่อช่วยคุณสร้างโครงการต่อไปด้วย AG Grid ไม่ว่าคุณจะใช้ภาษาหรือกรอบงานใดก็ตาม:

โต้ตอบ • เชิงมุม • ประเภทสคริปต์ • วิว • หลาม • เรียบหรู • SolidJS • .สุทธิ • สนิม • ลาราเวล

ตู้โชว์

AG Grid มีนักพัฒนากว่า 100,000 รายทั่วโลกใช้งานจากเกือบทุกอุตสาหกรรม แม้ว่าโปรเจ็กต์เหล่านี้ส่วนใหญ่เป็นโปรเจ็กต์ส่วนตัว เราได้คัดสรรโปรเจ็กต์โอเพ่นซอร์สจากอุตสาหกรรมต่างๆ ที่ชื่อครัวเรือนใช้ AG Grid รวมถึง JPMorgan , MongoDB และ NASA เยี่ยมชมหน้าผลงานชุมชนของเราเพื่อเรียนรู้เพิ่มเติม

นักดูดาว

AG Grid ก่อตั้งขึ้นในปี 2559 และได้รับความนิยมเพิ่มขึ้นอย่างต่อเนื่อง และปัจจุบันเป็นผู้นำตลาดด้าน Data Grids:

สนับสนุน

การสนับสนุนองค์กร

ลูกค้า AG Grid Enterprise สามารถเข้าถึงการสนับสนุนเฉพาะผ่าน ZenDesk ซึ่งได้รับการตรวจสอบโดยทีมวิศวกรของเรา

รายงานข้อผิดพลาด

หากคุณพบจุดบกพร่อง โปรดรายงานในส่วนปัญหาของพื้นที่เก็บข้อมูลนี้

คำถาม

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

มีส่วนร่วม

AG Grid ได้รับการพัฒนาโดยทีมนักพัฒนาที่ตั้งอยู่ในลอนดอน หากคุณต้องการเข้าร่วมทีมส่งใบสมัครของคุณไปที่ [email protected]

ใบอนุญาต

ag-grid-community ได้รับอนุญาตภายใต้ใบอนุญาต MIT

ag-grid-enterprise มีใบอนุญาต เชิงพาณิชย์

ดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม

แผนภูมิเอจี

หากคุณมาไกลถึงขนาดนี้ คุณอาจสนใจโปรเจ็กต์ล่าสุดของเรา: AG Charts - ไลบรารีการสร้างแผนภูมิ JavaScript ที่ดีที่สุดในโลก

สร้างขึ้นครั้งแรกเพื่อขับเคลื่อนแผนภูมิรวมใน AG Grid เราได้เปิดซอร์สโปรเจ็กต์นี้ในปี 2018 หลังจากที่ได้รับความนิยมเพิ่มขึ้นอย่างต่อเนื่องตั้งแต่นั้นมา เราจึงตัดสินใจลงทุนใน AG Charts ด้วยเวอร์ชันองค์กรโดยเฉพาะ ( ag-charts-enterprise ) ใน นอกเหนือจากการสนับสนุน ag-charts-community อย่างต่อเนื่อง