في العديد من الصفحات في المشروع ، يتم استخدام ترقيم الصفحات ، ويحتوي كل صفحة على العديد من رموز ترقيم الترقيم المكررة. لذلك كتبت تعليمات ترقيم الصفحات بسيطة لتبسيط رمز الصفحة ويكون من السهل الحفاظ عليها. كتبت في المدونة كنسخة احتياطية لسهولة الوصول في المستقبل.
فيما يلي الخطوات لتحديد التوجيه وتطبيقه:
1. تعريف التوجيه
حدد ملف JS ، page-directive.js ، والذي يتم استخدامه لكتابة رمز تعليمات الترحيل. يحتوي هذا الملف على قالب الترحيل. فيما يلي جميع الرموز في ملف JS:
"استخدام صارم" ؛ (function () {angular.module ('template/pageinit/pageinit.html' ، []). Run (['$ templatecache' ، function ($ templatecache) {$ templatecache.put ('template/pageinit.html' ، ng-class = "{upabled: pagedata.currentPage == 1}">/n '+' <a href = "javaScript: void (0) ؛" "<a href =" javaScript: void (0) ؛ " page == pagedata.totalPage} ">/n '+' <a ng-if =" page! =/'.../' "href =" javaScript: void (0) ؛ }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javaScript: void (0) ؛ ng-class = "{upabled: pagedata.currentPage == PageSa.TotalPage}">/n '+' <a href = "javaScript: void (0) ؛ placeholder = "" ng-model = "inpage">/n '+' <input type = "button" value = "jump" ng click = "on_loadpage (inpage)"> </viv>/n '+' </li>/n '+' <li> <li> {{pagedata.count}} </span> </a> </li>/n '+' </ul>/n '+') ؛ "Ae" ، Templateurl: Telement ، Tattrs) {return tattrs.templateurl || if (scope.prev) {scope.prev () ؛ } ؛}} ؛ }) ؛2. السيطرة على نمط ترقيم الصفحات
يوصى بكتابته في ملف .CSS منفصل. أولاً ، قم بإنشاء ملف pagesyncss جديد. ما يلي هو النمط المحدد.
.pagination-main {display: inline block ؛ حشو اليسار: 0 ؛ الهامش: 0 0 ؛ الحدود الحدودية: 4px ؛ align-align: middle ؛}. pagination-main li.prev-page> a {border: 0 ؛}. pagination-main li.next-page> a {border: 0 ؛ اليسار الحدودي: 1px ؛ Margin-Left: 0 ؛}. pagination-main li.first-page> a {border-top-left-radius: 0 ؛ Border-Bottom-Left-Radius: 0 ؛}. pagination-main li.last-page> a {border-top-right-radius: 0 ؛ Border-Bottom-Radius: 0 ؛}. pagination-main li div {width: 80px ؛ الحدود: 1px solid #dddddd ؛ خلفية اللون: #ffffff ؛ تعويم: اليسار ؛ الحشو: 0 ؛}. Center ؛}. pagination-main li.skip-page input [type = 'button'] {padding: 0 4px 1px 10px ؛ الحدود: 0 ؛ left-left: 1px solid #ddddd ؛ colorder-color: #ffffff} .pagination-main li.data-num> a {porder: 0 ؛ Margin-Left: 0 ؛}. pagination-main> li {display: inline ؛}. pagination-main> li: first-child> a ، .pagination-main> li: first-child> span { /*margin-left: 0 ؛ الحدود إلى اليسار اليساري: 4 بكسل ؛ Border-Bottom-Left-Radius: .active> a ، .pagination-main> .Active> span ، .pagination-main> .Active> a: hover ، .pagination-main> .active> span: hover ، .pagination-main> .active> a: focus ، .pagination-main> .Active> a: .pagination-main>. اللون: #fff ؛ المؤشر: الافتراضي ؛ خلفية اللون: #428BCA ؛ اللون الحدودي: #428bca ؛}. pagination-main> li> a ، .pagination-main> li> span {position: resired ؛ تعويم: اليسار. /*ترقيم: 6px 12px ؛*/ padding: 1px 8px ؛ الهامش اليساري: -1px ؛ Line-Height: 1.42857143 ؛ اللون: #428BCA ؛ تدمير النص: لا شيء ؛ خلفية اللون: #fff ؛ الحدود: 1PX Solid #DDD ؛}. pagination-main> .disabled> span: hover ، .pagination-main> .disabled> span: hover ، .pagination-main> .disabled> span: focus ، .pagination-main> .disabled> المؤشر: لا يسمح للسماع ؛ خلفية اللون: #fff ؛ لون الحدود: #DDD ؛}3. طريقة استعلام ترقيم الصفحات
لقد قمت بتخصيص طريقة استعلام ترقيم الصفحات في المصنع ، والتي تتم مشاركتها ومريحة لصيانة الكود. التفاعل مع الخلفية في Angular غير متزامن بشكل افتراضي. كتبت كاستعلام متزامن هنا. أولاً ، حدد ملف JS pagesync.service.js. ما يلي هو المحتوى الكامل للمصنع:
"استخدام صارم" ؛ angular.module ('app'). المصنع ('pagesync' ، ['$ http' ، '$ q' ، page function ($ http ، $ q) {var rowCollectionPage = [] var totalPage = 1 ؛ var pages = [] {rowcollectionpage: [] ، totalpage: 1 ، page: currentpage؟ PATERS = TotalPage ؛ json.pages = pages ؛ Patadata == 0 ، يمكن أن يكون ذلك أيضًا في حالة من الحدوث. {var temp = [] "... '، TotalPage] ؛ } temp ؛ temp.push (iReving [i]) ؛ مؤجل = $ Q.Defer () ؛ '&' pagesize ؛ PageSize ، page) {var efferred = $ q.defer () ؛4. استخدام الأوامر
1). رمز في الصفحة:
في الكود الخاص بي ، تتم كتابة الصفحة في tfoot في الجدول. تعد كل من DRIVE () و NEXT () و PODPAGE (الصفحة) جميعها طرقًا محددة في وحدة التحكم المقابلة للصفحة.
<tably> <thead> <tr> <th> الرقم التسلسلي </th> <th> اسم العمود 1 </th> <th> اسم العمود 2 </th> <th> العملية </th> </tr> </head> <tbody> <tr ng-if = "! notabledata" ng-repeat = "row in pagedata.rowcollectionpage"> $ index+1+(pagedata.currentPage-1)*pagesize: ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2}} </td> Center ؛ "> <a href = '#'> modify </a> </td> </tr> <tr ng-if =" notupplata "ng-repeat =" data in pagedata.rowCollectionPage "> <td ng-if =" $ index == "colspan =" 4 "lead = text-align: </td> <td ng-if = "$ index! = 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-align: center ؛" colspan = "6"> <viv> <page-init page-data = "pagedata" prev = "prev ()" next = "next ()" load-page = "loadpage (page)"> </2). الرمز في وحدة التحكم
أولاً ، تحتاج إلى الرجوع إلى المصنع و PageSync في وحدة التحكم ، على النحو التالي:
Angular.Module ('app'). controller ('myctrl' ، function (pagesync) {}) ؛
قبل استعلام ترقيم الصفحات ، تحتاج إلى القيام ببعض التحضير:
// تقوم Pagedata بتعيين مجموعة بيانات الصفحة ، وعدد الصفحات ، ومجموعة أرقام الصفحة ، وإجمالي عدد البيانات. Loadtime هي معلمة مخصصة لتسجيل حالة الوقت (قبل الوصول إلى البيانات وبعد إرجاع البيانات)
$ scope.pagedata = {rowCollectionPage: [] ، TotalPage: 1 ، currentpage: 1 ، pages: [] ، count: 0 ، loadtime: 'قبل'} ؛
// يستخدم هذا لحساب ارتفاع الجدول ، وفقًا للوضع الفعلي.
$ scope.tabheight = $ scope.height-48-37-10-42-5 ؛
// احسب عدد صفوف البيانات الموجودة بالفعل على الصفحة
$ scope.pagesize = parseint (($ scope.tabheight-15-34-34-39)/34) ؛
ثم اكتب الطريقة التالية في وحدة التحكم
// pagination query $ scope.load = function (row) {$ scope.SurgeOnPagedata.RowCollectionPage = common.setpagerow ([] ، $ scope.pagesize) ؛ $ scope.nosurgeondata = false ؛ $ scope.surgeonpagedata.loadtime = 'قبل' ؛ pagesync.load (url ، $ scope.pagedata.currentpage ، $ scope.pagesize) .Then (function (data) {$ scope.pagedata = data ؛ if (($ scope.pagedata.loadtime == 'بعد' && $ scope.pagedata.count == 0) $ scope.notabledata = true ؛ $ scope.pagedata = البيانات ؛ }} ؛ // السابقة الصفحة $ scope.prev = function () {if ($ scope.pagedata.currentPage> 1) {pagesync.prev (url ، $ scope.pagedata.currentpage ، $ scope.pagesize) .then (function (data) {$ scope.pagedata = data ؛}) ؛ }} ؛ // انقر فوق رقم الصفحة إلى القفز $ scope.loadpage = function (page) {$ scope.inpage = undefined ؛ var intpage if (typeof page == 'string') {if (page! = "") {intPage = parseint (page ، 10) ؛ } آخر {intPage = 0 ؛ }} آخر {intPage = page ؛ } if ($ scope.pagedata.totalPage <= 1) {} آخر إذا (intPage == undefined || intpage == null) {Alert ('يرجى ملء رقم صفحة القفز!') ؛ } آخر إذا (intPage <= 0 || intpage> $ scope.pagedata.totalPage) {Alert ('يجب أن يكون رقم صفحة القفز أكبر من 0 ، أقل من العدد الإجمالي للصفحات+$ scope.pagedata.totalpage) ؛ } آخر إذا ($ scope.pagedata.currentPage! = page) {pagesync.loadPage (url ، $ scope.pagedata.currentPage ، $ scope.pagesize ، page) .Then (function (data) {$ scope.pagedata = data ؛}) ؛ }} ؛5. النتائج
تأثير التنفيذ النهائي هو على النحو التالي:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.