استيراد بيانات Excel في ng-grid باستخدام AngularJS

عند العمل على تطبيق ويب باستخدام AngularJS، يمكن أن تكون عملية استيراد البيانات من ورقة Excel وإضافتها إلى ng-grid تحدٍ يستدعي البحث عن حلا فعّالاً. يوفر AngularJS مجموعة من الأدوات والمكتبات التي يمكن استخدامها لتحقيق هذه المهمة بشكل سلس وفعّال.

أحد الحلول الممكنة لهذه المشكلة هو استخدام مكتبة مثل “SheetJS” التي تتيح لك قراءة وكتابة ملفات Excel في الجانب العميل. يمكنك استخدام هذه المكتبة بسهولة في مشروع AngularJS الخاص بك باستخدام خدمات AngularJS والتكامل مع ng-grid.

أولاً وقبل كل شيء، يجب أن تقوم بتثبيت مكتبة SheetJS في مشروعك. يمكنك القيام بذلك عبر npm أو استخدام CDN، حيث ستحتاج إلى استيراد المكتبة في ملف السكريبت الخاص بك.

ثم، قم بإنشاء خدمة AngularJS لإدارة العمليات المتعلقة بملفات Excel. يمكن أن تكون هذه الخدمة مسؤولة عن قراءة بيانات Excel وتحويلها إلى تنسيق يفهمه ng-grid.

javascriptCopy code
// خدمة AngularJS لإدارة ملفات Excel
app.service('excelService', function($q) {
    this.readExcelFile = function(file) {
        var deferred = $q.defer();
        var reader = new FileReader();

        reader.onload = function(e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, { type: 'binary' });

            // قم بتحويل البيانات إلى تنسيق يناسب ng-grid
            var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { header: 1 });

            deferred.resolve(jsonData);
        };

        reader.readAsBinaryString(file);

        return deferred.promise;
    };
});

ثم، قم بتكوين وحدة تحكم AngularJS للتفاعل مع واجهة المستخدم واستخدام الخدمة التي قمت بإنشائها:

javascriptCopy code
// وحدة تحكم AngularJS
app.controller('ExcelController', function($scope, excelService) {
    $scope.importExcel = function(file) {
        excelService.readExcelFile(file).then(function(data) {
            // قم بتحديث ng-grid بالبيانات المستوردة
            $scope.gridOptions.data = data;
        });
    };

    // تكوين إعدادات ng-grid
    $scope.gridOptions = {
        columnDefs: [], // تحديد عمود الجدول وفقًا لهيكل البيانات المستوردة
        enableGridMenu: true,
        enableSorting: true,
        enableFiltering: true
    };
});

من ثم، قم بتكوين واجهة المستخدم الخاصة بك لتتيح للمستخدم تحديد ملف Excel واستيراد البيانات:

htmlCopy code

<div ng-controller="ExcelController">
    <input type="file" ng-model="file" />
    <button ng-click="importExcel(file)">استيراد Excelbutton>
    
    <div id="grid1" ui-grid="gridOptions" class="grid">div>
div>

قم بتكامل الشيفرة أعلاه مع تكوينات النمط الخاص بك واحرص على تعديلها وفقًا لاحتياجات تطبيقك. باستخدام هذه الطريقة، يمكنك بسهولة استيراد بيانات من ملف Excel وعرضها في ng-grid في تطبيق AngularJS الخاص بك.

بالطبع، سأقدم المزيد من المعلومات لتعميق فهمك حول استيراد البيانات من ملف Excel باستخدام AngularJS وng-grid.

لتحسين أداء تطبيقك وجعل التكامل مع مكتبة SheetJS أكثر فعالية، يمكنك تحسين عمليات القراءة والتحويل. على سبيل المثال، يمكنك استخدام ميزة تشغيل المهام بشكل متزامن باستخدام وعد مع وظيفة Worker لتجنب تجميد واجهة المستخدم أثناء معالجة الملف.

javascriptCopy code
// تحسين قراءة ملف Excel باستخدام Worker
app.service('excelService', function($q) {
    this.readExcelFile = function(file) {
        var deferred = $q.defer();
        var reader = new FileReader();

        reader.onload = function(e) {
            var data = e.target.result;

            // استخدام Worker لتحسين الأداء
            var worker = new Worker('excelWorker.js');

            worker.onmessage = function(event) {
                deferred.resolve(event.data);
                worker.terminate();
            };

            worker.postMessage(data);
        };

        reader.readAsBinaryString(file);

        return deferred.promise;
    };
});

يمكنك إنشاء ملف excelWorker.js لتحويل البيانات باستخدام Worker:

javascriptCopy code
// excelWorker.js
importScripts('xlsx.full.min.js');

onmessage = function(event) {
    var data = event.data;
    var workbook = XLSX.read(data, { type: 'binary' });
    var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { header: 1 });

    postMessage(jsonData);
};

تأكد من تضمين مكتبة xlsx.full.min.js في ملف index.html الخاص بك.

لاحظ أيضاً أهمية التحقق من هيكل بيانات الجدول في ng-grid وتحديد columnDefs بشكل صحيح وفقًا للبيانات المستوردة. يمكنك أيضاً تخصيص المظهر والسلوك باستخدام خيارات إضافية مدعومة من ng-grid.

في الختام، يُشدد على ضرورة اختبار تطبيقك بشكل جيد لضمان توافق وأداء ممتازين. باستخدام هذه الإرشادات والتحسينات، يمكنك تحقيق هدف استيراد البيانات من Excel بنجاح وتحسين تجربة المستخدم في تطبيق AngularJS الخاص بك.