排序?qū)崿F(xiàn):
首先有一個(gè)排序選擇框(按某個(gè)屬性進(jìn)行排序),排序的觸發(fā)方法:
Sort = value => {
console.log(value);
var sortObj = this.state.defaultData.sort(this.compare(value));
this.setState({ tabledata: sortObj });
};
compare = property => {
return function(objF, objS) {
var valueF = objF[property];
var valueS = objS[property];
return valueS - valueF; // 升序
};
};
this.state.defaultData // 需要排序的全部數(shù)據(jù)
this.state.tabledata// 排序后展示的數(shù)據(jù)
搜索實(shí)現(xiàn):
首先有一個(gè)搜索框,輸入點(diǎn)擊觸發(fā)搜索:
IPSearch = value => {
console.log(value);
if (value.length > 0) {
var arr = [];
this.state.defaultData.map(item => {
if (item.Ip.split(value).length > 1) {
arr.push(item);
}
});
this.setState({ tabledata: arr });
} else {
this.setState({ tabledata: this.state.defaultData });
}
};
this.state.defaultData // 需要搜索的全部數(shù)據(jù)
this.state.tabledata// 搜索后展示的數(shù)據(jù)
//無輸入時(shí)顯示全部數(shù)據(jù)
根據(jù)數(shù)據(jù)類型篩選出需要顯示的數(shù)據(jù):
首先我們需要拿出數(shù)據(jù)的數(shù)據(jù)類型:
selectData = () => {
const env = [];
const idc = [];
this.state.tabledata.map(item => {
env.push(item.Env);
idc.push(item.Idc);
});
var envset = Array.from(new Set(env));
var idcset = Array.from(new Set(idc));
this.setState({ idcList: idcset, envList: envset });
};
//利用Set方法去重
篩選:
Idc = value => {
var arr = [];
this.state.defaultData.map(item => {
if (item.Idc === value) {
arr.push(item);
}
});
this.setState({ tabledata: arr });
};
Env = value => {
var arr = [];
this.state.defaultData.map(item => {
if (item.Env === value) {
arr.push(item);
}
});
this.setState({ tabledata: arr });
};