多平台统一管理软件接口，如何实现多平台统一管理软件接口
229
2023-05-23
Angular2自定义分页组件
Angular2自定义分页组件
在项目中，前端传给后台的参数有：
pageSize：每页的条数
pageNo：当前页码
比如当前是第1页，每页20条，则后台返回第1页的20条记录（sql应该是用limit去获取分页数据）
同时，后台接口还会返回列表的总条数totalNum，前端根据totaNum/http://pageSize计算总共有多少页
如图：
注意事项：
需要先配置好路由（Angular2路由与导航）
使用步骤：
（1）在项目中引入分页组件
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { Demo } from './demo/demo';
import { Page } from './page/page';
@NgModule({
declarations: [
AppComponent,
Demo,
Page
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'demo',
component: Demo
}
]),
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
（2）在页面中使用分页组件：
// demo.html
// demo.ts
import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'demo',
templateUrl: './demo.html'
})
export class Demo {
public params; // 保存页面url参数
public totalNum = 0; // 总数据条数
public pageSize = 20;// 每页数据条数
public totalPage = 0;// 总页数
public curPage = 1;// 当前页码
constructor(location:Location) {
let vm = this;
if (vm.params) {
vm.params = vm.params.replace('?', '').split('&');
let theRequest = [];
for (let i = 0; i < vm.params.length; i++) {
theRequest[vm.params[i].split("=")[0]] = vm.params[i].split("=")[0] == 'pageNo' ? parseInt(vm.params[i].split("=")[1]) : vm.params[i].split("=")[1];
}
vm.params = theRequest;
if (vm.params['pageNo']) {
vm.curPage = vm.params['pageNo'];
//console.log('当前页面', vm.curPage);
}
} else {
vm.params = {};
}
}
getPageData(pageNo) {
let vm = this;
vm.curPage = pageNo;
console.log('触发', pageNo);
}
}
分页组件源码：
page.html
总计 {{pageParams.totalNum}} 条，第 {{pageParams.curPage}} / {{pageParams.totalPage}} 页
(click)="changePage(pageParams.curPage-5)" [queryParams]="{pageNo:pageParams.curPage-5}"><<
[queryParams]="{pageNo:pageParams.curPage-1}" [disabled]="pageParams.curPage==1">上一页
(click)="changePage(page.pageNo)" [queryParams]="page" *ngFor="let page of getPageList(pageParams)">
{{page.pageNo}}
[queryParams]="{pageNo:pageParams.curPage-(-1)}" [disabled]="pageParams.curPage==pageParams.totalPage">下一页
(click)="changePage(pageParams.curPage-(-5))" [queryParams]="{pageNo:pageParams.curPage-(-5)}">>>
空空如也
page.ts
import { Component,Input, Output,EventEmitter } from '@angular/core';
@Component({
selector: 'page',
templateUrl: './page.html'
})
export class Page {
@Input('pageParams') pageParams;// 父组件向子组件传值
@Output() changeCurPage:EventEmitter
public pageList = [1, 2, 3, 4, 5];
public totalPage = 5;
constructor() {
let vm = this;
//console.log('从父组件获取的参数', vm['pageParams']);
}
getPageList(pageParams) {
/*分页设置*/
let pageList=[];
if (pageParams.totalPage <= 5) {//如果总的页码数小于5（前五页），那么直接放进数组里显示
for (let i = 0; i < pageParams.totalPage; i++) {
pageList.push({
pageNo: i + 1
});
}
} else if (pageParams.totalPage - pageParams.curPage < 5 && pageParams.curPage > 4) {//如果总的页码数减去当前页码数小于5（到达最后5页），那么直接计算出来显示
pageList = [
{
pageNo: pageParams.curPage - 4
}, {
pageNo: pageParams.curPage - 3
}, {
pageNo: pageParams.curPage - 2
}, {
pageNo: pageParams.curPage - 1
}, {
pageNo: pageParams.curPage
}
];
} else {//在中间的页码数
let cur = Math.floor((pageParams.curPage - 1) / 5) * 5 + 1;
pageList = [
{
pageNo: cur
}, {
pageNo: cur + 1
}, {
pageNo: cur + 2
}, {
pageNo: cur + 3
}, {
pageNo: cur + 4
},
];
}
return pageList;
}
changePage(pageNo) {
let vm = this;
//console.log('修改页码', pageNo);
vm.pageParams.curPage = pageNo;
vm.changeCurPage.emit(vm.pageParams.curPage);
}
}
ng2还在入门中，组件有待完善，请多多指教
项目demo：https://github.com/youzouzou/ng2-paginator
源码下载：http://xiazai.jb51.net/201704/yuanma/ng2-paginator-master_jb51.rar
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~