جدول AngularJS: فرز باستخدام orderBy وتصفية الأحرف الكبيرة

تعد الجداول أحد العناصر الشائعة المستخدمة في HTML عند العمل مع صفحات الويب.

الجداول في HTML تم تصميمها باستخدام علامة HTML

1. العلامة – هذه هي العلامة الرئيسية المستخدمة لعرض الجدول.
2. – تستخدم هذه العلامة لفصل الصفوف داخل الجدول.
3. – تستخدم هذه العلامة لعرض بيانات الجدول الفعلية.
4. - يستخدم هذا لبيانات رأس الجدول.

باستخدام علامات HTML المتوفرة أعلاه مع AngularJS، يمكننا تسهيل ملء بيانات الجدول. باختصار، يتم استخدام التوجيه ng-repeat لملء بيانات الجدول.

سنتناول في هذا الفصل كيفية تحقيق ذلك. كما سنتعرف على كيفية استخدام عوامل التصفية orderBy و uppercase، بالإضافة إلى استخدام الخاصية $index لعرض فهارس جداول AngularJS. الخطوة الأولى هي كتابة الترميز نفسه.

تعبئة وعرض البيانات في جدول

كما ناقشنا في مقدمة هذا الفصل، يظل أساس إنشاء بنية الجدول في صفحة HTML كما هو.

لا يزال يتم إنشاء بنية الجدول باستخدام علامات HTML العادية , , و . ومع ذلك، يتم ملء البيانات باستخدام التوجيه ng-repeat في AngularJS.
دعونا نلقي نظرة على مثال بسيط لكيفية تنفيذ جداول AngularJS.
في هذا المثال،

سنقوم بإنشاء جدول AngularJS يحتوي على مواضيع الدورة التدريبية بالإضافة إلى أوصافها.

الخطوة 1) سنقوم أولاً بإضافة علامة "style" إلى صفحة HTML الخاصة بنا حتى يمكن عرض الجدول كجدول صحيح.

1. تتم إضافة علامة النمط إلى صفحة HTML. هذه هي الطريقة القياسية لإضافة أي سمات تنسيق مطلوبة لعناصر HTML.
2. نحن نضيف قيمتين للنمط إلى طاولتنا.

• أحدها هو أنه يجب أن يكون هناك حد صلب لجدول AngularJS الخاص بنا و
• ثانيًا، يجب وضع مساحة إضافية لبيانات جدول AngularJS الخاص بنا.

الخطوة 2) الخطوة التالية هي كتابة الكود لإنشاء الجدول وبياناته.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code تفسير

1. نقوم أولاً بإنشاء متغير يسمى "البرنامج التعليمي" ونخصص له بعض أزواج القيمة الرئيسية في خطوة واحدة. سيتم استخدام كل زوج من القيمة الرئيسية كبيانات عند عرض الجدول. يتم بعد ذلك تعيين المتغير التعليمي لكائن النطاق بحيث يمكن الوصول إليه من وجهة نظرنا.
2. هذه هي الخطوة الأولى في إنشاء الجدول، ونحن نستخدم بطاقة شعار.
3. لكل صف من البيانات، نستخدم "توجيه ng-repeat". يمر هذا التوجيه عبر كل زوج من قيمة المفتاح في كائن نطاق البرنامج التعليمي باستخدام المتغير ptutor.
4. وأخيرا، نحن نستخدم ضع علامة جنبًا إلى جنب مع أزواج القيمة الرئيسية (ptutor.Name وptutor.Description) لعرض بيانات جدول AngularJS.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

من الناتج أعلاه،

• يمكننا أن نرى أن الجدول يتم عرضه بشكل صحيح باستخدام البيانات من مجموعة أزواج القيمة الرئيسية المحددة في وحدة التحكم.
• تم إنشاء بيانات الجدول من خلال المرور عبر كل زوج من أزواج القيمة الرئيسية باستخدام "توجيه ng-repeat".

تُعد الصفوف الخام مجرد نقطة البداية، لأن عوامل التصفية هي التي تحدد كيفية ترتيب وتنسيق تلك الصفوف.

AngularJS مرشح مدمج

من الشائع جدًا استخدام المرشحات المضمنة داخل AngularJS لتغيير طريقة عرض البيانات في الجداول. لقد رأينا بالفعل المرشحات قيد العمل في فصل سابق. دعنا نلقي نظرة سريعة على المرشحات قبل أن نواصل.

في AngularJS، تُستخدم المرشحات لتنسيق قيمة التعبير قبل عرضها للمستخدم. ومن أمثلة المرشحات مرشح "الأحرف الكبيرة" الذي يأخذ سلسلة نصية ويُنسقها، ثم يعرض جميع الأحرف فيها بأحرف كبيرة.

لذلك في المثال أدناه، إذا كانت قيمة المتغير "TutorialName" هي "AngularJS"، فإن ناتج التعبير أدناه سيكون "ANGULARJS".

{{ TutorialName | uppercase }}

في هذا القسم، سننظر في كيفية استخدام مرشحات orderBy والأحرف الكبيرة في الجداول بمزيد من التفاصيل.

مرشحات AngularJS الشائعة المستخدمة مع الجداول

يقارن الجدول أدناه عوامل التصفية الأكثر استخدامًا داخل تعبير ng-repeat.

يُعد الفرز هو الفلتر الذي يطلبه القراء أولاً، لذا يأتي فلتر orderBy بعد ذلك.

فرز الجدول باستخدام عامل تصفية OrderBy

يُستخدم هذا الفلتر لفرز الجدول بناءً على أحد أعمدة الجدول. في المثال السابق، ظهرت بيانات جدول AngularJS كما هو موضح أدناه.

دعونا نلقي نظرة على مثال، حول كيفية استخدام عامل التصفية "orderBy" وفرز بيانات جدول AngularJS باستخدام العمود الأول في الجدول.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code تفسير

1. نحن نستخدم نفس الكود الذي استخدمناه لإنشاء جدولنا، والفرق الوحيد هذه المرة هو أننا نستخدم مرشح "orderBy" مع توجيه ng-repeat. في هذه الحالة، نقول إننا نريد ترتيب الجدول حسب المفتاح "الاسم".

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

من الإخراج،

• نلاحظ أن البيانات في جدول AngularJS مُرتبة وفقًا لبيانات العمود الأول. تم تعريف المصفوفة بالترتيب التالي: Controllers، Models، Directives، لذا بدون تطبيق أي فلتر، تظهر الصفوف بهذا الترتيب. تطبيق orderBy : 'Name' يقوم بترتيب قيم الاسم أبجديًا، مما يؤدي إلى نقل التوجيهات إلى الأمام قبل النماذج وينتج عنه وحدات التحكم، والتوجيهات، والنماذج.

فرز في Reverse ومن عناوين الأعمدة

تقبل دالة التصفية orderBy وسيطًا ثانيًا. تمرير true يعكس هذا الاتجاه، ويتيح تخزين كل من المفتاح وهذه العلامة في النطاق للقارئ إعادة فرز الجدول بالنقر على عنوان، كما هو الحال في اطلب بالرقم المرجعي يصف.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

يؤدي تغيير الترتيب إلى تغيير تسلسل الصفوف. أما عامل التصفية التالي فيغير طريقة عرض عمود واحد.

عرض الجدول مع عامل تصفية الأحرف الكبيرة

يمكننا أيضًا استخدام عامل تصفية الأحرف الكبيرة لتغيير البيانات في جدول AngularJS إلى أحرف كبيرة.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code تفسير

1. نحن نستخدم نفس الكود الذي استخدمناه لإنشاء الجدول، والفرق الوحيد هذه المرة هو أننا نستخدم مرشح الأحرف الكبيرة. نستخدم هذا المرشح بالتزامن مع "ptutor.Name" بحيث يتم عرض كل النص في العمود الأول بأحرف كبيرة.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

من الإخراج،

• يمكننا أن نرى أنه باستخدام مرشح "الأحرف الكبيرة"، يتم عرض كافة البيانات في العمود الأول بأحرف كبيرة.

يُعد تنسيق العمود أمرًا مفيدًا، وغالبًا ما يرغب القراء في وجود رقم صف بجانبه.

عرض فهرس الجدول ($index)

لعرض فهرس الجدول، أضف أ مع مؤشر $.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code تفسير

1. نحن نستخدم نفس الكود الذي استخدمناه لإنشاء جدولنا، والفرق الوحيد هذه المرة هو أننا نضيف صفًا إضافيًا إلى جدولنا لعرض عمود الفهرس. في هذا العمود الإضافي، نستخدم خاصية "$index" التي توفرها AngularJS ثم نستخدم عامل +1 لزيادة الفهرس لكل صف.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

من الإخراج،

• يمكنك أن ترى أنه تم إنشاء عمود إضافي. في هذا العمود، يمكننا رؤية الفهارس التي يتم إنشاؤها لكل صف.

تتسع ثلاثة صفوف على شاشة واحدة. لكن مجموعة البيانات الواقعية لا تتسع لذلك، لذا يحتاج القراء إلى طريقة للبحث فيها.

كيفية تصفية بيانات الجداول في AngularJS والبحث فيها

يُوفر AngularJS مرشحًا يُسمى filterيُوضع هذا العنصر بعد ng-repeat، حيث يقارن كل عنصر في المصفوفة بقيمة معينة، ويحتفظ فقط بالصفوف المطابقة. اربط هذه القيمة بمربع نص باستخدام ng-model، وسيتقلص الجدول تلقائيًا أثناء كتابة القارئ، دون الحاجة إلى معالج أحداث أو كود تحكم.

أضف بحثًا مباشرًا Box

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

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code التفسير:

1. يقوم المدخل بكتابة كل ما يتم كتابته searchText على النطاق.
2. filter : searchText يحتفظ بالصفوف التي يكون اسمها أو Descriptيحتوي ion على تلك السلسلة الفرعية، مع تجاهل حالة الأحرف.
3. للبحث في عمود واحد بدلاً من ذلك، قم بتمرير كائن: filter : {Name : searchText}.
4. سلسلة المرشحات، لذلك | filter : searchText | orderBy : 'Name' يبحث أولاً ثم يرتب الناجين.

حافظ على استجابة الطاولات الكبيرة

إحدى المشكلات الشائعة التي تواجه المطورين أثناء استخدام جداول AngularJS هي مجموعات البيانات الكبيرة التي تحتوي على ألف صف أو أكثر. نانوغرام تكرار يُنشئ التوجيه نطاقًا ومراقبًا لكل صف، مما قد يؤدي إلى توقف الصفحة عن الاستجابة. بدلاً من ذلك، وزّع الصفوف على صفحات متعددة، وأضف track by لذلك يتم إعادة استخدام الصفوف الموجودة بدلاً من إعادة بنائها.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

الأسئلة الشائعة