我想过滤我的办公室ui面料详细信息列表。我想对列表中的所有列进行过滤。
列表中的信息来自Office365,两者之间有自定义api。
我尝试使用文本框进行过滤,但没有成功。还是有可能像在office365中一样进行过滤?我现在使用的代码包含在下面。我用于排序的代码。这没有任何问题。
export interface Basics {
key: number;
name: string;
}
export interface MyState{
requestListItems: any[];
columns: IColumn [];
}
class Requests extends Component<any, MyState>{
private _allItems: Basics[];
constructor(props:{}) {
super(props);
const columns: IColumn[] = [{
key:'Title',
name:'Title',
fieldName:'Title',
maxWidth:150,
minWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
},
{
key:'Request_type',
name:'Request type',
fieldName:'Request_type',
minWidth:150,
maxWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
},
{
key:'Request_template',
name:'Template',
fieldName:'Request_template',
maxWidth:150,
minWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
},
{
key:'Version',
name:'Version',
fieldName:'Version',
maxWidth:150,
minWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
},
{
key:'Request_status',
name:'Request status',
fieldName:'Request_status',
maxWidth:150,
minWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
},
{
key:'Request_destination_url',
name:'Request destination url',
fieldName:'Request_destination_url',
maxWidth:150,
minWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
},
{
key:'Request_details',
name:'Request details',
fieldName:'Request_details',
maxWidth:150,
minWidth:150,
isSorted: true,
isSortedDescending:false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick
}
];
this.state = {
requestListItems:[{
Title: '',
requestType: '',
template:'',
version:'',
requestStatus:'',
destinationUrl:'',
details:''
}
],
columns:columns
};
this._allItems = [];
}
componentDidMount() {
// Custom function to retrieve the list info
this.GetRequestList();
}
GetRequestList(){
var reactHandler = this;
var request = new XMLHttpRequest();
request.open('GET', '.../api/requests/getRequests/all', true);
request.setRequestHeader("Accept","application/json");
//this callback gets called when the server responds to the ajax call
request.onreadystatechange = function(){
if (request.readyState === 4 && request.status === 200){
var result = JSON.parse(request.responseText);
console.log("Result data: " + result.Data);
console.log("Result data length: " + result.Data.length);
reactHandler.setState({
requestListItems: result.Data
});
}
else if (request.readyState === 4 && request.status !== 200){
console.log('Error in retrieving data!');
}
};
request.send();
}
public render() {
let column = this.state.columns;
let RequestItems: any[];
RequestItems =[""];
this.state.requestListItems.map((requests,key) =>{
RequestItems = [{Title: requests.title,
Request_type: requests.requestType,
Version: requests.version,
Request_template: requests.template,
Request_status: requests.requestStatus,
Request_destination_url: requests.destinationUrl,
Request_details: requests.details}]
})
return (
<div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10"><h1>REQUESTS</h1>
<p>
<TextField label="Filter by title:" onChange={this._onFilter}/>
</p>
<p>
<DetailsList items={RequestItems} columns={column}/>
</p>
</div> );
}
private _onFilter = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
this.setState({
requestListItems: newValue ? this._allItems.filter(i => i.name.toLowerCase().indexOf(newValue) > -1) : this._allItems
});
};
export default Requests;