JHipster应用中为表格列添加搜索字段的可行性咨询

完全可以在你现有的JHipster Angular表格中添加列内搜索字段，实现类似你想要的列级过滤效果。下面我结合你的现有代码，分步骤给出具体实现：

第一步：在组件类（.ts文件）中添加过滤逻辑 #

首先，我们需要在组件里定义过滤关键词变量，并实现过滤后的实体列表计算属性：

// 导入必要的模块（如果还没导入的话）
import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据保持不变
})
export class YourEntityComponent implements OnInit {
  // 原有的变量保留：entities, predicate, reverse等
  entities?: YourEntity[];
  predicate = 'id';
  reverse = true;

  // 添加列过滤关键词变量
  filterId: string = '';
  filterName: string = '';

  // 计算属性：根据过滤条件返回筛选后的实体列表
  get filteredEntities() {
    if (!this.entities) return [];

    return this.entities.filter(entity => {
      // ID列过滤：匹配ID的字符串形式
      const matchesId = this.filterId === '' || entity.id.toString().includes(this.filterId.trim());
      // Name列过滤：忽略大小写匹配
      const matchesName = this.filterName === '' || entity.name.toLowerCase().includes(this.filterName.trim().toLowerCase());

      return matchesId && matchesName;
    });
  }

  // 原有的transition方法（如果是后端分页，需要修改它传递过滤参数）
  transition() {
    // 如果需要后端过滤，在这里把filterId、filterName作为参数加入请求
    // 比如：this.router.navigate([], { queryParams: { page: this.page, size: this.itemsPerPage, sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc'), id: this.filterId, name: this.filterName } });
    // 后端接口需要对应处理这些参数进行数据库层面的过滤
  }

  // 其他原有方法（如loadAll、trackId等）保持不变
}

第二步：修改HTML模板，添加列内搜索输入框 #

在你的表头每个中嵌入搜索输入框，绑定对应的过滤变量：

<div class="table-responsive" *ngIf="entities">
  <table class="table table-striped">
    <thead>
      <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
        <!-- ID列：添加搜索输入框 -->
        <th jhiSortBy="id">
          <span jhiTranslate="global.field.id">ID</span>
          <span class="fa fa-sort"></span>
          <input 
            type="text" 
            [(ngModel)]="filterId" 
            placeholder="Search ID" 
            class="form-control form-control-sm mt-1"
          >
        </th>
        <!-- Name列：添加搜索输入框 -->
        <th jhiSortBy="nombre">
          <span jhiTranslate="app.entity.name">Name</span>
          <span class="fa fa-sort"></span>
          <input 
            type="text" 
            [(ngModel)]="filterName" 
            placeholder="Search Name" 
            class="form-control form-control-sm mt-1"
          >
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 把循环数据源改成过滤后的filteredEntities -->
      <tr *ngFor="let entity of filteredEntities ;trackBy: trackId">
        <td><a [routerLink]="['../entity', entity.id ]">{{entity.id}}</a></td>
        <td>{{entity.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

两种过滤模式的说明 #

• 前端过滤：上面的示例是前端过滤，适合数据量不大的场景，直接在已加载的entities数组上筛选，无需后端改动。
• 后端过滤：如果你的数据量很大，建议把过滤参数传递到后端，在数据库层面进行筛选（修改transition方法把过滤参数加入查询参数，同时后端的REST接口需要处理这些参数，在JPA查询中添加对应的WHERE条件）。

这样修改后，你的表格就会拥有列内搜索功能，和你想要的效果一致啦！

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