Question

这可能是使用aurelia-table的一种非常具体的方法，但我想知道是否有任何方法可以访问您在aut-sort函数的custom.bind参数中定义的密钥。

不是使用静态数组为data填充JSON数组中的表来填充表，而是根据JSON中的内容动态创建表，以便我可以“＃”。 t通过指向数组列表值来使用aut-sort。

如果我只能根据我点击排序的列访问键值，那么我就可以根据自己的需要利用自定义排序。

我已经尝试使用Aurelia表标题上的change.delegate定义全局字符串并将更新附加到该字符串，但change.delegate在之后触发 {{ 1}} sort，custom.bind函数的范围仅限于Aurelia Table。

custom.bind

<table aurelia-table="data.bind: data; display-data.bind: $resultsData; current-page.bind: currentPage; page-size.bind: pageSize; total-items.bind: totalItems; api.bind: tableApi;"> <thead> <tr> <th repeat.for="[k,v] of responseFields" aut-sort="custom.bind: someSort">${v.displayName}</th> </tr> </thead> <tbody> <tr repeat.for="result of $resultsData"> <td repeat.for="[k,v] of responseFields"> ${result[k]} </td> </tr> </tbody> </table>只允许我动态设置标题。

这是排序功能：

Map

我希望能够定义一个someSort(a, b, sortOrder) { let sortColumnName = this.sortColumnName; let code1 = this.data[this.data.indexOf(a)][sortColumnName]; let code2 = this.data[this.data.indexOf(b)][sortColumnName]; if (code1 === code2) { return 0; } if (code1 > code2) { return 1 * sortOrder; } return -1 * sortOrder; }但我目前不能，除非我硬编码，但我需要它是动态的。

Answer 1

有一种自定义订单的方法：

import {HttpClient} from "aurelia-fetch-client";

export class Example {
    users = [];

    bind(){
        let client = new HttpClient();

        return client.fetch('data.json')
            .then(response => response.json())
            .then(users => this.users = users);
    }

    nameLength(row) {
        return row.name.length;
    }

    dateSort(a, b, sortOrder) {
        let date1 = new Date(a.registered);
        let date2 = new Date(b.registered);

        if (date1 === date2) {
            return 0;
        }

        if (date1 > date2) {
            return 1 * sortOrder;
        }

        return -1 * sortOrder;
    }
}

 .a ut-sort:before{
    font-family: FontAwesome;
    padding-right: 0.5em;
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}

.aut-sortable:before{
    content: "\f0dc";
}

.aut-asc:before{
    content: "\f160";
}

.aut-desc:before{
    content: "\f161";
}

<template>
    <table class="table table-striped" aurelia-table="data.bind: users; display-data.bind: $displayData">
        <thead>
        <tr>
            <th aut-sort="key.bind: nameLength">Name</th>
            <th aut-sort="key: age; default: desc">Age</th>
            <th>E-mail</th>
            <th aut-sort="custom.bind: dateSort">Registered</th>
            <th aut-sort="key: isActive">Active</th>
        </tr>
        </thead>
        <tbody>
        <tr repeat.for="user of $displayData">
            <td>${user.name}</td>
            <td>${user.age}</td>
            <td><a href="mailto:${user.email}">${user.email}</a></td>
            <td>${user.registered}</td>
            <td>${user.isActive}</td>
        </tr>
        </tbody>
    </table>
</template>

Answer 2

我可以通过使用click.capture来调用标头的索引（click.delegate无效，因为它是在头文件custom.bind之后触发的）来实现的

<tr class="table-header">
<th repeat.for="item of tableData.columns" click.capture="sort($index)" aut-sort="custom.bind: sortList">
   ${item}
   <div class="arrow"></div>
</th>

sort（）仅设置一个私有变量

private sortIndex = 0;
public sort(index) {
this.sortIndex = index;
}

我的自定义排序如下所示，并使用sortIndex

 public sortList = (a, b, order) => {

//here I use the index of the header to get the right data from the row
const firstCell = a.cells[this.sortIndex].text;
const secondCell = b.cells[this.sortIndex].text;
  if (order === 1) {
    if (firstCell < secondCell) {
    return -1;
    }
    if (firstCell > secondCell) {
    return 1;
    }
  }
  if (order === -1) {
    if (firstCell < secondCell) {
      return 1;
    }
    if (firstCell > secondCell) {
      return -1;
    }
  }
  return 0;
}

有没有办法在Aurelia表的自定义排序函数中指定列名？

2 个答案: