From 222a935cebb8b2bcdb6f7c0c2b5db7cf15ae4ab4 Mon Sep 17 00:00:00 2001 From: jonyshi Date: Thu, 2 Aug 2018 13:12:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=A8cloum=20=E4=B8=8A=E5=A2=9E=E5=8A=A0ord?= =?UTF-8?q?er=E5=B1=9E=E6=80=A7=EF=BC=8C=E8=BF=9B=E8=A1=8C=E6=8E=92?= =?UTF-8?q?=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + demo/demolist/Demo13.js | 18 ++++++++++++----- docs/api.md | 2 +- src/lib/sort.js | 44 +++++++++++++++++++++++------------------ 4 files changed, 40 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index d5be070..5df3fa3 100644 --- a/README.md +++ b/README.md @@ -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"） | -| diff --git a/demo/demolist/Demo13.js b/demo/demolist/Demo13.js index 225df25..92b851d 100644 --- a/demo/demolist/Demo13.js +++ b/demo/demolist/Demo13.js @@ -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" }, diff --git a/docs/api.md b/docs/api.md index 5c3f7af..df46441 100644 --- a/docs/api.md +++ b/docs/api.md @@ -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"%} diff --git a/src/lib/sort.js b/src/lib/sort.js index 24d5a72..bb86293 100644 --- a/src/lib/sort.js +++ b/src/lib/sort.js @@ -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 = (
{ + 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 ; } };