你如何对反应引导列进行数字排序

Question

我有几列产品 ID (dataField: id)、产品名称 (dataField: name)。我在两列上都启用了排序 (sort:true)。产品 ID 包含指向产品详细信息页面的链接。当用户单击产品名称标题时，它会正确排序值。但是，当用户单击产品 ID 标题时，它会错误地对其进行排序 - 示例值为 7001、20001、7211、7459。看起来它的排序方式像字符串而不是数字。

我尝试对产品 ID 列使用 sortFunc 和 sortValue。我的代码如下。但是，a.id 和 b.id 都显示为“欠精细”。下面也是我的列定义。

我对反应和引导还很陌生，所以请帮助我理解为什么这些值是未定义的。

感谢您的帮助。

function numericSort(a, b, order) {
        console.log("order " + order);
        console.log("a.id " + a.id);
        console.log("b.id " + b.id);

        if (order === 'desc') {
            console.log(" Number(b.id) - Number(a.id) " + Number(b.id) - Number(a.id));

            return Number(b.id) - Number(a.id);
        } else {
            console.log(" Number(a.id) - Number(b.id) " + Number(a.id) - Number(b.id));

            return Number(a.id) - Number(b.id);
        }
    }


const [columns, setColumns] = React.useState([
        {       
            dataField: 'id',
            text: 'Product ID',
            sort: true,
            filter: textFilter({placeholder:' '}),          
            headerStyle: {fontSize: '12px', display:'underline', whiteSpace:'nowrap'},
            formatter: linkFormatter,
            sortFunc: numericSort, 
            sortValue: numericSort
          },
          {
            dataField: 'prodName',
            text: 'Product Name',
            sort: true,
            headerStyle: {fontSize: '12px',     textalign: 'center', margin:'1000px', whiteSpace:'nowrap'},
            filter: textFilter({placeholder:' '})
          }
    ]);

Answer 1

这就是我最终要做的事情。我打算将 sortFunc 设置为一个函数，但在列定义上定义它也同样有效。

sortFunc: (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}, 
sortValue:  (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}

Answer 2

不知道为什么 id 字段以字符串形式出现，也许这与它们在链接标签中有关。您的下一步将是控制台记录数字排序函数中的 a 和 b 变量，并查看它们是否未定义。如果它们不是未定义的，请尝试 console.logging Object.keys(a) ，它将列出变量的可用属性，希望包括 id 属性。

您还将在其他两个控制台日志中出现错误，即 if else 语句中的错误。您需要将数学语句括在括号中，因为您的 + 只是将结果添加到字符串中，而不是在数学上添加字符串和数字。 console.log(" Number(b.id) - Number(a.id) " + (Number(b.id) - Number(a.id)));

我不知道您是如何设置此代码的，但我建议使用 react-create-app，因为它将创建一个快速反应应用程序，并允许您查看反应应用程序和组件的基本语法。我从 react-bootstrap-table 中创建了一个表格来帮助你给出这个答案，并且可以正确地进行排序（即使是长字符串），如果这有帮助，请告诉我！