الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

شبكة بيانات جافا سكريبت | جدول جافا سكريبت

شعار AG الشبكة

؟ موقع إلكتروني • ؟ التوثيق • ️ المجتمع


شوكات جيثب



AG Grid عبارة عن شبكة بيانات JavaScript كاملة الميزات وقابلة للتخصيص بدرجة كبيرة . إنه يقدم أداءً متميزًا ، ولا يحتوي على تبعيات لجهة خارجية ، ويأتي مع دعم لـ رد فعل الشعار رد فعل , الشعار الزاوي الزاوي و شعار فيو فيو .


عرض عالي الأداء


ملخص

جدول المحتويات

  • شبكة بيانات جافا سكريبت | جدول جافا سكريبت

    • دعم المؤسسات

    • تقارير الأخطاء

    • أسئلة

    • المساهمة

    • الأدوات والإضافات

    • عرض

    • مراقبو النجوم

    • مكونات مخصصة

    • المواضيع

    • السمات المخصصة

    • تثبيت

    • يثبت

    • مشاريع البذور

    • سمات

    • أمثلة

    • ؟ ملخص

    • ⚡️ بداية سريعة

    • ️ التخصيصات

    • ؟ مجتمع

    • ؟ يدعم

    • ⚠️

      رخصة

تتوفر AG Grid في نسختين: Community وEnterprise.

  • ag-grid-community مجاني، ومتاح بموجب ترخيص MIT، ويأتي مزودًا بجميع الميزات الأساسية المتوقعة من JavaScript Data Grid، بما في ذلك الفرز والتصفية وترقيم الصفحات والتحرير والمكونات المخصصة والسمات والمزيد.

  • يتوفر ag-grid-enterprise بموجب ترخيص تجاري ويأتي مزودًا بميزات متقدمة، مثل التخطيط المتكامل وتجميع الصفوف والتجميع والمحور والرئيسي/التفاصيل ونموذج الصف من جانب الخادم والتصدير، بالإضافة إلى الدعم المخصص من فريقنا الهندسي.

سمات

ميزة مجتمع AG الشبكة اي جي جريد انتربرايز
تصفية ✅ ✅ (متقدم)
فرز ✅ ✅
تحرير الخلية ✅ ✅
تصدير CSV ✅ ✅
السحب والإسقاط ✅ ✅
المواضيع والتصميم ✅ ✅
اختيار ✅ ✅
إمكانية الوصول ✅ ✅
التمرير اللانهائي ✅ ✅
ترقيم الصفحات ✅ ✅
البيانات من جانب الخادم ✅ ✅ (متقدم)
مكونات مخصصة ✅ ✅
رسم بياني متكامل ❌ ✅
اختيار النطاق ❌ ✅
تجميع الصفوف وتجميعها ❌ ✅
التمحور ❌ ✅
تصدير اكسل ❌ ✅
عمليات الحافظة ❌ ✅
ماجستير/تفصيل ❌ ✅
بيانات الشجرة ❌ ✅
قائمة العمود ❌ ✅
قائمة السياق ❌ ✅
لوحات الأدوات ❌ ✅
يدعم ❌ ✅

ℹ️ ملاحظة:

قم بزيارة صفحة التسعير للحصول على مقارنة كاملة.

أمثلة

لقد قمنا بإنشاء العديد من العروض التوضيحية لعرض مجموعة ميزات AG Grid الغنية عبر حالات الاستخدام المختلفة. شاهدهم أثناء العمل أدناه، أو تفاعل معهم على صفحتنا التجريبية.

العرض المالي

مثال على البيانات المالية التي تعرض التحديثات المباشرة وخطوط المؤشرات:

تمويل

العرض المباشر • كود المصدر


عرض المخزون

مثال لبيانات المخزون لعرض المنتجات وإدارتها:

تمويل

العرض المباشر • كود المصدر


عرض الموارد البشرية

مثال لبيانات الموارد البشرية يوضح بيانات الموظف الهرمية:

تمويل

العرض المباشر • كود المصدر


⚡️ بداية سريعة

من السهل إعداد AG Grid - كل ما عليك فعله هو توفير بياناتك وتحديد بنية العمود الخاص بك. تابع القراءة للحصول على تعليمات تثبيت JavaScript، أو قم بالرجوع إلى الأدلة الخاصة بإطار العمل الخاص بنا رد فعل الشعار رد فعل , الشعار الزاوي الزاوي و شعار فيو فيو.

تثبيت

 تثبيت $ npm - حفظ مجتمع الشبكة

يثبت

1. توفير حاوية

قم بتحميل مكتبة AG Grid وقم بإنشاء حاوية div. يجب أن يكون لـ div ارتفاع لأن شبكة البيانات ستملأ حجم الحاوية الأصلية:

 <html lang="en"> <head> <!-- يشمل جميع JS وCSS لشبكة بيانات JavaScript --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- حاوية شبكة البيانات الخاصة بك --> <div id="myGrid" style="height: 500 بكسل"></div> </body></html>

2. إنشاء مثيل لشبكة بيانات جافا سكريبت

قم بإنشاء شبكة البيانات داخل div الحاوية الخاصة بك باستخدام createGrid .

 // خيارات الشبكة: تحتوي على جميع تكوينات شبكة البياناتconstgridOptions = {};// كود Javascript الخاص بك لإنشاء Data Gridconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement,gridOptions);

3. تحديد الصفوف والأعمدة

 // خيارات الشبكة: تحتوي على كافة تكوينات شبكة البياناتconstgridOptions = { // بيانات الصف: البيانات التي سيتم عرضها.    بيانات الصف: [ { الصنع: "تسلا"، الموديل: "موديل Y"، السعر: 64950، كهربائي: صحيح }، { الصنع: "فورد"، الموديل: "F-Series"، السعر: 33850، كهربائي: خطأ }، { الصنع: 'تويوتا'، الموديل: 'كورولا'، السعر: 29600، كهربائي: خطأ }، ]، // تعريفات العمود: تعريف الأعمدة ليتم عرضها.    columnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }],};

ℹ️ ملاحظة:

لمزيد من المعلومات حول بناء شبكات البيانات باستخدام AG Grid، راجع الوثائق الخاصة بنا.

مشاريع البذور

نوفر أيضًا المشاريع الأولية لمساعدتك في البدء بالتكوينات الشائعة:

بيئة نطاق الحزم وحدات
إنشاء تطبيق React (CRA) شعار رد الفعل الحزم وحدات
فيت شعار رد الفعل الحزم وحدات
فايت - تايب سكريبت شعار تايب سكريبت الحزم وحدات
Webpack 5 - تايب سكريبت شعار تايب سكريبت الحزم وحدات
حزمة الويب 5 - جافا سكريبت شعار جافا سكريبت الحزم وحدات
CLI الزاوي الشعار الزاوي الحزم وحدات
نوكست شعار Vue3 الحزم وحدات
فيت شعار Vue3 الحزم وحدات

التخصيصات

إن AG 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 سوليد جي إس • شعار .NET .شبكة • شعار الصدأ الصدأ • شعار لارافيل لارافيل

عرض

يتم استخدام AG Grid من قبل 100000 من المطورين في جميع أنحاء العالم، من كل الصناعات تقريبًا. على الرغم من أن معظم هذه المشاريع خاصة، فقد قمنا برعاية مجموعة مختارة من المشاريع مفتوحة المصدر من صناعات مختلفة حيث تستخدم الأسماء المنزلية AG Grid، بما في ذلك JPMorgan و MongoDB و NASA . تفضل بزيارة صفحة عرض المجتمع لمعرفة المزيد.

مراقبو النجوم

تأسست AG Grid في عام 2016، وقد شهدت ارتفاعًا مطردًا في شعبيتها وهي الآن الشركة الرائدة في السوق في مجال Data Grids:

مخطط تاريخ النجوم AG Grid

يدعم

دعم المؤسسات

يتمتع عملاء AG Grid Enterprise بإمكانية الوصول إلى الدعم المخصص عبر ZenDesk، والذي تتم مراقبته بواسطة فرقنا الهندسية.

تقارير الأخطاء

إذا وجدت خطأ ما، يرجى الإبلاغ عنه في قسم المشكلات في هذا المستودع.


أسئلة

ابحث عن مشكلات مماثلة في StackOverflow باستخدام علامة ag-grid . إذا لم يكن هناك أي شيء ذي صلة، قم بنشر رسالة جديدة هناك. من فضلك لا تستخدم قضايا GitHub لطرح الأسئلة.


المساهمة

تم تطوير AG Grid بواسطة فريق من المطورين المقيمين في لندن. إذا كنت ترغب في الانضمام إلى الفريق، أرسل طلبك إلى [email protected].

⚠️ رخصة

ag-grid-community مرخص بموجب ترخيص MIT .

لدى ag-grid-enterprise رخصة تجارية .

راجع ملف الترخيص لمزيد من المعلومات.

شعار الرسوم البيانية AG الرسوم البيانية AG

إذا كنت قد وصلت إلى هذا الحد، فقد تكون مهتمًا بأحدث مشروع لدينا: AG Charts - أفضل مكتبة لرسومات JavaScript في العالم.

تم تصميمه في البداية لتشغيل الرسوم البيانية المتكاملة في AG Grid، وقد فتحنا هذا المشروع في عام 2018. وبعد أن شهدنا الارتفاع المطرد في شعبيته منذ ذلك الحين، قررنا الاستثمار في AG Charts مع إصدار مخصص للمؤسسات ( ag-charts-enterprise ) في بالإضافة إلى دعمنا المستمر لمجتمع ag-charts-community .

معاينة أمثلة الرسوم البيانية لجافا سكريبت AG Charts



تابعنا لتبقى على اطلاع بأحدث الأخبار من AG Grid:

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل