Javascript 过滤和分类

我是新来的开发人员，我有一个项目，我必须在我的表中添加筛选和排序功能，我真的不知道从哪里开始。模板如下： 如何进行？

import*as React from'React'；
从'@microsoft/sp loader'导入{SPComponentLoader}；
从“../components/SearchSpfx.module.scss”导入样式；
从“../ISearchSpfxWebPartProps”导入{ISearchSpfxWebPartProps}；
从“时刻”导入*作为时刻；
导出接口ITableTemplate扩展ISearchSpfxWebPartProps{
结果：任何[]；
}
导出默认类TableTemplate扩展React.Component{
私有iconUrl:字符串=”https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-08-15_20160815.002/odsp-media/images/filetypes/16/";
私有未知：字符串[]=['aspx'，'null']；
私有getAuthorDisplayName（作者：字符串）：字符串{
如果（作者！==null）{
常量拆分：string[]=author.split（“|”）；
返回拆分[1]。修剪（）；
}否则{
返回“”；
}
}
私有getDateFromString（retrievedDate:string）：string{
如果（retrievedDate！==null）{
返回时刻（retrievedDate）。格式（'DD/MM/YYYY'）；
}否则{
返回“”；
}
}
public render（）：JSX.Element{
//通过模块加载器加载Office UI结构组件css文件
SPComponentLoader.loadCss（'https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');
返回(
{
(() => {
//检查是否需要显示标题
如果（this.props.title！==“”）{
返回{this.props.title}；
}
})()
}
类型
名称
被改进的
修改
{
this.props.results.map（（结果，索引）=>{
返回(
{this.getDateFromString（result.ModifiedOWSDATE）}
{this.getAuthorDisplayName（result.editorowUser）}
);
})
}
);
}
}

您可以在返回之前在render（）中进行筛选和排序

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

---

下面是一些工作代码，说明了如何实现一个可以过滤和排序的表。在这里，只要单击行标题，就会进行排序

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"}
];

react类是：

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

const SortableFilterableTable=React.createClass({
getInitialState:函数（）{
返回（{data:this.getSortedData（'Type'）}）；
},
render:function（）{
让rows=this.state.data.map（（rowData）=>{
返回(
{rowData.Type}
{rowData.Name}
{rowData.Modified}
{rowData.ModifiedBy}
);
});
返回(
此.setSortedData（'Type'）}>Type
这个.setSortedData（'Name'）}>Name
this.setSortedData（'Modified'）}>Modified
this.setSortedData（'Modified By'）}>Modified By
{rows}
);
},
setSortedData:函数（排序比）{
this.setState（{data:this.getSortedData（sortBy）}）；
},
getSortedData:函数（sortBy）{
//道具传递的数据
让dataToSort=this.props.data；
//你可以在这里实现你自己的排序算法。我认为这是一个
//仅当属性为整数时才有效。
dataToSort.sort（函数（a，b）{
如果（排序方式=='Type'）
返回a.类型-b.类型；
如果（排序方式=='Name'）
返回a.名称-b.名称；
如果（sortBy==='Modified'）
返回a.修改-b.修改；
if（sortBy==='修改人'）
返回a.ModifiedBy-b.ModifiedBy；
});
返回dataToSort；
},
filterTable:函数（e）{
设text=e.target.value；
让filterFunc=（值）=>{
console.log（值）
if（value.Type.indexOf（text）>=0 | | value.Name.toString（）.indexOf（text）>=0 | | value.Modified.indexOf（text）>=0 | | value.ModifiedBy.indexOf（text）>=0）
返回true；
console.log（'make it'）
返回false；
};
让dataForState=this.props.data.filter（filterFunc）；
this.setState（{data:dataForState}）；
}
});

您必须制定自己的排序算法来处理字符串和日期。使用此代码，单击表格标题时唯一正确排序的列是

Name

列