过滤和排序 React

Question

我是 React 开发新手我有一个项目，我必须在我的 table 上添加筛选和排序功能，但我真的不知道从哪里开始。下面的模板：如何进行？

import * as React from 'react';
import { SPComponentLoader } from '@microsoft/sp-loader';

import styles from '../components/SearchSpfx.module.scss';
import { ISearchSpfxWebPartProps } from '../ISearchSpfxWebPartProps';

import * as moment from 'moment';

export interface ITableTemplate extends ISearchSpfxWebPartProps {
 results: any[];
}

export default class TableTemplate extends React.Component<ITableTemplate, {}> {
 private iconUrl: string = "https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-08-15_20160815.002/odsp-media/images/filetypes/16/";
 private unknown: string[] = ['aspx', 'null'];

 private getAuthorDisplayName(author: string): string {
  if (author !== null) {
   const splits: string[] = author.split('|');
   return splits[1].trim();
  } else {
   return "";
  }
 }

 private getDateFromString(retrievedDate: string): string {
  if (retrievedDate !== null) {
   return moment(retrievedDate).format('DD/MM/YYYY');
  } else {
   return "";
  }
 }

 public render(): JSX.Element {
  // Load the Office UI Fabrics components css file via the module loader
     SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');

  return (
   <div className={styles.searchSpfx}>
    {
     (() => {
      // Check if you need to show a title
      if (this.props.title !== "") {
       return <h1 className='ms-font-xxl'>{this.props.title}</h1>;
      }
     })()
    }

    <table className={`ms-Table ${styles.templateTable}`}>
     <thead>
      <tr>
       <th>Type</th>
       <th>Name</th>
       <th>Modified</th>
       <th>Modified by</th>
      </tr>
     </thead>
     <tbody>
      {
       this.props.results.map((result, index) => {
        return (<tr key={index}>
           <td>
            <a href={result.Path}><img src={`${this.iconUrl}${result.Fileextension !== null && this.unknown.indexOf(result.Fileextension) === -1 ? result.Fileextension : 'code'}.png`} alt="File extension"/></a>
           </td>
           <td>
            <a href={result.Path}>{result.Filename !== null ? result.Filename.substring(0, result.Filename.lastIndexOf('.')) : ""}</a>
           </td>
           <td>{this.getDateFromString(result.ModifiedOWSDATE)}</td>
           <td>{this.getAuthorDisplayName(result.EditorOWSUSER)}</td>
          </tr>);
       })
      }
     </tbody>
    </table>
   </div>
  );
 }
}

谢谢大家

Answer 1

您可以在 return 之前的 render() 中过滤和排序。

this.props.results.filter(item => item.keep).sort((item1, item2) => item1.value - item2.value);

Answer 2

这里有一些工作代码，说明如何实现可以过滤和排序的 table。在这里，只要您单击 header 行，就会进行排序。 this.props.data 对于这个例子是：

[
    {"Type":"foo", "Name": 0, "Modified": "3/20/2017", "ModifiedBy":"Me"},
    {"Type":"foo", "Name": 2, "Modified": "3/15/2017", "ModifiedBy":"You"},
    {"Type":"buzz", "Name": 1, "Modified": "3/20/2017", "ModifiedBy":"Me"}
];

反应 class 是：

const SortableFilterableTable = React.createClass({
    getInitialState: function(){
        return({data:this.getSortedData('Type')});
    },
    render: function(){

        let rows = this.state.data.map((rowData) =>{
            return(
                <tr>
                    <td>{rowData.Type}</td>
                    <td>{rowData.Name}</td>
                    <td>{rowData.Modified}</td>
                    <td>{rowData.ModifiedBy}</td>
                </tr>
            );
        });
        return(
            <div>
                <input type="text" id="filter" onChange={this.filterTable}/>
                <table>
                    <thead>
                        <tr>
                            <th onClick={()=>this.setSortedData('Type')}>Type</th>
                            <th onClick={()=>this.setSortedData('Name')}>Name</th>
                            <th onClick={()=>this.setSortedData('Modified')}>Modified</th>
                            <th onClick={()=>this.setSortedData('Modified By')}>Modified By</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        );
    },
    setSortedData: function(sortBy){
        this.setState({data:this.getSortedData(sortBy)});
    },
    getSortedData: function(sortBy){
        //data handed down from props
        let dataToSort = this.props.data;

        //you can implement your own sorting algorithm here. I think this one
        //will only work if the properties are integers.
        dataToSort.sort(function(a,b){
            if(sortBy === 'Type')
                return a.Type - b.Type;
            if(sortBy === 'Name')
                return a.Name - b.Name;
            if(sortBy === 'Modified')
                return a.Modified - b.Modified;
            if(sortBy === 'Modified By')
                return a.ModifiedBy - b.ModifiedBy;
        });
        return dataToSort;
    },
    filterTable: function(e){
        let text = e.target.value;
        let filterFunc = (value) => {
            console.log(value)
            if(value.Type.indexOf(text) >= 0 || value.Name.toString().indexOf(text) >= 0 || value.Modified.indexOf(text) >= 0 || value.ModifiedBy.indexOf(text) >= 0)
                return true;
            console.log('made it ')
            return false;
        };

        let dataForState = this.props.data.filter(filterFunc);
        this.setState({data:dataForState});
    }
});

您必须制定自己的排序算法来处理字符串和日期。使用此代码，当您单击 table header 时唯一能够正确排序的列是 Name 列。

过滤和排序 React

Filtering and sorting React

javascript

reactjs

react-jsx