merge

build/Table.css

@@ -153,6 +153,13 @@
   .u-loading.u-loading-line.u-loading-line-warning > div {
     background-color: #ff9800; }
 
+.u-loading.u-loading-custom > div {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%); }
+
 @keyframes line-scale {
   0% {
     -webkit-transform: scaley(1);
@@ -337,10 +344,10 @@
     content: "."; }
   .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
     content: "\e639";
-    font-family: "uf" !important; }
+    font-family: "uf"; }
   .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
     content: "\e61c";
-    font-family: "uf" !important; }
+    font-family: "uf"; }
   .u-table-row.selected {
     background: #FFF7E7; }
   .u-table tr.u-table-expanded-row {

build/Table.js

@@ -324,9 +324,9 @@ var Table = function (_Component) {
     _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
     setTimeout(this.resetScrollX, 300);
     //含有纵向滚动条
-    if (this.props.scroll.y) {
+    // if(this.props.scroll.y){
-      this.scrollbarWidth = (0, _utils.measureScrollbar)();
+    this.scrollbarWidth = (0, _utils.measureScrollbar)();
-    }
+    // }
     //后续也放在recevice里面
     if (!this.props.originWidth) {
       this.computeTableWidth();

build/TableHeader.js

@@ -77,7 +77,8 @@ var TableHeader = function (_Component) {
           targetEvent = _utils.Event.getTarget(event);
       var _this$props = _this.props,
           clsPrefix = _this$props.clsPrefix,
-          contentTable = _this$props.contentTable;
+          contentTable = _this$props.contentTable,
+          lastShowIndex = _this$props.lastShowIndex;
 
       var currentElement = _this.getOnLineObject(targetEvent);
       if (!currentElement) return;
@@ -95,6 +96,14 @@ var TableHeader = function (_Component) {
         _this.drag.oldWidth = parseInt(currentObj.style.width);
         _this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
         _this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
+        // console.log(" ----- ",this.drag);
+        if (!_this.tableOldWidth) {
+          _this.tableOldWidth = _this.drag.tableWidth; //this.getTableWidth();
+          // console.log(" this.tableOldWidth--- ",this.tableOldWidth);
+        }
+        if (!_this.lastColumWidth) {
+          _this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width);
+        }
       } else if (type != 'online' && _this.props.draggable) {
         // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
         if (!_this.props.draggable) return;
@@ -110,6 +119,16 @@ var TableHeader = function (_Component) {
       }
     };
 
+    _this.getTableWidth = function () {
+      var tableWidth = 0,
+          offWidth = 0; //this.table.cols.length;
+      for (var index = 0; index < _this.table.cols.length; index++) {
+        var da = _this.table.cols[index];
+        tableWidth += parseInt(da.style.width);
+      }
+      return tableWidth - offWidth;
+    };
+
     _this.getTargetToTh = function (targetEvent) {
       var th = targetEvent;
       if (targetEvent.nodeName.toUpperCase() != "TH") {
@@ -127,7 +146,8 @@ var TableHeader = function (_Component) {
           contentDomWidth = _this$props2.contentDomWidth,
           scrollbarWidth = _this$props2.scrollbarWidth,
           contentTable = _this$props2.contentTable,
-          headerScroll = _this$props2.headerScroll;
+          headerScroll = _this$props2.headerScroll,
+          lastShowIndex = _this$props2.lastShowIndex;
 
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
@@ -136,8 +156,7 @@ var TableHeader = function (_Component) {
         var currentCols = _this.table.cols[_this.drag.currIndex];
         var diff = event.x - _this.drag.oldLeft;
         var newWidth = _this.drag.oldWidth + diff;
-        _this.drag.newWidth = newWidth;
+        _this.drag.newWidth = newWidth > 0 ? newWidth : _this.minWidth;
-
         // if(newWidth > this.drag.minWidth){
         if (newWidth > _this.minWidth) {
           currentCols.style.width = newWidth + 'px';
@@ -145,14 +164,23 @@ var TableHeader = function (_Component) {
           if (_this.fixedTable.cols) {
             _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
           }
-          var newTableWidth = _this.drag.tableWidth + diff + 'px';
-          _this.table.table.style.width = newTableWidth; //改变table的width
-          if (_this.table.innerTableBody) {
-            //TODO 后续需要处理此处
-            _this.table.innerTableBody.style.width = newTableWidth;
-          }
-          var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
 
+          // const newTableWidth = this.drag.tableWidth + diff;// +'px';
+          // this.table.table.style.width  = newTableWidth+'px';;//改变table的width
+          // if(this.table.innerTableBody){//TODO 后续需要处理此处
+          //   this.table.innerTableBody.style.width  = newTableWidth+'px';
+
+          // }
+
+          var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
+          if (newDiff > 0) {
+            //缩小 
+            var lastWidth = _this.lastColumWidth + newDiff;
+            _this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
+            _this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
+          }
+
+          var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
           //表头滚动条处理
           if (headerScroll) {
             if (showScroll < 0) {
@@ -181,6 +209,8 @@ var TableHeader = function (_Component) {
               _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
             }
           }
+        } else {
+          _this.drag.newWidth = _this.minWidth;
         }
       } else if (_this.props.draggable && _this.drag.option == "draggable") {
         // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
@@ -277,7 +307,7 @@ var TableHeader = function (_Component) {
       if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
       if (target.nodeName.toUpperCase() === "TH") {
         // target.style.border = "2px dashed rgba(5,0,0,0.25)";
-        target.setAttribute("style", "border:2px dashed rgba(5,0,0,0.25)");
+        target.setAttribute("style", "border-right:2px dashed rgba(5,0,0,0.25)");
         // target.style.backgroundColor = 'rgb(235, 236, 240)';
       }
     };
@@ -440,6 +470,7 @@ var TableHeader = function (_Component) {
     _this.table = null;
     _this._thead = null; //当前对象
     _this.event = false; //避免多次绑定问题
+    _this.lastColumWidth = null; //非固定列最后一列的初始化宽度
     return _this;
   }
 
@@ -484,6 +515,7 @@ var TableHeader = function (_Component) {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');

build/lib/bigData.js

@@ -84,6 +84,8 @@ function bigData(Table) {
         _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
       }
       if (nextProps.data !== props.data) {
+        _this.cachedRowHeight = []; //缓存每行的高度
+        _this.cachedRowParentIndex = [];
         _this.computeCachedRowParentIndex(nextProps.data);
         if (nextProps.data.length > 0) {
           _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置

build/lib/singleSelect.js

@@ -73,7 +73,7 @@ function singleSelect(Table, Radio) {
                 onChange: function onChange(value) {
                   return _this.onRadioChange(value, record, index);
                 },
-                style: { width: '16px', height: '16px', display: 'block', marginLeft: '4px' } },
+                style: { width: '14px', height: '14px', display: 'block', marginLeft: '4px' } },
               _react2["default"].createElement(Radio, { value: index })
             );
           }
@@ -117,8 +117,7 @@ function singleSelect(Table, Radio) {
 
       return _react2["default"].createElement(Table, _extends({}, this.props, {
         columns: this.getDefaultColumns(columns),
-        data: data,
+        data: data }));
-        height: 40 }));
     };
 
     return SingleSelect;

build/lib/util.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
 */
 
 function sortBy(arr, prop, desc) {
-    var props = [],
+  var props = [],
-        ret = [],
+      ret = [],
-        i = 0,
+      i = 0,
-        len = arr.length;
+      len = arr.length;
-    if (typeof prop == 'string') {
+  if (typeof prop == 'string') {
-        for (; i < len; i++) {
+    for (; i < len; i++) {
-            var oI = arr[i];
+      var oI = arr[i];
-            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
-        }
-    } else if (typeof prop == 'function') {
-        for (; i < len; i++) {
-            var _oI = arr[i];
-            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
-        }
-    } else {
-        throw '参数类型错误';
     }
-    props.sort();
+  } else if (typeof prop == 'function') {
-    for (i = 0; i < len; i++) {
+    for (; i < len; i++) {
-        ret[i] = props[i]._obj;
+      var _oI = arr[i];
+      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
     }
-    if (desc) ret.reverse();
+  } else {
-    return ret;
+    throw '参数类型错误';
+  }
+  props.sort();
+  for (i = 0; i < len; i++) {
+    ret[i] = props[i]._obj;
+  }
+  if (desc) ret.reverse();
+  return ret;
 };
 
 /**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
  * @param {} property 
  */
 function compare(property) {
-    return function (a, b) {
+  return function (a, b) {
-        var value1 = a[property];
+    var value1 = a[property];
-        var value2 = b[property];
+    var value2 = b[property];
-        return value1 - value2;
+    return value1 - value2;
-    };
+  };
 }
 
 /**
@@ -63,17 +63,17 @@ function compare(property) {
  * @param {*} obj 要拷贝的对象 
  */
 function ObjectAssign(obj) {
-    var b = obj instanceof Array;
+  var b = obj instanceof Array;
-    var tagObj = b ? [] : {};
+  var tagObj = b ? [] : {};
-    if (b) {
+  if (b) {
-        //数组
+    //数组
-        obj.forEach(function (da) {
+    obj.forEach(function (da) {
-            var _da = {};
+      var _da = {};
-            _extends(_da, da);
+      _extends(_da, da);
-            tagObj.push(_da);
+      tagObj.push(_da);
-        });
+    });
-    } else {
+  } else {
-        _extends(tagObj, obj);
+    _extends(tagObj, obj);
-    }
+  }
-    return tagObj;
+  return tagObj;
 }

demo/demolist/Demo1001.js

@@ -36,14 +36,21 @@ const columns = [
     title: "联系人",
     dataIndex: "d",
     key: "d",
+    width: 500,
+  },
+  {
+    title: "操作",
+    dataIndex: "e",
+    key: "e",
     width: 200,
+    fixed: 'right',
   }
 ];
 
 const data = [
-  { a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom', key: "2" },
+  { a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom',e:'...', key: "2" },
-  { a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack', key: "1" },
+  { a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack',e:'...', key: "1" },
-  { a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane', key: "3" }
+  { a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane',e:'...', key: "3" }
 ];
 
 const DragColumnTable = dragColumn(Table);

dist/demo.css

@@ -326,10 +326,10 @@
     content: "."; }
   .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
     content: "\e639";
-    font-family: "uf" !important; }
+    font-family: "uf"; }
   .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
     content: "\e61c";
-    font-family: "uf" !important; }
+    font-family: "uf"; }
   .u-table-row.selected {
     background: #FFF7E7; }
   .u-table tr.u-table-expanded-row {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.1.3-beta.2",
+ "version": "2.1.4-alpha.4",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.scss

@@ -307,13 +307,13 @@ $icon-color:#505F79;
     &-expanded {
       &:after {
         content: "\e639";
-        font-family: "uf" !important;
+        font-family: "uf";
       }
     }
     &-collapsed {
       &:after {
         content: "\e61c";
-        font-family: "uf" !important;
+        font-family: "uf";
       }
     }
   }

src/TableCell.js

@@ -46,7 +46,6 @@ class TableCell extends Component{
         rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;
         colSpan = tdProps.colSpan;
         text = text.children;
-        console.log("rowIndex====",index,"rowSpan=======",rowSpan,lazyEndIndex);
       }
     }
 

src/TableHeader.js

@@ -31,6 +31,7 @@ class TableHeader extends Component {
     this.table = null;
     this._thead = null;//当前对象
     this.event = false;//避免多次绑定问题
+    this.lastColumWidth = null;//非固定列最后一列的初始化宽度
   }
 
   static defaultProps = {
@@ -75,6 +76,7 @@ class TableHeader extends Component {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@@ -185,7 +187,7 @@ class TableHeader extends Component {
     Event.stopPropagation(e); 
     let event = Event.getEvent(e) ,
     targetEvent = Event.getTarget(event);
-    const { clsPrefix, contentTable } = this.props;
+    const { clsPrefix, contentTable,lastShowIndex } = this.props;
     let currentElement = this.getOnLineObject(targetEvent);
     if(!currentElement)return;
     let type = currentElement.getAttribute('data-type');
@@ -202,6 +204,14 @@ class TableHeader extends Component {
       this.drag.oldWidth = parseInt((currentObj).style.width);
       this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
       this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
+      // console.log(" ----- ",this.drag);
+      if(!this.tableOldWidth){
+        this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
+        // console.log(" this.tableOldWidth--- ",this.tableOldWidth);
+      }
+      if(!this.lastColumWidth){
+        this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
+      }
     }else if(type != 'online' &&  this.props.draggable){
         // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
         if (!this.props.draggable) return; 
@@ -217,6 +227,15 @@ class TableHeader extends Component {
     }
   };
  
+  getTableWidth = ()=>{
+    let tableWidth = 0,offWidth = 0;//this.table.cols.length;
+    for (let index = 0; index < this.table.cols.length; index++) {
+      let da = this.table.cols[index];
+      tableWidth += parseInt((da).style.width);
+    }
+    return (tableWidth-offWidth);
+  }
+ 
   /**
    * 判断当前的target 是否是 th，如果不是，直接递归查找。
    * @memberof TableHeader
@@ -235,7 +254,7 @@ class TableHeader extends Component {
    */
   onTrMouseMove = (e) => {
     if(!this.props.dragborder && !this.props.draggable)return;
-    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
+    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex} = this.props;
     Event.stopPropagation(e); 
     let event = Event.getEvent(e);  
     if(this.props.dragborder && this.drag.option == "border"){
@@ -243,8 +262,7 @@ class TableHeader extends Component {
       let currentCols = this.table.cols[this.drag.currIndex];
       let diff = (event.x - this.drag.oldLeft); 
       let newWidth = this.drag.oldWidth + diff;
-      this.drag.newWidth = newWidth;
+      this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
-
        // if(newWidth > this.drag.minWidth){
       if(newWidth > this.minWidth){
         currentCols.style.width = newWidth +'px';
@@ -252,13 +270,22 @@ class TableHeader extends Component {
         if(this.fixedTable.cols){
             this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
         }
-        const newTableWidth = this.drag.tableWidth + diff +'px';
-        this.table.table.style.width  = newTableWidth;//改变table的width
-        if(this.table.innerTableBody){//TODO 后续需要处理此处
-          this.table.innerTableBody.style.width  = newTableWidth ;
-        }
-        let showScroll =  contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
 
+        // const newTableWidth = this.drag.tableWidth + diff;// +'px';
+        // this.table.table.style.width  = newTableWidth+'px';;//改变table的width
+        // if(this.table.innerTableBody){//TODO 后续需要处理此处
+        //   this.table.innerTableBody.style.width  = newTableWidth+'px';
+         
+        // }
+
+        let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
+        if(newDiff > 0){//缩小 
+          let lastWidth = this.lastColumWidth + newDiff;
+          this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
+          this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
+        }
+
+        let showScroll =  contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
         //表头滚动条处理
         if(headerScroll){
             if(showScroll < 0){
@@ -287,6 +314,8 @@ class TableHeader extends Component {
                 this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
           }
         }
+      }else {
+        this.drag.newWidth = this.minWidth;
       }
     }else if(this.props.draggable && this.drag.option == "draggable"){
       // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
@@ -446,7 +475,7 @@ class TableHeader extends Component {
     if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
     if(target.nodeName.toUpperCase() === "TH"){
       // target.style.border = "2px dashed rgba(5,0,0,0.25)";
-      target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
+      target.setAttribute("style","border-right:2px dashed rgba(5,0,0,0.25)");
       // target.style.backgroundColor = 'rgb(235, 236, 240)';
     }
   }

src/lib/singleSelect.js

@@ -70,7 +70,7 @@ export default function singleSelect(Table, Radio) {
                     name="table-radio" 
                     selectedValue={selectedRowIndex}
                     onChange={value => this.onRadioChange(value, record, index)}
-                    style={{width:'16px', height:'16px', display:'block', marginLeft:'4px'}}>
+                    style={{width:'14px', height:'14px', display:'block', marginLeft:'4px'}}>
                     <Radio value={index}/>
                   </Radio.RadioGroup>
           }
@@ -84,8 +84,7 @@ export default function singleSelect(Table, Radio) {
       return <Table 
               {...this.props} 
               columns={this.getDefaultColumns(columns)} 
-              data={data} 
+              data={data} />
-              height={40}/>
     }
   };
 }