ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件

Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件(1/2)

来源:网络整理     时间:2017-06-26     关键词:

本篇文章主要介绍了" Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件",主要涉及到方面的内容,对于Javascript教程感兴趣的同学可以参考一下: 17年4月,开始学习angular2,到5月跟着升级到angular4。目前还在学习,搭建中。我的最终目的是用angular4框架搭建一个后台管理系统。这里使用...

17年4月,开始学习angular2,到5月跟着升级到angular4。目前还在学习,搭建中。我的最终目的是用angular4框架搭建一个后台管理系统。这里使用了三个关键的外部库。

1、使用adminLte 皮肤。这个是bootstrap的一款皮肤。风格比较严肃。所以选这个皮肤;

2、引用了ngx-bootstrap。这个是bootstrap对应angular的库;

3、使用wijmo5 flexgrid表格,号称是angular下最好的表格组件。

本章说下如何搭建一个flexgrid通用分页器组件,angular的核心就是组件化,所以在搭建组件上,天生就有长处。一般是在父类组件上添加flexgrid的表格,所有和分页相关的信息,按钮。整合进入分页器组件内。所以我们先明确父类组件和分页器组件之间需要传递的参数。

父类组件向分页器组件传递两个参数,当前页面  pageindex 。页码总数  pagecount。在分页器子类组件内,点击跳转按钮。调用父类组件的输定绑定函数,重新绑定表格即可。分页器最终效果如下

demo 演示地址   http://114.215.44.2

github地址         https://github.com/Vetkdf/yang-test

 Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件

分页器组件ts代码,关键就是两个Input参数,一个Output监听。

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-paging',
  templateUrl: './paging.component.html',
  styleUrls: ['./paging.component.css']
})
export class PagingComponent implements OnInit {

  constructor() { }

  @Input() pageIndex: number = 1;
  @Input() pageCount: number = 1;
  @Output() change: EventEmitter<number> = new EventEmitter<number>();

  ngOnInit() {
  }

  moveToFirstPage() {
    this.change.emit(1);
  }

  moveToPreviousPage() {
    this.change.emit(this.pageIndex - 1);
  }

  moveToNextPage(){
    this.change.emit(this.pageIndex + 1);
  }

  moveToLastPage() {
    this.change.emit(this.pageCount);
  }

}

分页器组件html代码,四个按钮跳转最后,最前,上一页,下一页。按钮要把消息传递给父类组件,触发重绑定表格即可。

相关图片

相关文章