Angular DataGrid组件开发

原创

4cos90

修改于 2021-04-06 11:29:56

1.2K0

修改于 2021-04-06 11:29:56

文章被收录于专栏：随想随想

完成的效果：

组件的目录结构：

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

DataGrid组件：

先放下代码：

<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>

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);
    }

}

.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组件：

    <div style="width: 1000px;height: 800px;">
        <app-dataGrid [data]="data"></app-dataGrid>
    </div>


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() {

    }
}

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

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

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

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

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

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

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

javascript

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

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

javascript

登录后参与评论

0 条评论

热度

Angular DataGrid组件开发

Angular DataGrid组件开发

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐