Question

我有两列产品ID（数据字段：ID），产品名称（数据字段：名称）。我在两列上都启用了排序（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字段以字符串形式输入，也许这与它们位于link标签中有关。下一步是从数字排序函数中控制台记录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旋转了一张表来帮助您找到答案，并且可以正确地进行排序（即使使用字符串长id的排序），请告诉我这是否有帮助！

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

2 个答案: