在cloum 上增加order属性,进行排序

This commit is contained in:
jonyshi 2018-08-02 13:12:13 +08:00
parent bc7bdb8993
commit 222a935ceb
4 changed files with 40 additions and 25 deletions

View File

@ -109,6 +109,7 @@ class Demo extends Component {
|render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置|-| |render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据| |onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
| order | 设置排序 | string"descend"、"ascend" | -|

View File

@ -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" },

View File

@ -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函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并|-| |render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|
| order | 设置排序 | string"descend"、"ascend" | -|
{% include "mixin.md"%} {% include "mixin.md"%}

View File

@ -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} />;
} }
}; };