首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何对表头上的表格(单击)进行排序?

如何对表头上的表格(单击)进行排序?
EN

Stack Overflow用户
提问于 2019-03-01 01:38:36
回答 3查看 2.1K关注 0票数 0

我必须使用哪种逻辑来对元素进行排序?

在这里,我生成所有的列和行。

dynamic-table.component.html

代码语言:javascript
运行
复制
  <table>
    <tr>
      <th *ngFor="let col of columns" (click)="onClickSort()">{{col}}</th>
    </tr>
    <tr *ngFor="let user of users">
      <td *ngFor="let col of columns">{{user[col]}}</td>
    </tr>
  </table>

dynamic-table.component.ts

代码语言:javascript
运行
复制
import {Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];
  constructor() {
  }
  onClickSort() {
    //ADD LOGIC SORT
  }
  ngOnInit() {
  }
}

我的数据在mock.ts中,我可以在我的服务中找到它们。

app.component.ts

代码语言:javascript
运行
复制
import {Component, OnInit } from '@angular/core';
import {TableService} from './table.service';
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  users;
  columns;
  constructor(private atService: TableService) {
  }
  ngOnInit(): void {
    this.columns = this.atService.getColumns();
    this.atService.getUsers().subscribe((res) => this.users = res);
  }
}
EN

Stack Overflow用户

发布于 2019-03-01 01:55:48

有一个很好的库可以做到这一点

https://www.kryogenix.org/code/browser/sorttable/

它非常容易使用。

只需在html文件中加载脚本并修改头文件,将sortable (带有一个t)添加为一个类,如下所示:

代码语言:javascript
运行
复制
<script src="sorttable.js"></script>
 <table>
    <tr>
      <th *ngFor="let col of columns">{{col}}</th>
    </tr>
    <tr *ngFor="let user of users">
      <td *ngFor="let col of columns">{{user[col]}}</td>
    </tr>
  </table>
票数 0
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54931303

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档