• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ng-x-table: x-table 是一款可配置化的 Angular 数据表格组件。并不依赖于其他UI组件 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

ng-x-table

开源软件地址:

https://gitee.com/xujz520/ng-x-table

开源软件介绍:

ng-x-table

概述

x-table 是一款可配置化的 Angular 数据表格组件。并不依赖于其他UI组件库。

文档与示例

https://xujz520.gitee.io/ng-easy-mock/x-table/

浏览器环境

EdgeChromeFirefoxSafari 13.1+

安装

npm i @ng-dms/x-table --save

如何使用

导入模块

在根模块 AppModule 导入 BrowserAnimationsModule HttpClientModule.

import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { HttpClientModule } from '@angular/common/http';import { SharedModule } from './shared/shared.module';@NgModule({  declarations: [AppComponent],  imports: [    BrowserModule,    BrowserAnimationsModule,    HttpClientModule,        SharedModule,  ],  bootstrap: [AppComponent]})export class AppModule { }

在业务级模块 或 sharedModule 导入 @ng-dms/x-table

import { XTableModule } from '@ng-dms/x-table';@NgModule({  declarations: [],  imports: [    SharedModule  ]})export class SharedModule { }

组件代码

在 StackBlitz 上打开

import { Component, OnInit } from '@angular/core';import { XTableColumns } from '@ng-dms/x-table';@Component({  selector: 'x-table-base',  template: `    <x-table [columns]="columns" [xData]="rows"></x-table>  `,  styles: []})export class XTableBaseComponent implements OnInit {  columns: XTableColumns = [    { title: '学号', field: 'no' },    { title: '姓名', field: 'name' },    { title: '性别', field: 'sex' },    { title: '年龄', field: 'age' },    { title: '学院', field: 'college' },    { title: '专业', field: 'major' },    { title: '班级', field: 'class' },  ];  rows = [    { "id": 1, "no": 7107320614, "name": "黎勇", "sex": 0, "age": 28, "college": "外语外贸学院", "major": "国际邮轮乘务管理", "class": 1 },    { "id": 2, "no": 7107320615, "name": "黎秀兰", "sex": 1, "age": 26, "college": "外语外贸学院", "major": "国际贸易实务", "class": 1 },    { "id": 3, "no": 7107320616, "name": "董霞", "sex": 0, "age": 26, "college": "外语外贸学院", "major": "国际贸易实务", "class": 2 },    { "id": 4, "no": 7107320617, "name": "梁磊", "sex": 0, "age": 21, "college": "土木工程学院", "major": "建筑工程技术", "class": 1 },    { "id": 5, "no": 7107320618, "name": "潘娟", "sex": 0, "age": 24, "college": "外语外贸学院", "major": "国际邮轮乘务管理", "class": 1 }  ];  constructor() { }  ngOnInit() { }}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap