تجميع الصفوف، والحسابات التجميعية، والبيانات الشجرية، والتفاصيل تحت الصفوف (master/detail)، والتصدير إلى Excel، كلها من ميزات Enterprise في AG Grid: فالاستخدام في بيئة الإنتاج يتطلب ترخيصًا تجاريًا، ومن دون مفتاح تعرض الشبكة علامة مائية وتسجّل خطأً في وحدة التحكم. أما شبكة البيانات في Needless UI فتقدّم برخصة MIT التجميع مع الإجماليات، والبيانات الشجرية، وتفاصيل الصفوف، والتصدير إلى ملفات .xlsx. ويشرح هذا الدليل نقل تطبيق Angular من إحداهما إلى الأخرى: ما ينتقل كما هو، وما لا ينتقل، وكيف تتغير الشيفرة.
يستخدم الدليل أسماء AG Grid 36. ويدعم AG Grid 36 الإصدارات من Angular 20 إلى 22؛ أما Needless UI فتتطلب Angular 22.
ما الذي تحصل عليه
| الميزة | AG Grid | Needless UI |
|---|---|---|
| تجميع الصفوف، مع القيم التجميعية وصف للإجماليات | Enterprise | نعم: على عدة مستويات، مع المجموع أو المتوسط أو أصغر قيمة أو أكبر قيمة أو العدد أو دالة |
| البيانات الشجرية | Enterprise | نعم، من صفوف متداخلة |
| تفاصيل تحت الصف (master/detail) | Enterprise | نعم: أي قالب تحت الصف، حتى لو كان شبكة أخرى |
| التصدير إلى Excel | Enterprise: الأنماط، وأوراق متعددة، والصور، والصيغ | نعم: ورقة واحدة بخلايا محددة الأنواع، مع تنسيقات الأرقام وصف رؤوس مجمَّد فيه عوامل التصفية |
| قائمة العمود مع أداة لاختيار الأعمدة | Enterprise | نعم: فرز كل عمود وتصفيته وتثبيته ونقله وملاءمة عرضه مع محتواه وإخفاؤه، وإظهار الأعمدة كلها أو إخفاؤها |
| الفرز حسب عدة أعمدة، والبحث السريع، والصفحات، وتحديد الصفوف | Community | نعم |
| عوامل تصفية الأعمدة | Community: حتى شرطين يربط بينهما AND أو OR | شرط واحد لكل عمود |
| تصفية القيم (set) والتصفية المتعددة (multi) والتصفية المتقدمة | Enterprise | جزئيًا: قائمة اختيار بخيارات العمود، لا بالقيم الموجودة في البيانات |
| تغيير عرض الأعمدة ونقلها وتثبيتها وإخفاؤها، وحفظ حالتها | Community | نعم |
| التمرير الافتراضي | Community: الصفوف والأعمدة | الصفوف |
| تحرير الخلايا | Community؛ وبعض المحرِّرات مع Enterprise | نعم، حسب نوع العمود، مع التحقق من الصحة؛ دون محرِّرات مخصصة ودون تراجع |
| الجداول المحورية (pivoting)، والرسوم البيانية المدمجة | Enterprise | لا |
| الحافظة، وتحديد نطاقات الخلايا، والقائمة السياقية، وشريط الحالة، والشريط الجانبي | Enterprise | لا |
| بيانات من الخادم | نموذج الصفوف من جانب الخادم: Enterprise؛ والتحميل على دفعات: Community | صفحات من خادمك، بالفرز وعوامل التصفية والبحث التي يطبّقها؛ دون تجميع على الخادم |
| مجموعات الأعمدة، وسحب الصفوف، والصفوف المثبّتة | Community | لا |
| أطر العمل | React، وAngular من 20 إلى 22، وVue، وJavaScript الخالص | Angular 22 وReact 19 |
ما يقابل كل خيار
| AG Grid | شبكة بيانات Needless UI |
|---|---|
<ag-grid-angular>، وتسجيل الوحدات، وLicenseManager.setLicenseKey() | <nui-grid>؛ دون تسجيل ودون مفتاح |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value، وformat (خيارات Intl أو دالة)، وtype |
cellRenderer | قالب nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup في العمود، وgroupDefaultExpanded | [(groupBy)]، وهو قائمة بمعرّفات الأعمدة. وتبدأ المجموعات مفتوحة؛ ويغلقها [(collapsed)]. |
aggFunc, grandTotalRow | aggregate, totals |
treeData مع treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | قالب nuiGridDetail، و[(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection، و[(selected)]: مفاتيح الصفوف المحددة |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | يُرجع exportXlsx() كائن Blob، ويُرجع exportCsv() نصًّا |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels؛ ويتبع الاتجاه من اليمين إلى اليسار سمة dir في الصفحة |
طلبات مجمّعة حسب البلد، بالطريقتين
المهمة: طلبات مجمّعة حسب البلد، مع إجمالي لكل بلد وإجمالي عام، وتصدير إلى Excel، وبحث سريع، وتحديد متعدد. مع AG Grid 36، حيث يتطلب التجميع والإجماليات والتصدير إلى Excel إصدار Enterprise:
ومع شبكة بيانات Needless UI:
تختلف بضعة أمور. يحتفظ التحديد بالمفاتيح، أي معرّفات الصفوف، لذا يبقى صالحًا حين تصل بيانات جديدة؛ وحين تحتاج إلى الصفوف نفسها، فاعثر عليها بهذه المفاتيح. وتبدأ المجموعات مفتوحة. وتظهر تسمية المجموعة في أول عمود ظاهر، والبحث لا يقرأ إلا الأعمدة الظاهرة، لذا أبقِ العمود المجمَّع ظاهرًا إن أردت أن يطابقه البحث. كما أن exportXlsx() يُرجع الملف بدلًا من تنزيله: ورقة واحدة بالصفوف المصفّاة والمفروزة، دون صفوف المجموعات.
إن احتجت إلى ما ينقصه
إذا كان تطبيقك يعتمد على الجداول المحورية أو الرسوم البيانية أو الحافظة وتحديد النطاقات أو التجميع على الخادم أو مجموعات الأعمدة، فلا يمكن لشبكة بيانات Needless UI أن تحل محل AG Grid بعد. افتح بلاغًا (issue) بما تحتاج إليه. ولكل ما عدا ذلك، تضم صفحة شبكة البيانات كل مُدخَل ومُخرَج ومثال.