html - 如何在没有第三方的情况下使用 Angular/Typescript 对 HTML 表进行排序?
问题描述
所以我有一个 html 表,其中的行和列是从我的用户中插入的,比如他的名字、上次登录日期等。
之前我们使用了 Prime NG 的 customSort 功能,但现在我们正在消除这些功能,所以我需要制作自己的排序功能。
我可以在不使用 AngularJS、JavaScript、Bootstrap、Angular Material 或任何 3rd 方的东西的情况下制作它吗?如果是,如何?
我花了 2 天时间在谷歌上搜索,但我没有找到任何不包括上述方法之一的解决方案。
我目前的 HTML 表格:
<table class="table" scrollHeight="calc(100vh - 170px)">
<tr>
<th class="tableHeader" *ngFor="let col of tableHeaders">
{{ col.header | translate }}
<my-icon
*ngIf="col.field !== 'access_level'"
[icon]="Icon.sort"
></my-icon>
</th>
</tr>
<tr *ngFor="let item of items">
<td>
<span class="normalColoumn"> {{ item.firstname }}</span>
</td>
<td>
<span class="normalColoumn"> {{ item.lastname }}</span>
</td>
<td>
<span class="normalColoumn"> {{ item.email }}</span>
</td>
<td>
<span class="normalColoumn" *ngFor="let roleId of item.roleIds">
{{ getUserRole(roleId).name }}</span
>
</td>
<td>
<span class="left">
{{
item.lastLoginDate
? (item.lastLoginDate | fromnow)
: ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
}}
</span>
<span class="only-show-on-hover">
<my-icon [icon]="Icon.edit"></my-icon>
<my-icon [icon]="Icon.password"></my-icon>
<my-icon [icon]="Icon.delete"></my-icon>
</span>
</td>
</tr>
</table>
我知道我应该创建一个函数并在带有 Angular 的 onClick 的标题上使用它,但我不知道如何做更多。我应该在每个列上使用不同的排序功能吗?或者我应该怎么写?
先感谢您!
解决方案
一个非常简单的实现将涉及:
使每个列标题可点击
<th class="tableHeader" *ngFor="let col of tableHeaders" (click)="sort(col.propertyName)">
items
然后按控制器中的该属性对列表进行排序
sort(colName) {
this.items.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0)
}
推荐阅读
- antlr - 使用嵌入的多行控制字符序列解析字符串
- laravel - 从 Route Web.php 的 /profile/{username} 关键字中删除 /profile/ 不起作用
- git - 在主分支上签出文件后 Git 分支编辑丢失
- java - 识别一个字符串,该字符串测试 Base64 编码中的所有 64 个字形
- docker - Jenkins 声明式管道泊坞窗:找不到命令
- javascript - JS 输入文本到 url + base64 编码
- java - 通过 JPA TransactionTemplate 执行长期运行查询时连接关闭
- java - 使用 WireMock 访问异步响应
- keras - 约束 Keras 回归输出
- flutter - 未来结束时移动到新屏幕的最佳方式