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