在cloum 上增加order属性,进行排序
This commit is contained in:
parent
bc7bdb8993
commit
222a935ceb
|
@ -109,6 +109,7 @@ class Demo extends Component {
|
|||
|render|cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string("descend"、"ascend") | -|
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -22,16 +22,24 @@ const columns13 = [
|
|||
width: 200
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
title: "功力指数",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
order:"ascend",
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
order:"descend",
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
|
@ -48,9 +56,9 @@ const columns13 = [
|
|||
];
|
||||
|
||||
const data13 = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
{ a: "杨过", b: 675, c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: 43, c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: 153, c: 25, d: "大侠", key: "3" }
|
||||
];
|
||||
const data13_1 = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
|
|
|
@ -67,7 +67,7 @@ import 'bee-table/build/Table.css';
|
|||
|fixed| 当表水平滚动时,此列将被固定:true或'left'或'right'| true/'left'/'right'|-|
|
||||
|render|cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置,可以设置单元格行/列合并|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|
||||
| order | 设置排序 | string("descend"、"ascend") | -|
|
||||
|
||||
{% include "mixin.md"%}
|
||||
|
||||
|
|
|
@ -10,21 +10,25 @@ export default function sort(Table, Icon) {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: this.props.data
|
||||
data: this.props.data,
|
||||
columns:props.columns,
|
||||
};
|
||||
}
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.data !== this.props.data){
|
||||
this.setState({
|
||||
sortOrder: "",
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat(),
|
||||
});
|
||||
}
|
||||
if(nextProps.columns !== this.props.columns){
|
||||
this.setState({
|
||||
columns: nextProps.columns,
|
||||
});
|
||||
}
|
||||
}
|
||||
toggleSortOrder = (order, column) => {
|
||||
let { sortOrder, data, oldData } = this.state;
|
||||
let { data, oldData ,columns} = this.state;
|
||||
let ascend_sort = function(key) {
|
||||
return function(a, b) {
|
||||
return a.key - b.key;
|
||||
|
@ -35,10 +39,10 @@ export default function sort(Table, Icon) {
|
|||
return b.key - a.key;
|
||||
};
|
||||
};
|
||||
if (sortOrder === order) {
|
||||
// 切换为未排序状态
|
||||
order = "";
|
||||
}
|
||||
// if (sortOrder === order) {
|
||||
// // 切换为未排序状态
|
||||
// order = "";
|
||||
// }
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
|
@ -53,21 +57,22 @@ export default function sort(Table, Icon) {
|
|||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
this.setState({
|
||||
sortOrder: order,
|
||||
data: data,
|
||||
oldData: oldData
|
||||
let seleObj = columns.find(da=>da.key == column.key);
|
||||
seleObj.order = order;
|
||||
this.setState({
|
||||
data,
|
||||
oldData,
|
||||
columns
|
||||
});
|
||||
};
|
||||
renderColumnsDropdown(columns) {
|
||||
const { sortOrder } = this.state;
|
||||
renderColumnsDropdown=(columns)=>{
|
||||
const prefixCls = this.props.prefixCls || "bee-table";
|
||||
return columns.map(originColumn => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let sortButton;
|
||||
if (column.sorter) {
|
||||
const isAscend = sortOrder === "ascend";
|
||||
const isDescend = sortOrder === "descend";
|
||||
let isAscend = column.order && column.order === "ascend";
|
||||
let isDescend = column.order && column.order === "descend";
|
||||
sortButton = (
|
||||
<div className={`${prefixCls}-column-sorter`}>
|
||||
<span
|
||||
|
@ -75,8 +80,9 @@ export default function sort(Table, Icon) {
|
|||
isAscend ? "on" : "off"
|
||||
}`}
|
||||
title="↑"
|
||||
onClick={() =>{
|
||||
onClick={() =>{
|
||||
this.toggleSortOrder("ascend", column);
|
||||
|
||||
if(column.sorterClick){
|
||||
column.sorterClick(column,"up");
|
||||
}
|
||||
|
@ -111,7 +117,7 @@ export default function sort(Table, Icon) {
|
|||
});
|
||||
}
|
||||
render() {
|
||||
let columns = this.renderColumnsDropdown(this.props.columns.concat());
|
||||
let columns = this.renderColumnsDropdown(this.state.columns.concat());
|
||||
return <Table {...this.props} columns={columns} data={this.state.data} />;
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue