前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular DataGrid组件开发

Angular DataGrid组件开发

原创
作者头像
4cos90
修改2021-04-06 11:29:56
1.2K0
修改2021-04-06 11:29:56
举报
文章被收录于专栏:随想

完成的效果:

列表数据展示
列表数据展示

组件的目录结构:

目录结构
目录结构

DataGrid组件的结构非常简单,仅需要一个组件即可完成。

DataGrid组件:

先放下代码:

代码语言:javascript
复制
<div class="Base" (click)="ContactListBlur()">
    <div class="Title">
        <div *ngFor="let Column of columnList;" class="TitleBase">
            <span class="TitleText" [title]="Column.Name">{{ Column.Name }}</span>
        </div>
    </div>
    <div class="Grid">
        <div *ngIf="dataList.length == 0" class="NoResultbase">
            <span class="NoResultText">无结果</span>
        </div>
        <div *ngFor="let Card of dataList;" class="Cardbase">
            <div *ngFor="let Column of columnList" class="List">
                <div class="SpanList">
                    <span class="CardText" [title]="Card[Column.Code]">{{ Card[Column.Code] }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="Control">
        <div class="PageControl">
            <div class="PageControlLeft" (click)="ControlLeftClick()" title="上一页">
            </div>
            <div class="PageControlMid">
                <div class="PageControlMidArea">
                    <input type="text" autoComplete="off" [(ngModel)]="PageIndex" oninput="value = value.replace(/[^(\d)]/g, '')" pattern="/[^\d]/g" maxlength="3" class="CallBoardText" (keyup.enter)="JumpPageIndex()">
                    <span class="PageControlMidText">{{"/"+ PageCount}}</span>
                </div>
            </div>
            <div class="PageControlRight" (click)="ControlRightClick()" title="下一页">
            </div>
        </div>
    </div>
</div>
代码语言:javascript
复制
import { Component, Input, OnInit } from '@angular/core';


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

    @Input() data: any;

    PageSize: number = 10;
    PageIndex: number = 0;
    PageCount: number = 0;

    dataList: any[] = [];
    alldataList: any[] = [];
    columnList: any[] = [];


    constructor(

    ) { }

    ngOnInit() {
        this.columnList = this.data.Column;
        this.alldataList = this.data.data;
        this.PageSize = this.data.PageSize || 10;
        this.PageCount = Math.ceil(this.alldataList.length / this.PageSize);
        if (this.PageCount > 0) {
            this.PageIndex = 1;
        }
        else {
            this.PageIndex = 0;
        }
        this.getList();
    }


    ControlLeftClick() {
        if (this.PageIndex <= 1) return;
        else {
            this.PageIndex--;
            this.getList();
        }
    }

    ControlRightClick() {
        if (this.PageIndex >= this.PageCount) return;
        else {
            this.PageIndex++;
            this.getList();
        }
    }

    JumpPageIndex() {
        if (this.PageIndex <= 1) {
            this.PageIndex = 1;
        }
        if (this.PageIndex >= this.PageCount) {
            this.PageIndex = this.PageCount;
        }
        this.getList();
    }

    ContactListBlur() {
        this.JumpPageIndex();
    }

    getList() {
        this.dataList = this.alldataList.slice((this.PageIndex - 1) * this.PageSize, this.PageIndex * this.PageSize);
    }

}
代码语言:javascript
复制
.Base {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url('./Resource/bg.png');
    background-color: #11213E;
}

.Title {
    height: 46px;
    width: 100%;
    margin-bottom: 12px;
    background: rgba(32, 63, 107, 1);
    display: flex;
}

.Grid {
    height: calc(100% - 160px);
    width: 100%;
    overflow-y: scroll;
}

.Control {
    height: 40px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin-top: 30px;
}

.PageControl {
    height: 36px;
    width: 390px;
    margin-left: auto;
    margin-right: auto;
}

.PageControlLeft {
    float: left;
    width: 65px;
    height: 100%;
    cursor: pointer;
    border: 2px solid rgba(109, 153, 191, 0.40);
    background: url('./Resource/page-left.png') no-repeat center center;
}

.PageControlLeft:hover {
    background-image: url('./Resource/page-left-hover.png');
}

.PageControlRight {
    float: left;
    width: 65px;
    height: 100%;
    margin-left: 10px;
    cursor: pointer;
    border: 2px solid rgba(109, 153, 191, 0.40);
    background: url('./Resource/page-right.png') no-repeat center center;
}

.PageControlRight:hover {
    background-image: url('./Resource/page-right-hover.png');
}

.PageControlMid {
    float: left;
    width: 150px;
    height: 100%;
    margin-left: 10px;
    overflow: hidden;
    border: 2px solid rgba(109, 153, 191, 0.40);
}

.PageControlMidArea {
    text-align: center;
    margin-left: -25px;
}

.PageControlMidText {
    font-size: 22px;
    color: rgba(34, 128, 191, 1);
    font-family: PingFang SC Regular;
    user-select: none;
}

.CallBoardText {
    width: 40px;
    height: 30px;
    outline-style: none;
    background: transparent;
    border: 0px;
    font-size: 22px;
    font-family: PingFang SC Regular;
    text-align: right;
    color: rgba(34, 128, 191, 1);
}

.NoResultbase {
    width: 100%;
    height: 100%;
    line-height: 100%;
    overflow: hidden;
    text-align: center;
}

.NoResultText {
    font-family: PingFang SC Regular;
    font-size: 24px;
    user-select: none;
    position: absolute;
    top: 60%;
    transform: translateY(-60%);
    color: rgba(180, 208, 232, 0.6);
}

.Cardbase {
    width: 100%;
    height: 64px;
    cursor: pointer;
    display: flex;
    content-visibility: auto;
}

.Cardbase:nth-child(2n) {
    background: rgba(53, 94, 139, 0.2);
}

.Cardbase:nth-child(2n+1) {
    background: rgba(53, 94, 139, 0.4);
}

.Cardbase:hover {
    background: linear-gradient(to right, rgba(57, 152, 213, 1) 40%, rgba(62, 129, 212, 1) 80%);
}

.List {
    float: left;
    height: 100%;
    flex: 1;
    text-align: center;
}

.SpanList {
    float: left;
    width: 100%;
    height: 100%;
    line-height: 64px;
}

.CardText {
    color: rgba(180, 208, 232, 1);
    font-size: 22px;
    font-family: PingFang SC Regular;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    user-select: text;
}

.TitleBase {
    height: 100%;
    line-height: 46px;
    text-align: center;
    flex: 1;
}

.TitleText {
    font-size: 22px;
    font-family: PingFang SC Regular;
    user-select: none;
    color: rgba(98, 196, 255, 1);
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    cursor: pointer;
}

::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 3px;
    background-color: rgba(99, 182, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99, 182, 255, 0.2);
}

dataGrid的组件的基本功能可以说非常简单,用户输入的对象中需要包含三个参数:

Column:列的显示文字(Name),列对应的字段名(Code),

data:列表数据

PageSize:每页显示的数据条数(缺省为10)

考虑到需要客户端分页,用alldataList缓存整个列表数据。用dataList表示展示页的数据。columnList保存列相关的数据。

getList()方法用于处理翻页时展示页的数据刷新。

注意CSS中Cardbase - content-visibility:auto 当单页PageSize较大时,可优化渲染效率。

在其他页面中使用DataGrid组件:

代码语言:javascript
复制
    <div style="width: 1000px;height: 800px;">
        <app-dataGrid [data]="data"></app-dataGrid>
    </div>
代码语言:javascript
复制

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

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

    data = {
        Column: [
            { Name: '姓名', Code: 'Name' },
            { Name: '班级', Code: 'Class' },
            { Name: '学号', Code: 'Code' },
            { Name: '身高', Code: 'Height' }
        ],
        data: [
            { Name: '学生1', Class: '高二一班', Code: 'C2101', Height: '171' },
            { Name: '学生2', Class: '高二一班', Code: 'C2102', Height: '172' },
            { Name: '学生3', Class: '高二一班', Code: 'C2103', Height: '173' },
            { Name: '学生4', Class: '高二一班', Code: 'C2104', Height: '174' },
            { Name: '学生5', Class: '高二一班', Code: 'C2105', Height: '175' },
            { Name: '学生6', Class: '高二一班', Code: 'C2106', Height: '176' },
            { Name: '学生7', Class: '高二一班', Code: 'C2107', Height: '177' },
            { Name: '学生8', Class: '高二一班', Code: 'C2108', Height: '178' },
            { Name: '学生9', Class: '高二一班', Code: 'C2109', Height: '179' },
            { Name: '学生10', Class: '高二一班', Code: 'C21010', Height: '180' },
            { Name: '学生11', Class: '高二一班', Code: 'C21011', Height: '181' },
            { Name: '学生12', Class: '高二一班', Code: 'C21012', Height: '182' },
            { Name: '学生13', Class: '高二一班', Code: 'C21013', Height: '183' },
        ],
        PageSize: 10,
    }

    ngOnInit() {

    }
}

模拟了一个班级的学生数据。

在appmodule中引入组件
在appmodule中引入组件

这样一个简单的DataGrid组件就完成了。

当然后续还可以增加内置的搜索功能,PageSize选择功能。

现在是使用客户端分页,同样可以增加服务端分页的功能。

实现起来也比较简单这里就不写实现代码了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档