Ionic 3网格排序与项间分隔线设置方法咨询

嘿，我来帮你搞定Ionic 3里的网格排序和条目分隔线需求！结合你给的代码示例，我整理了一套完整的实现方案，分两部分来讲：

一、实现网格排序功能 #

Ionic 3基于Angular，我们可以在组件内部处理排序逻辑（不推荐用管道排序，因为Angular的变化检测会频繁触发管道，影响性能）。这里我给你写了一套可复用的排序逻辑：

1. 组件类代码（.ts文件） #

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

@Component({
  selector: 'page-your-page',
  templateUrl: 'your-page.html',
})
export class YourPage {
  // 假设这是你的数据源
  data: any[] = [
    { id: 3, date: '2024-05-20', amount: 150 },
    { id: 1, date: '2024-05-18', amount: 200 },
    { id: 2, date: '2024-05-19', amount: 100 }
  ];
  // 排序相关变量
  sortKey: string = 'id'; // 默认按ID排序
  sortDirection: 'asc' | 'desc' = 'asc'; // 默认升序

  // 获取排序后的数组（用getter避免直接修改原数组）
  get sortedData() {
    return [...this.data].sort((a, b) => {
      // 处理字符串和数字类型的排序（如果你的字段是其他类型可以自行调整）
      const valA = typeof a[this.sortKey] === 'string' ? a[this.sortKey].toLowerCase() : a[this.sortKey];
      const valB = typeof b[this.sortKey] === 'string' ? b[this.sortKey].toLowerCase() : b[this.sortKey];

      if (this.sortDirection === 'asc') {
        return valA > valB ? 1 : -1;
      } else {
        return valB > valA ? 1 : -1;
      }
    });
  }

  // 切换排序方式的方法
  sortBy(key: string) {
    if (this.sortKey === key) {
      // 同一字段点击切换排序方向
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
      // 切换到新字段，默认升序
      this.sortKey = key;
      this.sortDirection = 'asc';
    }
  }

  openInvoice(id: any) {
    // 你的打开发票逻辑
    console.log('打开发票:', id);
  }
}

2. 模板代码（.html文件） #

我给你加了可点击的表头来切换排序，如果你不需要表头也可以去掉，直接保留数据行：

<ion-grid>
  <!-- 可选：表头行，点击可切换排序 -->
  <ion-row class="grid-header">
    <ion-col col-1 (click)="sortBy('id')">
      ID {{ sortKey === 'id' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </ion-col>
    <ion-col col-2 (click)="sortBy('date')">
      日期 {{ sortKey === 'date' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </ion-col>
    <!-- 其他列根据你的需求添加 -->
  </ion-row>

  <!-- 数据行，循环排序后的数组 -->
  <ion-row no-padding *ngFor="let dado of sortedData" (click)="openInvoice(dado.id)" class="grid-row">
    <ion-col col-1 style="font-size:8px;color: #000000;">{{dado.id}}</ion-col>
    <ion-col col-2 style="font-size:8px;color: #333;">{{dado.date}}</ion-col>
    <!-- 其他列内容 -->
  </ion-row>
</ion-grid>

二、添加网格项分隔线 #

我们可以用CSS给每个数据行添加底部边框，同时去掉最后一行的边框，这样就能区分不同条目了：

组件样式代码（.scss文件） #

.page-your-page {
  .grid-header {
    font-weight: bold;
    background-color: #f5f5f5;
    padding: 8px 0;
  }

  .grid-row {
    border-bottom: 1px solid #e0e0e0; /* 浅灰色分隔线，可自定义颜色 */
    padding: 8px 0;
    &:last-child {
      border-bottom: none; /* 最后一行不要分隔线 */
    }
  }
}

如果你的项目没用SCSS，也可以直接在模板的<ion-row>里加内联样式，但更推荐用外部样式来维护：

<ion-row no-padding *ngFor="let dado of sortedData; let last = last" (click)="openInvoice(dado.id)" 
  style="border-bottom: 1px solid #e0e0e0;" 
  [style.border-bottom]="last ? 'none' : '1px solid #e0e0e0'">
  <!-- 列内容 -->
</ion-row>

这样一来，你的网格既支持点击表头切换排序，又有清晰的分隔线区分每个条目啦！

内容的提问来源于stack exchange，提问作者Lucas Zimmermann