Question

React数据网格中是否有按日排序？如果是这样，怎么称呼？在示例中，所有排序仅适用于该行：

Example 1

Example 2

在示例2中，列中包含日期，但它们按字符串排序。

Answer 1

我有一个非常好但不是很好的解决方案。真的很好，因为它完美分类但是如果你也希望过滤柱子也不是很好。

基本上，您使用自定义格式化程序显示格式化日期，并且您要传递给排序的值是每个日期从1970年1月1日开始的秒数，因此它将排序正确。

是的，我一直使用函数而不是component的格式函数和headerRenderer值，它工作正常。

我在一个内部网工作，所以我不能复制/粘贴我的代码，所以这只是手工输入，但希望你能得到这个想法。

class GridUtil {

  static basicTextCell = (props)=>{
    return (<span>{props.value? props.value : ""}</span>)
   }
}


class AGridWrapper extends React.Component {

   ///////////////
   constructor(props){
     super(props);
     this.state={...}

     this.columnHeaderData = [
       {
         key: "dateCompleted",
         name: "Date Completed",
         formatter: (data)=>GridUtil.basicTextCell({value: data.dependentValues.dateCompletedFormatted}),
         getRowMetaData: (data)=>(data),
         sortable: true
       }
     ];

    }//end constructor

    ///////////////////////////////////
    //Note that DateUtil.getDisplayableDate() is our own class to format to MM/DD/YYYY
    formatGridData = !props.inData? "Loading..." : props.inData.map(function(obj,index){
      return {
       dateCompleted: rowData.compDate? new Date(rowData.compDate).getTime() : "";
       dateCompletedFormatted: rowData.compDate? DateUtil.getDisplayableDate(rowData.compDate) : "";
     }

   });

   //////////
   rowGetter = rowNumber=>formatGridData[rowNumber];

   /////////    
   render(){

    return (
      <ReactDataGrid
       columns={this.columnHeaderData}
       rowGetter={this.rowGetter}
       rowsCount={this.formatGridData.length}
       ...
      />


}

Answer 2

我使用react-table我遇到了同样的问题，解决方法就是将日期转换为javaScript Date，并将其作为JSon格式返回，我必须格式化组件中日期的呈现方式。这是一个显示我是如何做到这一点的链接。 codesandbox sample

在React数据网格中按日期排序

2 个答案: