我正在使用Material UI和React制作一个可排序的表组件。 我想要实现的功能是
目前,我在第一个之后添加了另一个renderRows()
。它在表格中显示8行。但是数据按每个renderRows()
排序。
图片1默认页面
图片2点击事件后
代码
// properties of TableHeader component
let headerProps = {
enableSelectAll: false,
displaySelectAll: false,
adjustForCheckbox: false
};
// initial set of rows, simulating data from the database
let rows = [
{date: "12:30 12.9.2017", payment: "MasterCard", narrative: "restige
Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest
Black, 1.2 g (.04 oz)", amount: "$912.51", uniqueId: 0 },
{date: "11:30 12.9.2017", payment: "Visa", narrative: "Total Intensity
Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)",
amount: "$744.51", uniqueId: 1 },
{date: "13:30 12.9.2017", payment: "PayPal", narrative: "Eyeliner Long
Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)", amount: "$12.51",
uniqueId: 2 },
{date: "20:30 12.9.2017", payment: "MasterCard", narrative: "Long
Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)", amount: "$16.51",
uniqueId: 3 }
];
// our table hader information, key is the name of the
// property to sort by when the header is clicked
let headers = [
{name: "", key: "checkbox"},
{name: "Today", key: "date"},
{name: "Payment", key: "payment"},
{name: "Narrative", key: "narrative"},
{name: "Amount", key: "amount"}
];
// our table component that can sort columns
class SortableTable extends React.Component {
constructor(props){
super(props);
this.state = {rows,
sortBy: 'firstName',
tableOpen : false
};
}
handleClick = (event) => {
event.preventDefault();
this.setState({
tableOpen : !this.state.tableOpen
})
}
renderHeaders(){
let header= headers.map( (h) => {
return <SortableHeader
key={h.key}
name={h.name}
onClicked={()=>this.updateSortBy(h.key)}
isSortColumn={this.state.sortBy == h.key}/>
});
return <TableRow>{header}</TableRow>;
}
renderRows() {
return this.state.rows.map( (row, i) => <UserRow {...row} key=
{row.uniqueId}/> );
}
updateSortBy(sortBy){
// multiple clicks on the same column reverse the sort order
if( sortBy == this.state.sortBy ){
this.setState( {rows: [...this.state.rows.reverse()]} );
return;
}
let rows = [...this.state.rows];
rows.sort( (a,b) => {
if (a[sortBy] < b[sortBy])
return -1;
if(a[sortBy] > b[sortBy])
return 1;
return 0;
});
this.setState({rows, sortBy});
}
render() {
return (
<div>
<MuiThemeProvider>
<Table>
<TableHeader {...headerProps}>
{this.renderHeaders()}
</TableHeader>
<TableBody>
{this.renderRows()}
{!this.state.tableOpen ? this.renderRows() : "" }
</TableBody>
</Table>
</MuiThemeProvider>
<p className="openTable" onClick={this.handleClick} >LOAD MORE</p>
</div>
);
}
}
function SortableHeader(props){
let style = {
cursor: "pointer"
}
if(props.isSortColumn){
style.fontWeight = "bold";
style.color = "black";
}
return (
<TableHeaderColumn>
<div style={style} onClick={() => props.onClicked()}>{props.name}
{props.name==""? "" :<img src={arrowUpDown} alt="arrowUpDown"
className="arrowUpDown"/>}</div>
</TableHeaderColumn>
);
}
function UserRow(props){
return (
<TableRow>
<TableRowColumn><img src={Check} alt="Check" className="Check"/>
</TableRowColumn>
<TableRowColumn>{props.date}</TableRowColumn>
<TableRowColumn>{props.payment=="Visa" ? <img src={Visa} alt="Visa"
className="Visa"/> : (props.payment=="PayPal" ? <img src={Paypal}
alt="Paypal" className="Master"/> : <img src={Master} alt="Master"
className="Master"/>)}
{props.payment}</TableRowColumn>
<TableRowColumn>{props.narrative}</TableRowColumn>
<TableRowColumn>{props.amount}</TableRowColumn>
</TableRow>
);
}
答案 0 :(得分:0)
updateSortBy()
方法只对this.state.rows
中当前的内容进行排序,因此调用renderRows()
两次只会将排序后的集合依次呈现。
您可能希望LOAD MORE click事件向状态添加更多行,这样sort和render方法就会对整个数据集起作用,而不是两个数据实例。
像这样......
// properties of TableHeader component
let headerProps = {
enableSelectAll: false,
displaySelectAll: false,
adjustForCheckbox: false
};
// initial set of rows, simulating data from the database
let rows = [
{
date: "12:30 12.9.2017",
payment: "MasterCard",
narrative: "restige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)",
amount: "$912.51",
uniqueId: 0
},
{
date: "11:30 12.9.2017",
payment: "Visa",
narrative: "Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)",
amount: "$744.51",
uniqueId: 1
},
{
date: "13:30 12.9.2017",
payment: "PayPal",
narrative: "Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)",
amount: "$12.51",
uniqueId: 2
},
{
date: "20:30 12.9.2017",
payment: "MasterCard",
narrative: "Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)",
amount: "$16.51",
uniqueId: 3
}
];
// our table hader information, key is the name of the
// property to sort by when the header is clicked
let headers = [
{ name: "", key: "checkbox" },
{ name: "Today", key: "date" },
{ name: "Payment", key: "payment" },
{ name: "Narrative", key: "narrative" },
{ name: "Amount", key: "amount" }
];
// our table component that can sort columns
class SortableTable extends React.Component {
constructor(props) {
super(props);
this.state = {
rows,
sortBy: 'firstName',
tableOpen: false
};
}
handleClick = (event) => {
event.preventDefault();
// create a new array containing the old and new rows
const newRows = [...this.state.rows, ...rows];
this.setState({
tableOpen: !this.state.tableOpen,
rows: newRows // update the state with the new rows
})
}
renderHeaders() {
let header = headers.map((h) => {
return <SortableHeader
key={h.key}
name={h.name}
onClicked={() => this.updateSortBy(h.key)}
isSortColumn={this.state.sortBy == h.key} />
});
return <TableRow>{header}</TableRow>;
}
renderRows() {
return this.state.rows.map((row, i) =>
<UserRow {...row} key={row.uniqueId} />
);
}
updateSortBy(sortBy) {
// multiple clicks on the same column reverse the sort order
if (sortBy == this.state.sortBy) {
this.setState({ rows: [...this.state.rows.reverse()] });
return;
}
let rows = [...this.state.rows];
rows.sort((a, b) => {
if (a[sortBy] < b[sortBy])
return -1;
if (a[sortBy] > b[sortBy])
return 1;
return 0;
});
this.setState({ rows, sortBy });
}
render() {
return (
<div>
<MuiThemeProvider>
<Table>
<TableHeader {...headerProps}>
{this.renderHeaders()}
</TableHeader>
<TableBody>
{this.renderRows()}
{/*no need to call this.renderRows() twice*/}
{/*{!this.state.tableOpen ? this.renderRows() : ""}*/}
</TableBody>
</Table>
</MuiThemeProvider>
<p className="openTable" onClick={this.handleClick} >LOAD MORE</p>
</div>
);
}
}
function SortableHeader(props) {
let style = {
cursor: "pointer"
}
if (props.isSortColumn) {
style.fontWeight = "bold";
style.color = "black";
}
return (
<TableHeaderColumn>
<div style={style} onClick={() => props.onClicked()}>{props.name}
{props.name == "" ? "" : <img src={arrowUpDown} alt="arrowUpDown"
className="arrowUpDown" />}</div>
</TableHeaderColumn>
);
}
function UserRow(props) {
return (
<TableRow>
<TableRowColumn><img src={Check} alt="Check" className="Check" />
</TableRowColumn>
<TableRowColumn>{props.date}</TableRowColumn>
<TableRowColumn>
{
props.payment == "Visa" ?
<img src={Visa} alt="Visa" className="Visa" /> :
(
props.payment == "PayPal" ?
<img src={Paypal} alt="Paypal" className="Master" /> :
<img src={Master} alt="Master" className="Master" />
)
}
{props.payment}
</TableRowColumn>
<TableRowColumn>{props.narrative}</TableRowColumn>
<TableRowColumn>{props.amount}</TableRowColumn>
</TableRow>
);
}