支持单列、多列排序

demo/demolist/Demo11.js

@@ -1,7 +1,6 @@
 /**
 *
 * @title 列排序
-* @description 点击列的上下按钮即可排序
 *
 */
 
@@ -9,7 +8,8 @@
 import React, { Component } from 'react';
 import Table from '../../src';
 import Icon from "bee-icon";
-
+import sort from "../../src/lib/sort.js";
+let ComplexTable = sort(Table, Icon);
 const columns11 = [
   {
     title: "名字",
@@ -54,87 +54,9 @@ class Demo11 extends Component {
       data: data11
     };
   }
-  toggleSortOrder=(order, column)=> {
-    let { sortOrder, data, oldData } = this.state;
-    let ascend_sort = function(key) {
-      return function(a, b) {
-        return a.key - b.key;
-      };
-    };
-    let descend_sort = function(key) {
-      return function(a, b) {
-        return b.key - a.key;
-      };
-    };
-    if (sortOrder === order) {
-      // 切换为未排序状态
-      order = "";
-    }
-    if (!oldData) {
-      oldData = data.concat();
-    }
-    if (order === "ascend") {
-      data = data.sort(function(a, b) {
-        return column.sorter(a, b);
-      });
-    } else if (order === "descend") {
-      data = data.sort(function(a, b) {
-        return column.sorter(b, a);
-      });
-    } else {
-      data = oldData.concat();
-    }
-    this.setState({
-      sortOrder: order,
-      data: data,
-      oldData: oldData
-    });
-  }
-  renderColumnsDropdown(columns) {
-    const { sortOrder } = this.state;
-    const { prefixCls } = this.props;
-
-    return columns.map(originColumn => {
-      let column = Object.assign({}, originColumn);
-      let sortButton;
-      if (column.sorter) {
-        const isAscend = sortOrder === "ascend";
-        const isDescend = sortOrder === "descend";
-        sortButton = (
-          <div className={`${prefixCls}-column-sorter`}>
-            <span
-              className={`${prefixCls}-column-sorter-up ${isAscend
-                ? "on"
-                : "off"}`}
-              title="↑"
-              onClick={() => this.toggleSortOrder("ascend", column)}
-            >
-              <Icon type="uf-triangle-up" />
-            </span>
-            <span
-              className={`${prefixCls}-column-sorter-down ${isDescend
-                ? "on"
-                : "off"}`}
-              title="↓"
-              onClick={() => this.toggleSortOrder("descend", column)}
-            >
-              <Icon type="uf-triangle-down" />
-            </span>
-          </div>
-        );
-      }
-      column.title = (
-        <span>
-          {column.title}
-          {sortButton}
-        </span>
-      );
-      return column;
-    });
-  }
   render() {
-    let columns = this.renderColumnsDropdown(columns11);
+
-    return <Table columns={columns} data={this.state.data} />;
+    return <ComplexTable columns={columns11} data={this.state.data} />;
   }
 }
 Demo11.defaultProps = defaultProps11;

demo/demolist/Demo13.js

@@ -1,7 +1,7 @@
 /**
  *
- * @title 列排序、全选功能、合计
+ * @title 多列排序、全选功能、合计
- * @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
+ * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
  *
  */
 
@@ -19,6 +19,7 @@ const columns13 = [
     title: "名字",
     dataIndex: "a",
     key: "a",
+    className:'dfasd',
     width: 200
   },
   {
@@ -27,6 +28,7 @@ const columns13 = [
     key: "b",
     width: 200,
     sumCol: true,
+    order:'ascend',
     sorter: (a, b) => a.c - b.c,
     sorterClick:(data,type)=>{//排序的回调函数
       //type value is up or down
@@ -45,6 +47,14 @@ const columns13 = [
       console.log("data",data);
     }
   },
+  {
+    title: "成绩",
+    dataIndex: "e",
+    key: "e",
+    width: 200,
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c,
+  },
   {
     title: "武功级别",
     dataIndex: "d",
@@ -54,17 +64,13 @@ const columns13 = [
 ];
 
 const data13 = [
-  { a: "杨过", b: 675, c: 30, d: "内行", key: "2" },
+  { a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
-  { a: "令狐冲", b: 43, c: 41, d: "大侠", key: "1" },
+  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
-  { a: "郭靖", b: 153, c: 25, d: "大侠", key: "3" }
+  { a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
-];
+  { a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
-const data13_1 = [
+  { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
-  { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
-  { a: "杨过", b: "男", c: 30, d: "内行", key: "22" },
-  { a: "杨过", b: "男", c: 30, d: "内行", key: "222" },
-  { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
-  { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
 ];
+
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
 let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
 
@@ -104,9 +110,10 @@ class Demo13 extends Component {
     let multiObj = {
       type: "checkbox"
     };
-    let sortObj ={
+    let sortObj = {
       mode:'multiple'
     }
+   
     return (
       <div>
         <Button className="editable-add-btn" onClick={this.onClick}>
@@ -118,7 +125,7 @@ class Demo13 extends Component {
           columns={columns13}
           data={this.state.data13}
           multiSelect={multiObj}
-          sort = {sortObj}
+          sort={sortObj}
           getSelectedDataFunc={this.getSelectedDataFunc}
         />
       </div>

demo/demolist/Demo23.js

@@ -1,7 +1,7 @@
 /**
 *
-* @title 拖拽调整列的宽度【本功能暂时下线】
+* @title 拖拽调整列的宽度
-* @description 目前支持此功能只支持普通表格【注：不支持tree结构的表头、不支持和表头拖拽交互列一起使用】
+* @description 注：不支持tree结构的表头、不支持和表头拖拽交互列一起使用
 */
 import React, { Component } from 'react';
 import Table from '../../src'; 

dist/demo.css

@@ -10247,4 +10247,12 @@ li.rc-time-picker-panel-select-option-disabled:hover {
   .demo25 .u-table-scroll .u-table-header {
     margin-right: 15px; }
 
+th .drop-menu .uf {
+  font-size: 12px;
+  visibility: hidden;
+  margin-left: 15px; }
+
+th:hover .uf {
+  visibility: visible; }
+
 /*# sourceMappingURL=demo.css.map */

src/lib/sort.js

@@ -7,9 +7,9 @@ import React, { Component } from "react";
  */
 export default function sort(Table, Icon) {
   const IconType = [{
-    'type':'noSort',
+    'type':'flat',
     'icon':'uf-symlist',
-    'order':'',
+    'order':'flatscend',
   },{
       'type':'up',
       'icon':'uf-sortup',
@@ -30,7 +30,10 @@ export default function sort(Table, Icon) {
       };
     }
     static defaultProps = {
-      sort: {mode:'single'}
+      sort: {
+              mode:'single',
+              backSource:false //默认是前端排序，值为true为后端排序
+            }
    };
     componentWillReceiveProps(nextProps){
       if(nextProps.data !== this.props.data){
@@ -77,45 +80,97 @@ export default function sort(Table, Icon) {
     getColAndOrderType = ()=>{
 
     }
+   /**
+    * pre：前一条数据
+    * after:后一条数据
+    * orderType:升序、降序
+    */
+    _sortBy=(pre,after,orderCols,orderColslen,currentIndex)=>{
+      const preKey = pre[orderCols[currentIndex].key];
+      const afterKey = after[orderCols[currentIndex].key];
+      if(preKey == afterKey && currentIndex+1<=orderColslen){
+        return this._sortBy(pre,after,orderCols,orderColslen,currentIndex+1);
+      }
+      if(orderCols[currentIndex].order=='ascend'){
+        return preKey  - afterKey
+      }else{
+        return afterKey - preKey
+      }
+    }
+    /**
+     * 多列排序 先排order为1的，其他的基于已排序的数据排
+     */
+    multiSort = (columns)=>{
+      let {data, oldData} = this.state;
+      const self = this;
+      let orderCols = {},orderColslen=0;
+      columns.forEach(item=>{
+        if(item.orderNum){
+          orderColslen++;
+          orderCols[item.orderNum] = item;
+        }
+      })
+      if(orderColslen>0){
+        //第一层排序
+        data = data.sort(function(a, b) {
+          return self._sortBy(a,b,orderCols,orderColslen,1);
+        });
+        
+        
+      }
+      return data;
+
+    }
+
     toggleSortOrder = (order, column) => {
       let { data, oldData ,columns} = this.state;
       let {sort} = this.props;
-      // let ascend_sort = function(key) {
+      let seleObj;
-      //   return function(a, b) {
-      //     return a.key - b.key;
-      //   };
-      // };
-      // let descend_sort = function(key) {
-      //   return function(a, b) {
-      //     return b.key - a.key;
-      //   };
-      // };
-     
       if (!oldData) {
         oldData = data.concat();
       }
-      let seleObj = columns.find(da=>da.key == column.key);
+      //单列排序，清空其他列的排序
-      seleObj.order = order;
+      if(sort.mode == 'single'){
-      if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
+        columns.forEach(da=>{
-        seleObj.orderNum = this.getOrderNum();
+          if(da.key == column.key){
-      }
+            seleObj = da;
-      //通过后端请求
+          }else{
-      if(sort.backSource){
+            if(da.order){
-        //获取排序的字段和方式
+              da.order = 'flatscend';
+            }
+          }
+        })
+        seleObj.order = order;
+        //通过后端请求
+        if(sort.backSource){
+          //获取排序的字段和方式
+        }else{
+          if (order === "ascend") {
+            data = data.sort(function(a, b) {
+              return column.sorter(a, b);
+            });
+          } else if (order === "descend") {
+            data = data.sort(function(a, b) {
+              return column.sorter(b, a);
+            });
+          } else {
+            data = oldData.concat();
+          }
+        }
       }else{
-        if (order === "ascend") {
+        seleObj = columns.find(da=>da.key == column.key);
-          data = data.sort(function(a, b) {
+        seleObj.order = order;
-            return column.sorter(a, b);
+        if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
-          });
+          seleObj.orderNum = this.getOrderNum();
-        } else if (order === "descend") {
+        }
-          data = data.sort(function(a, b) {
+        data = this.multiSort(columns);
-            return column.sorter(b, a);
+        if(order === "flatscend"){
-          });
-        } else {
-          data = oldData.concat();
           this.changeOrderNum(column);
         }
       }
+
+      
+      
       this.setState({ 
         data,
         oldData,
@@ -131,26 +186,26 @@ export default function sort(Table, Icon) {
       return columns.map(originColumn => {
         let iconTypeIndex = 0;
         let column = Object.assign({}, originColumn);
+        let sorterClass = 'flat';
      
-        if(column.order ){
+        if(column.order === "ascend"){
-          if(column.order === "ascend"){
+          iconTypeIndex = 1;
-            iconTypeIndex = 1;
+          sorterClass = 'up'
-          }
+        }else if(column.order === "descend"){
-          if(column.order === "descend"){
+          iconTypeIndex = 2;
-            iconTypeIndex = 2;
+          sorterClass = 'down'
-          }
         }
+        
         let sortButton;
         if (column.sorter) {
-          // //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
+          //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
-          // if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
+          if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
-          //   column.orderNum = this.getOrderNum();
+            column.orderNum = this.getOrderNum();
-          //   console.log(column.orderNum);
+          }
-          // }
           sortButton = (
             <div className={`${prefixCls}-column-sorter`}>
               <span
-                className={`${prefixCls}-column-sorter-up `}
+                className={`${prefixCls}-column-sorter-${sorterClass}`}
                 onClick={() =>{ 
                   this.toggleSortOrder(IconType[iconTypeIndex==2?0:iconTypeIndex+1].order, column);