JHipster如何实现表格排序？jhiSort与jhiSortBy工作原理咨询

一、jhiSort 指令核心参数解析 #

jhiSort是绑定在表格行<tr>上的父级排序控制指令，三个核心参数作用如下：

• predicate：双向绑定的排序基准字段变量，当你选中某一列作为排序依据时，这个变量的值会被自动同步为对应列绑定的jhiSortBy属性值，比如点击ID列表头，predicate就会被赋值为id。
• ascending：双向绑定的排序方向标识，为布尔类型，true代表升序、false代表降序。每次点击同一列表头时，这个值会自动取反，实现排序方向切换。你给出的示例中该参数绑定了reverse变量，符合常规业务命名习惯：reverse=true对应降序，和ascending的语义刚好相反，绑定逻辑是正确的。
• callback回调函数：当排序规则（predicate或ascending）发生变化时会自动触发该函数，示例中的transition.bind(this)一般是数据重新查询逻辑，会把新的排序参数传给后端接口，拉取排序后的结果重新渲染表格。

二、jhiSortBy 指令逻辑说明 #

绑定值的来源 #

jhiSortBy="id"、jhiSortBy="date"、jhiSortBy="amount"中的属性值，对应你后端实体类的字段名，和排序接口要求传入的排序字段参数值完全一致即可，后端会根据这个字段值做对应字段的排序处理。

运行逻辑 #

jhiSortBy是绑定在单个表头<th>上的子指令，和父级jhiSort联动生效：

• 点击绑定了jhiSortBy的表头时，会自动把当前jhiSortBy的属性值同步给父级jhiSort的predicate变量
• 如果点击的是当前已经生效的排序列，会自动切换jhiSort的ascending参数值，随后触发jhiSort绑定的回调函数
• 指令会自动控制表头的排序图标切换：未选中的列表头默认显示fa-sort通用排序图标，当前升序排列的列显示fa-sort-asc向上箭头，降序排列的列显示fa-sort-desc向下箭头，不需要手动写样式控制逻辑。

三、完整联动流程示例 #

1. 页面初始化时，你可以给predicate设置默认值id，ascending设置默认值true，此时ID列表头显示升序图标，表格默认按ID升序展示数据
2. 点击Date表头：predicate被赋值为date，ascending默认设为true，触发transition回调，请求后端按date升序返回数据，Date列表头切换为升序图标
3. 再次点击Date表头：ascending取反变为false，触发transition回调，请求后端按date降序返回数据，Date列表头切换为降序图标

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