自动出现滚动条、左侧固定列border-shadow样式

README.md

@@ -76,7 +76,6 @@ class Demo extends Component {
 | defaultExpandAllRows   | 默认是否展开所有行                                | bool                                   | false           |
 | expandedRowKeys        | 展开的行，控制属性                                | array                                  | -               |
 | defaultExpandedRowKeys | 初始扩展行键                                   | array                                  | []              |
-| useFixedHeader         | 是否使用固定表头                                 | bool                                   | false           |
 | bodyStyle              | 添加到tablebody上的style                      | object                                 | {}              |
 | style                  | 添加到table上的style                          | object                                 | {}              |
 | rowKey                 | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string      | 'key'           |

demo/demolist/Demo13.js

@@ -27,7 +27,6 @@ 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
@@ -39,7 +38,6 @@ const columns13 = [
     dataIndex: "c",
     key: "c",
     width: 200,
-    order:"descend",
     sumCol: true,
     sorter: (a, b) => a.c - b.c,
     sorterClick:(data,type)=>{//排序的回调函数
@@ -106,6 +104,9 @@ class Demo13 extends Component {
     let multiObj = {
       type: "checkbox"
     };
+    let sortObj ={
+      mode:'multiple'
+    }
     return (
       <div>
         <Button className="editable-add-btn" onClick={this.onClick}>
@@ -117,6 +118,7 @@ class Demo13 extends Component {
           columns={columns13}
           data={this.state.data13}
           multiSelect={multiObj}
+          sort = {sortObj}
           getSelectedDataFunc={this.getSelectedDataFunc}
         />
       </div>

dist/demo.css

@@ -8541,8 +8541,6 @@ ul {
     .u-table-fixed-right-expanded-row {
       color: transparent;
       pointer-events: none; }
-  .u-table-scroll-position-left .u-table-fixed-left {
-    box-shadow: none; }
   .u-table-scroll-position-right .u-table-fixed-right {
     box-shadow: none; }
   .u-table-thead th {
@@ -8550,6 +8548,44 @@ ul {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis; }
+    .u-table-thead th .bee-table-column-sorter {
+      position: relative;
+      margin-left: 4px;
+      width: 14px;
+      height: 1em;
+      vertical-align: middle;
+      text-align: center;
+      display: inline-block; }
+      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
+      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up {
+        line-height: 6px;
+        display: block;
+        width: 14px;
+        cursor: pointer; }
+    .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,
+    .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {
+      color: #108ee9; }
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-up {
+      filter: none;
+      font-size: 12px; }
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-up {
+      display: inline-block;
+      padding: 0;
+      font-size: 12px;
+      font-size: 8px\9;
+      transform: scale(0.66667) rotate(0deg);
+      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+      zoom: 1;
+      line-height: 4px;
+      height: 4px;
+      color: #999;
+      transition: all 0.3s; }
+    .u-table-thead th:hover .bee-table-column-sorter {
+      display: inline-block; }
   .u-table-thead .th-drag {
     cursor: pointer; }
   .u-table-thead .th-drag-hover {
@@ -8740,46 +8776,6 @@ ul {
     right: 20px;
     position: absolute; }
 
-.bee-table-column-sorter {
-  position: relative;
-  margin-left: 4px;
-  display: inline-block;
-  width: 14px;
-  height: 1em;
-  vertical-align: middle;
-  text-align: center; }
-  .bee-table-column-sorter > .bee-table-column-sorter-down,
-  .bee-table-column-sorter > .bee-table-column-sorter-up {
-    line-height: 6px;
-    display: block;
-    width: 14px;
-    cursor: pointer; }
-
-.bee-table-column-sorter-down.on .uf-triangle-down,
-.bee-table-column-sorter-down.on .uf-triangle-up,
-.bee-table-column-sorter-up.on .uf-triangle-down,
-.bee-table-column-sorter-up.on .uf-triangle-up {
-  color: #108ee9; }
-
-.bee-table-column-sorter .uf-triangle-down,
-.bee-table-column-sorter .uf-triangle-up {
-  filter: none;
-  font-size: 12px; }
-
-.bee-table-column-sorter .uf-triangle-down,
-.bee-table-column-sorter .uf-triangle-up {
-  display: inline-block;
-  padding: 0;
-  font-size: 12px;
-  font-size: 8px\9;
-  transform: scale(0.66667) rotate(0deg);
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-  zoom: 1;
-  line-height: 4px;
-  height: 4px;
-  color: #999;
-  transition: all 0.3s; }
-
 .col-resize-container {
   height: 0px;
   position: relative; }

docs/api.md

@@ -23,7 +23,6 @@ import 'bee-table/build/Table.css';
 | defaultExpandAllRows   | 默认是否展开所有行                                | bool                                   | false           |
 | expandedRowKeys        | 展开的行，控制属性                                | array                                  | -               |
 | defaultExpandedRowKeys | 初始扩展行键                                   | array                                  | []              |
-| useFixedHeader         | 是否使用固定表头                                 | bool                                   | false           |
 | bodyStyle              | 添加到tablebody上的style                      | object                                 | {}              |
 | style                  | 添加到table上的style                          | object                                 | {}              |
 | rowKey                 | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string      | 'key'           |

src/Table.js

@@ -198,6 +198,9 @@ class Table extends Component{
       if(this.computeWidth < this.contentWidth){
         let contentWidthDiff = this.contentWidth - this.computeWidth;
         this.setState({contentWidthDiff,lastShowIndex});
+      }else{
+        this.contentWidth = this.computeWidth;
+        this.setState({contentWidth:this.contentWidth});//重新渲染，为了显示滚动条
       }
 
   }
@@ -598,7 +601,7 @@ class Table extends Component{
         if (scroll.x === true) {
           tableStyle.tableLayout = 'fixed';
         } else {
-          tableStyle.width = scroll.x;
+          tableStyle.width = this.contentWidth;
         }
       }
       const tableBody = hasBody ? getBodyWrapper(

src/Table.scss

@@ -263,9 +263,9 @@ $table-move-in-color: $bg-color-base;
     }
   }
   
-  &-scroll-position-left &-fixed-left {
+  // &-scroll-position-left &-fixed-left {
-    box-shadow: none;
+  //   box-shadow: none;
-  }
+  // }
 
   &-scroll-position-right &-fixed-right {
     box-shadow: none;
@@ -278,6 +278,57 @@ $table-move-in-color: $bg-color-base;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      .bee-table-column-sorter {
+        position: relative;
+        margin-left: 4px;
+        width: 14px;
+        height: 1em;
+        vertical-align: middle;
+        text-align: center;
+        // display: none;
+        display: inline-block;
+        & > .bee-table-column-sorter-down,
+        & > .bee-table-column-sorter-up {
+          line-height: 6px;
+          display: block;
+          width: 14px;
+          cursor: pointer;
+        }
+      }
+      .bee-table-column-sorter-down.on .uf-triangle-down,
+      .bee-table-column-sorter-down.on .uf-triangle-up,
+      .bee-table-column-sorter-up.on .uf-triangle-down,
+      .bee-table-column-sorter-up.on .uf-triangle-up {
+        color: #108ee9;
+      }
+      .bee-table-column-sorter .uf-triangle-down,
+      .bee-table-column-sorter .uf-triangle-up {
+        -webkit-filter: none;
+        filter: none;
+        font-size: 12px;
+      }
+      .bee-table-column-sorter .uf-triangle-down,
+      .bee-table-column-sorter .uf-triangle-up {
+        display: inline-block;
+        padding: 0;
+        font-size: 12px;
+        font-size: 8px\9;
+        -webkit-transform: scale(0.66666667) rotate(0deg);
+        -ms-transform: scale(0.66666667) rotate(0deg);
+        transform: scale(0.66666667) rotate(0deg);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+        zoom: 1;
+        line-height: 4px;
+        height: 4px;
+        color: #999;
+        -webkit-transition: all 0.3s;
+        transition: all 0.3s;
+      }
+       &:hover{
+        .bee-table-column-sorter {
+            display: inline-block;
+        }
+      }
     }
     .th-drag{
       cursor: pointer;
@@ -530,51 +581,6 @@ $table-move-in-color: $bg-color-base;
   }
 }
 
-.bee-table-column-sorter {
-  position: relative;
-  margin-left: 4px;
-  display: inline-block;
-  width: 14px;
-  height: 1em;
-  vertical-align: middle;
-  text-align: center;
-  & > .bee-table-column-sorter-down,
-  & > .bee-table-column-sorter-up {
-    line-height: 6px;
-    display: block;
-    width: 14px;
-    cursor: pointer;
-  }
-}
-.bee-table-column-sorter-down.on .uf-triangle-down,
-.bee-table-column-sorter-down.on .uf-triangle-up,
-.bee-table-column-sorter-up.on .uf-triangle-down,
-.bee-table-column-sorter-up.on .uf-triangle-up {
-  color: #108ee9;
-}
-.bee-table-column-sorter .uf-triangle-down,
-.bee-table-column-sorter .uf-triangle-up {
-  -webkit-filter: none;
-  filter: none;
-  font-size: 12px;
-}
-.bee-table-column-sorter .uf-triangle-down,
-.bee-table-column-sorter .uf-triangle-up {
-  display: inline-block;
-  padding: 0;
-  font-size: 12px;
-  font-size: 8px\9;
-  -webkit-transform: scale(0.66666667) rotate(0deg);
-  -ms-transform: scale(0.66666667) rotate(0deg);
-  transform: scale(0.66666667) rotate(0deg);
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-  zoom: 1;
-  line-height: 4px;
-  height: 4px;
-  color: #999;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
 
 .col-resize-container {
   height: 0px;

src/TableHeader.js

@@ -185,6 +185,8 @@ class TableHeader extends Component{
     // this.contentTableWidth = newTableWidth;
     contentTableDom.style.width = newTableWidth+'px';
     this.drag.x = x; 
+    let contentColDomArr = contentTableDom.querySelectorAll('colgroup col')
+    contentColDomArr[this.drag.currIndex].style.width = newWidth+"px" ;
     //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
     const siblingDom = contentTableDom.parentNode.nextElementSibling;
     if(siblingDom){

src/lib/filterColumn.js

@@ -87,8 +87,8 @@ export default function filterColumn(Table,Popover) {
       return columns.map((da,i)=> 
       {
         if(!da.fixed){
-          return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
+          return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} >
-            <Checkbox id={da.key} checked={da.checked}/> 
+            <Checkbox id={da.key} checked={da.checked} onClick={()=>{this.checkedColumItemClick(da)}}/> 
             <span>{da.title}</span>
           </div>)
         }
@@ -156,7 +156,7 @@ export default function filterColumn(Table,Popover) {
               content={content}
               show={showModal}   >
                 <div className={`${prefixCls}-pop-column-filter-cont`}>
-                  <Icon type="uf-navmenu" onClick={this.openCloumList}/>
+                  <Icon type="uf-grid" onClick={this.openCloumList}/>
                 </div>
             </Popover>
           </div>

src/lib/sort.js

@@ -6,6 +6,21 @@ import React, { Component } from "react";
  * @param {*} Icon
  */
 export default function sort(Table, Icon) {
+  const IconType = [{
+    'type':'noSort',
+    'icon':'uf-symlist',
+    'order':'',
+  },{
+      'type':'up',
+      'icon':'uf-sortup',
+      'order':'ascend',
+    },{
+      'type':'down',
+      'icon':'uf-sortdown',
+      'order':'descend',
+    }
+  ]
+   
   return class SortTable extends Component {
     constructor(props) {
       super(props);
@@ -14,6 +29,9 @@ export default function sort(Table, Icon) {
         columns:props.columns, 
       };
     }
+    static defaultProps = {
+      sort: {mode:'single'}
+   };
     componentWillReceiveProps(nextProps){
       if(nextProps.data !== this.props.data){
         this.setState({ 
@@ -26,84 +44,125 @@ export default function sort(Table, Icon) {
           columns: nextProps.columns, 
         });
       }
+    }
+    getOrderNum =()=>{
+      let orderNum=0 ;
+      this.state.columns.forEach((item,index)=>{
+        if(item.order=='ascend' || item.order=='descend'){
+          orderNum++;
+        }
+      })
+      return orderNum?orderNum:1;
+    }
+    //当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
+    /**
+     * column 当前的排序的列
+     */
+    changeOrderNum = (column)=>{
+      let {columns} = this.state;
+      columns.forEach((col)=>{
+        if(col.orderNum>column.orderNum){
+          col.orderNum--;
+        }
+        if(column.key == col.key){
+          col.orderNum = '';
+        }
+      })
+     this.setState({columns});
+
+    }
+    /**
+     * 获取排序方式
+     */
+    getColAndOrderType = ()=>{
+
     }
     toggleSortOrder = (order, column) => {
       let { data, oldData ,columns} = this.state;
-      let ascend_sort = function(key) {
+      let {sort} = this.props;
-        return function(a, b) {
+      // let ascend_sort = function(key) {
-          return a.key - b.key;
+      //   return function(a, b) {
-        };
+      //     return a.key - b.key;
-      };
+      //   };
-      let descend_sort = function(key) {
+      // };
-        return function(a, b) {
+      // let descend_sort = function(key) {
-          return b.key - a.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();
-      }
       let seleObj = columns.find(da=>da.key == column.key);
       seleObj.order = order;
+      if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
+        seleObj.orderNum = this.getOrderNum();
+      }
+      //通过后端请求
+      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();
+          this.changeOrderNum(column);
+        }
+      }
       this.setState({ 
         data,
         oldData,
         columns
       });
     };
+    //每个column上添加orderNum属性，不排序时为“”。
+    //点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
+    //点击置为“”时，动态的设置相关column的orderNum值。并排序
     renderColumnsDropdown=(columns)=>{
       const prefixCls = "bee-table";
+      const {mode} = this.props.sort;
       return columns.map(originColumn => {
+        let iconTypeIndex = 0;
         let column = Object.assign({}, originColumn);
+        
+        if(column.order ){
+          if(column.order === "ascend"){
+            iconTypeIndex = 1;
+          }
+          if(column.order === "descend"){
+            iconTypeIndex = 2;
+          }
+        }
         let sortButton;
         if (column.sorter) {
-          let isAscend = column.order && column.order === "ascend";
+          // //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
-          let isDescend = column.order && column.order === "descend";
+          // if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
+          //   column.orderNum = this.getOrderNum();
+          //   console.log(column.orderNum);
+          // }
           sortButton = (
             <div className={`${prefixCls}-column-sorter`}>
               <span
-                className={`${prefixCls}-column-sorter-up ${
+                className={`${prefixCls}-column-sorter-up `}
-                  isAscend ? "on" : "off"
-                }`}
-                title="↑"
                 onClick={() =>{ 
-                  this.toggleSortOrder("ascend", column);
+                  this.toggleSortOrder(IconType[iconTypeIndex==2?0:iconTypeIndex+1].order, column);
 
                   if(column.sorterClick){
-                    column.sorterClick(column,"up");
+                    column.sorterClick(column,IconType[iconTypeIndex].type);
                   }
                 } }
               >
-                <Icon type="uf-triangle-up" />
+                <Icon type={IconType[iconTypeIndex].icon} />
-              </span>
+                <span >{column.orderNum}</span>
-              <span
-                className={`${prefixCls}-column-sorter-down ${
-                  isDescend ? "on" : "off"
-                }`}
-                title="↓"
-                onClick={() => {
-                  this.toggleSortOrder("descend", column);
-                  if(column.sorterClick){
-                    column.sorterClick(column,"down");
-                  }
-                }}
-              >
-                <Icon type="uf-triangle-down" />
               </span>
+              
             </div>
           );
         }