Merge branch 'master' of github.com:tinper-bee/bee-table

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="1.5.11"></a>
+## [1.5.11](https://github.com/tinper-bee/bee-table/compare/v1.5.10...v1.5.11) (2018-11-27)
+
+
+
 <a name="1.5.10"></a>
 ## [1.5.10](https://github.com/tinper-bee/bee-table/compare/v1.5.9...v1.5.10) (2018-11-26)
 
@@ -44,7 +49,7 @@
 
 
 <a name="1.5.1"></a>
-## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
+## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
 
 
 

build/Table.css

@@ -330,7 +330,6 @@
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
-      width: 14px;
       height: 1em;
       vertical-align: middle;
       text-align: center;
@@ -339,7 +338,7 @@
       .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
         line-height: 6px;
         display: block;
-        width: 14px;
+        width: 32px;
         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,

build/Table.js

@@ -433,24 +433,38 @@ var Table = function (_Component) {
 
     var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var rows = arguments[2];
+    var _state = this.state,
+        _state$contentWidthDi = _state.contentWidthDiff,
+        contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
+        _state$lastShowIndex = _state.lastShowIndex,
+        lastShowIndex = _state$lastShowIndex === undefined ? 0 : _state$lastShowIndex;
 
     var filterCol = [];
     rows = rows || [];
     rows[currentRow] = rows[currentRow] || [];
 
-    columns.forEach(function (column) {
+    columns.forEach(function (column, i) {
       if (column.rowSpan && rows.length < column.rowSpan) {
         while (rows.length < column.rowSpan) {
           rows.push([]);
         }
       }
+      var width = column.width;
+      if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) {
+        width = parseInt(_this2.contentWidth * parseInt(width) / 100);
+      } else if (width) {
+        width = parseInt(width);
+      }
+      if (lastShowIndex == i && width) {
+        width = width + contentWidthDiff;
+      }
       var cell = {
         key: column.key,
         className: column.className || '',
         children: column.title,
         drgHover: column.drgHover,
         fixed: column.fixed,
-        width: column.width,
+        width: width,
         dataindex: column.dataIndex
       };
       if (column.onHeadCellClick) {
@@ -663,11 +677,11 @@ var Table = function (_Component) {
   Table.prototype.getColGroup = function getColGroup(columns, fixed) {
     var cols = [];
     var self = this;
-    var _state = this.state,
-        _state$contentWidthDi = _state.contentWidthDiff,
-        contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
-        _state$lastShowIndex = _state.lastShowIndex,
-        lastShowIndex = _state$lastShowIndex === undefined ? 0 : _state$lastShowIndex;
+    var _state2 = this.state,
+        _state2$contentWidthD = _state2.contentWidthDiff,
+        contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
+        _state2$lastShowIndex = _state2.lastShowIndex,
+        lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
 
     if (this.props.expandIconAsCell && fixed !== 'right') {
       cols.push(_react2["default"].createElement('col', {

build/TableHeader.js

@@ -192,7 +192,7 @@ var TableHeader = function (_Component) {
       // columns[this.drag.currIndex].width = data.width;
       //宽度拖拽后，增加回调函数，外部可以记录宽度
       if (typeof _this.props.afterDragColWidth == "function" && rows && rows[0] && _this.drag.currIndex) {
-        _this.props.afterDragColWidth(rows[0][_this.drag.currIndex], _this.drag.currIndex);
+        _this.props.afterDragColWidth(rows[0], _this.drag.currIndex);
       }
     };
 
@@ -206,7 +206,8 @@ var TableHeader = function (_Component) {
           headerScroll = _this$props3.headerScroll,
           contentDomWidth = _this$props3.contentDomWidth,
           scrollbarWidth = _this$props3.scrollbarWidth,
-          bordered = _this$props3.bordered;
+          bordered = _this$props3.bordered,
+          rows = _this$props3.rows;
 
       var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
       var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
@@ -254,8 +255,8 @@ var TableHeader = function (_Component) {
       currentDom.style.width = newWidth + "px";
       // this.contentTableWidth = newTableWidth;
       contentTableDom.style.width = newTableWidth + "px";
-      data.width = newWidth;
-
+      // data.width = newWidth;
+      rows[0][_this.drag.currIndex].width = newWidth;
       _this.drag.x = x;
       var contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
       contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
@@ -510,13 +511,8 @@ var TableHeader = function (_Component) {
             if (!fixed && da.fixed) {
               fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
             }
-            if (typeof da.width == "string" && da.width.indexOf("%") > -1 && _this2.props.contentWidth) {
-              da.width = parseInt(_this2.props.contentWidth * parseInt(da.width) / 100);
-            } else if (da.width) {
-              da.width = parseInt(da.width);
-            }
+
             if (lastShowIndex == i) {
-              da.width = parseInt(da.width) + contentWidthDiff;
               canDotDrag = "th-can-not-drag";
             }
             if (filterable && index == rows.length - 1) {

demo/demolist/Demo22.js

@@ -57,6 +57,7 @@ class Demo22 extends Component {
  
   render() {
     return <DragColumnTable columns={columns22} data={data22} bordered
+    
     draggable={true} 
     />;
   }

dist/demo.css

@@ -2421,6 +2421,9 @@ i.uf {
 /*
  * 选择时删除文本阴影，及设置默认选中颜色
  */
+::-moz-selection {
+  background: rgb(187,222,251);
+  text-shadow: none; }
 ::selection {
   background: rgb(187,222,251);
   text-shadow: none; }
@@ -6670,8 +6673,7 @@ input.u-button[type="submit"] {
   border-radius: 0 500px 500px 0; }
 
 .u-pagination {
-  font-size: 14px;
-  position: relative; }
+  font-size: 14px; }
   .u-pagination-list {
     float: left;
     margin: 5px; }
@@ -6809,15 +6811,6 @@ input.u-button[type="submit"] {
     margin: 5px; }
     .u-pagination-total span {
       padding: 0 5px; }
-  .u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 0.6);
-    z-index: 2;
-    cursor: not-allowed; }
 
 .pagination-state {
   float: left;
@@ -8603,7 +8596,6 @@ ul {
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
-      width: 14px;
       height: 1em;
       vertical-align: middle;
       text-align: center;
@@ -8612,7 +8604,7 @@ ul {
       .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
         line-height: 6px;
         display: block;
-        width: 14px;
+        width: 34px;
         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,

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.5.10",
+ "version": "1.5.11",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -341,23 +341,33 @@ class Table extends Component {
   }
 
   getHeaderRows(columns, currentRow = 0, rows) {
+    let { contentWidthDiff = 0, lastShowIndex = 0 } = this.state;
     let filterCol = [];
     rows = rows || [];
     rows[currentRow] = rows[currentRow] || [];
 
-    columns.forEach(column => {
+    columns.forEach((column,i) => {
       if (column.rowSpan && rows.length < column.rowSpan) {
         while (rows.length < column.rowSpan) {
           rows.push([]);
         }
       }
+      let width = column.width;
+      if (typeof (width) == 'string' && width.indexOf('%') > -1 && this.contentWidth) {
+        width = parseInt(this.contentWidth * parseInt(width) / 100);
+      } else if (width) {
+        width = parseInt(width);
+      }
+      if (lastShowIndex == i && width) {
+        width = width + contentWidthDiff;
+      }
       const cell = {
         key: column.key,
         className: column.className || '',
         children: column.title,
         drgHover: column.drgHover,
         fixed: column.fixed,
-        width: column.width,
+        width: width,
         dataindex:column.dataIndex
       };
       if (column.onHeadCellClick) {

src/Table.scss

@@ -296,7 +296,6 @@ $table-move-in-color: $bg-color-base;
       .bee-table-column-sorter {
         position: relative;
         margin-left: 4px;
-        width: 14px;
         height: 1em;
         vertical-align: middle;
         text-align: center;
@@ -306,7 +305,7 @@ $table-move-in-color: $bg-color-base;
         & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
           line-height: 6px;
           display: block;
-          width: 14px;
+          width: 34px;
           cursor: pointer;
         }
        

src/TableHeader.js

@@ -200,15 +200,15 @@ class TableHeader extends Component {
       rows[0] &&
       this.drag.currIndex
     ) {
-      this.props.afterDragColWidth(rows[0][this.drag.currIndex],this.drag.currIndex);
+      this.props.afterDragColWidth(rows[0],this.drag.currIndex);
     }
   };
 
   onThMouseMove = (event, data) => {
     if (!this.border) return;
     //固定表头拖拽
-
-    const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered} = this.props;
+  
+    const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered,rows} = this.props;
     let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
     let contentTableDom = document.getElementById(
       "u-table-drag-thead-" + this.theadKey
@@ -264,8 +264,8 @@ class TableHeader extends Component {
     currentDom.style.width = newWidth + "px";
     // this.contentTableWidth = newTableWidth;
     contentTableDom.style.width = newTableWidth + "px";
-    data.width = newWidth;
-
+    // data.width = newWidth;
+    rows[0][this.drag.currIndex].width = newWidth;
     this.drag.x = x;
     let contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
     contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";
@@ -445,6 +445,7 @@ class TableHeader extends Component {
     }
   };
 
+
   render() {
     const {dragAbleOrBord,dragAbleOrBordStart} = this.state;
     const {
@@ -483,19 +484,8 @@ class TableHeader extends Component {
               if (!fixed && da.fixed) {
                 fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
               }
-              if (
-                typeof da.width == "string" &&
-                da.width.indexOf("%") > -1 &&
-                this.props.contentWidth
-              ) {
-                da.width = parseInt(
-                  (this.props.contentWidth * parseInt(da.width)) / 100
-                );
-              } else if (da.width) {
-                da.width = parseInt(da.width);
-              }
+           
               if (lastShowIndex == i) {
-                da.width = parseInt(da.width) + contentWidthDiff;
                 canDotDrag = "th-can-not-drag";
               }
               if (filterable && index == rows.length - 1) {