تحقيق وظيفة التصفية وتقديم مثال على الكود في Angularjs

تحقيق الطباعة باستخدام Angularjs

مقدمة

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

المكون الإضافي

　　　　　 في عملية تعبئة مكون الإضافي للطبع، قمت بتنفيذ عدة طرق وكانت في الغالب مشوشة، ووجدت في النهاية مكون إضافي لصديق(http://www.miaoyueyue.com/archives/813.html) قد تم تعبئته، وكان جيدًا، قرأت شفرته مباشرة وأستخدمتها في المشروع.

النظام والمستندات

　　　　　 1- يعتمد مكون الإضافي الرئيسي على angular directive لتحقيق ذلك.

　　　　　 2- النقطة الرئيسية في الطلب هي دالة معالجة الطلب في الخادم، أي أخذ البيانات من الخادم.

　　　　　 3- هناك مسارين رئيسيين في المكون الإضافي،currentPage وitemsPerPage، أي صفحة الحالي والمسار المطلوب لكل صفحة.

　　　　　 4- بعد تنفيذ طريقة الطلب، يجب علينا إعادة تقديم الطلب إلى الخادم للحصول على بيانات الصفحة المطلوبة عند كل ضغط على زر صفحة الطباعة. في صفحة الطلب التي استخدمتها، استخدمت $watch للمراقبة. في المرة الأولى التي استخدمتها فيها، كنت أضع الدالة الطلب في onchange الخاص بالطباعة، لكن وجدت أن الخادم يتم استدعاؤه مرتين. يجب الانتباه لهذا الأمر.

　　　　　 5- لقد قمت بتغليف الطلب إلى طبقة Service، ثم استدعيتها في Controller، وهو ما يتوافق مع فكرة MVC.

صورة الشاشة

　

كود الطلب

<div ng-app="DemoApp" ng-controller="DemoController">
 <table class="table table-striped">
  <thead>
   <tr>
    <td>ID</td>
    <td>FirstName</td>
    <td>LastName</td>
    <td>Status</td>
    <td>Address</td>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="emp in persons">
    <td>{{emp.ID}}</td>
    <td>{{emp.FirstName}}</td>
    <td>{{emp.LastName}}</td>
    <td>{{emp.Status}}</td>
    <td>{{emp.Address}}</td>
   </tr>
  </tbody>
 </table>
 <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
 var app = angular.module('DemoApp', ['tm.pagination']);
 app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
  var GetAllEmployee = function () {
   var postData = {
    pageIndex: $scope.paginationConf.currentPage,
    pageSize: $scope.paginationConf.itemsPerPage
   }
   BusinessService.list(postData).success(function (response) {
    $scope.paginationConf.totalItems = response.count;
    $scope.persons = response.items;
   });
  }
  //配置分页基本参数
  $scope.paginationConf = {
   currentPage: 1,
   itemsPerPage: 5
  };
  /***************************************************************
  مراقبة الاستعلام الخلفي عند تغيير رقم الصفحة وعدد السجلات في الصفحة
  إذا تم مراقبة currentPage وitemsPerPage بشكل منفصل، فإنه سيتم إطلاق أحداث خلفية مرتين.
  ***************************************************************/
  $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
 }]);
 // فئة الأعمال
 app.factory('BusinessService', ['$http', function ($http) {
  var list = function (postData) {
   return $http.post('/Employee/GetAllEmployee', postData);
  }
  return {
   list: function (postData) {
    return list(postData);
   }
  }
 }]);
</script>

　تحميل الإضافات وDEMOS

http://yunpan.cn/cQEhnLrpnkniQ　 كلمة المرور be74

هذا هو تجميع المعلومات حول تنفيذ AngularJS للصفحات المتعددة، سيتم إضافة المزيد من المعلومات ذات الصلة لاحقاً، شكراً للجميع على دعم هذا الموقع!

بيان: محتويات هذا المقال مستمدة من الإنترنت، مملوكة للكاتب الأصلي، تم إدراج المحتوى من قبل مستخدمي الإنترنت بطرقهم الخاصة، لا تملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا اكتشفت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال #بـ @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الدليل على الدليل، وسنزيل المحتوى المزعوم عن حقوق النسخ على الفور.