我必须对网格进行排序。然后,如果我单击一行,则应获取其详细信息。
现在
我整理了桌子。然后,如果尝试单击一行(对一列进行排序之后),则该行的位置正在更改(恢复为原始位置,即变为未排序的位置)。
仅当对网格进行排序时才会发生这种情况。
这是代码:
class DashboardAddPrintLetterStep4 extends React.Component {
constructor(props) {
super(props);
this.state={
orderby: '',
order: {},
insurance: props.insurance && props.insurance,
}
this.sort = this.sort.bind(this);
}
componentWillReceiveProps(nextProps) {
if(this.state.insurance != nextProps.insurance)
{
this.setState({
insurance: nextProps.insurance && nextProps.insurance
});
}
}
sort(event){
const {order} =this.state;
let { insurance} = this.props;
order[event.target.id]=! order[event.target.id];
insurance= _.orderBy(insurance, (o)=> typeof o[event.target.id] === 'string' ? o[event.target.id].trim().toLowerCase() : o[event.target.id], order[event.target.id] ? 'asc' : 'desc');
this.setState({
orderby: event.target.id,
insurance,
order
});
}
render() {
const { selectedIns, onSelectInsurance } = this.props;
const {insurance, order} = this.state;
return (
<div >
<table >
<thead >
<tr >
<th id='Company' onClick={this.sort}>Insurance Company {order.Company?<i className="fa fa-sort-asc"/> : <i className="fa fa-sort-desc"/>}</th>
<th id='Verified' onClick={this.sort}>Verified {order.Verified?<i className="fa fa-sort-asc"/> : <i className="fa fa-sort-desc"/>}</th>
</tr>
</thead>
<tbody >
{insurance && insurance.map(insuranceItem =>
<tr key={insuranceItem.InsID} \}
onClick={ () => onSelectInsurance(insuranceItem) }
>
<td title={insuranceItem.Company ? insuranceItem.Company : insuranceItem.TempInsurance} >{insuranceItem.Company ? insuranceItem.Company : insuranceItem.TempInsurance}</td>
<td >
{insuranceItem.Verified === 1 ? 'Yes' : 'No'}
</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
}
const mapStateToProps = state => {
return {
insurance: state.patientDetailsReducer.patientDetails.PatientInsuranceModel.Insurance,
selectedIns: state.printLetterReducer.selectedIns,
};
};
const mapDispatchToProps = dispatch => {
return {
onSelectInsurance: Insurance => {
dispatch(selectInsurance(Insurance));
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(DashboardAddPrintLetterStep4);
例如:1.(排序前的数据)
诺基亚
三星
苹果
苹果
诺基亚
三星
诺基亚
三星
苹果
如何解决此问题,以使排序后的行固定在同一位置?