過濾和排序反應

我是新的發展反應我有一個項目，我必須在我的桌子上添加過濾器和排序功能，我真的不知道從哪裏開始。以下模板：如何繼續？過濾和排序反應

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 { 
 
\t results: any[]; 
 
} 
 

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

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

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

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

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

 
\t \t \t \t <table className={`ms-Table ${styles.templateTable}`}> 
 
\t \t \t \t \t <thead> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Type</th> 
 
\t \t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t \t <th>Modified</th> 
 
\t \t \t \t \t \t \t <th>Modified by</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </thead> 
 
\t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t this.props.results.map((result, index) => { 
 
\t \t \t \t \t \t \t \t return (<tr key={index}> 
 
\t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <a href={result.Path}>{result.Filename !== null ? result.Filename.substring(0, result.Filename.lastIndexOf('.')) : ""}</a> 
 
\t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t <td>{this.getDateFromString(result.ModifiedOWSDATE)}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t <td>{this.getAuthorDisplayName(result.EditorOWSUSER)}</td> 
 
\t \t \t \t \t \t \t \t \t \t </tr>); 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}

謝謝你們

來源

2017-03-20 Faxelf

您可以過濾和排序在渲染（）返回之前。

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

來源

2017-03-20 19:57:49 brickingup

下面是如何實現可以過濾和排序的表的一些工作代碼。在這裏，只要點擊行標題就會進行排序。 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"} 
];

而且反應類：

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}); 
    } 
});

你必須讓自己的排序算法，以用於字符串和日期工作。使用此代碼，當您單擊表格標題時，將正確排序的唯一列是Name列。

來源

2017-03-20 21:23:08

過濾和排序反應

回答

相關問題