feat(表格拖拽交换列、表头过滤、issues的示例): 表格拖拽交换列、表头过滤、issues的示例

表格拖拽交换列、表头过滤、issues的示例

BREAKING CHANGE: 表格拖拽交换列、表头过滤、issues的示例

build/ResizableTh.js

@@ -44,7 +44,6 @@ var ResizableTh = function (_Component) {
 
     _this.onMouseDown = function (event, data) {
       _this.mouse = true;
-      console.log(event.screenX);
       _this.dragBorderObj.startScreenX = event.screenX;
     };
 
@@ -63,7 +62,6 @@ var ResizableTh = function (_Component) {
       });
       if (!currObj) return;
       currObj.width = currObj.width ? currObj.width + endx : endx;
-      console.log("currObj.width--", currObj.width);
       _this.setState({
         columns: columns
       });
@@ -75,7 +73,6 @@ var ResizableTh = function (_Component) {
 
     _this.onMouseUp = function (event, data) {
       var endx = event.screenX - _this.dragBorderObj.startScreenX;
-      console.log("onmouseup-", endx);
       _this.mouse = false;
     };
 

build/Table.css

@@ -168,8 +168,7 @@
       position: absolute;
       top: 0px;
       left: 0px;
-      height: 10px;
+      height: 10px; }
-      border: 1px solid; }
   .u-table table {
     width: 100%;
     border-collapse: collapse;

build/Table.js

@@ -139,7 +139,6 @@ var Table = function (_Component) {
     _this.renderDragHideTable = function () {
       var columns = _this.props.columns;
 
-      debugger;
       var sum = 0;
       return _react2["default"].createElement(
         'div',
@@ -348,6 +347,9 @@ var Table = function (_Component) {
         drgHover: column.drgHover,
         width: column.width
       };
+      if (column.onHeadCellClick) {
+        cell.onClick = column.onHeadCellClick;
+      }
       if (column.children) {
         _this2.getHeaderRows(column.children, currentRow + 1, rows);
       }

build/TableHeader.js

@@ -74,10 +74,8 @@ var TableHeader = function (_Component) {
       if (_this.border) return;
       var clsPrefix = _this.props.clsPrefix;
 
-      console.log("00-----");
       if (_this.border) {
         var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft;
-        console.log("00-----", x);
       } else {
         event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap-hover';
       }
@@ -153,8 +151,9 @@ var TableHeader = function (_Component) {
           { key: index, style: rowStyle },
           row.map(function (da, i) {
             var thHover = da.drgHover ? ' ' + clsPrefix + '-thead th-drag-hover' : "";
+            delete da.drgHover;
             if (draggable) {
-              return _react2["default"].createElement('th', {
+              return _react2["default"].createElement('th', _extends({}, da, {
                 onDragStart: function onDragStart(event) {
                   _this2.onDragStart(event, da);
                 },
@@ -169,14 +168,22 @@ var TableHeader = function (_Component) {
                 },
                 draggable: draggable,
                 className: da.className + ' ' + clsPrefix + '-thead th-drag ' + thHover,
-                key: i });
+                key: da.key }));
             } else if (dragborder) {
-              console.log(da);
               return _react2["default"].createElement(
                 'th',
-                _extends({}, da, {
+                {
+                  // onDragStart={(event)=>{this.onDragGapStart(event,da)}} 
+                  // onDragOver={(event)=>{this.onDragGapOver(event,da)}}
+                  // onDrop={(event)=>{this.onDropGap(event,da)}} 
+                  // onDragEnter={(event)=>{this.onDragGapEnter(event,da)}}
+
+                  // onMouseDown={(event)=>{onMouseDown(event,da)}}
+
+                  // onMouseUp={(event)=>{onMouseUp(event,da)}}
+                  // {...da}
                   className: da.className + ' ' + clsPrefix + '-thead-th ',
-                  key: i }),
+                  key: i },
                 da.children,
                 _react2["default"].createElement('div', { ref: function ref(el) {
                     return _this2.gap = el;
@@ -196,7 +203,10 @@ var TableHeader = function (_Component) {
                   className: clsPrefix + '-thead-th-drag-gap ' })
               );
             } else {
-              return _react2["default"].createElement('th', _extends({}, da, { key: i }));
+              var th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { key: i, onClick: function onClick(event) {
+                  da.onClick(da, event);
+                } })) : _react2["default"].createElement('th', _extends({}, da, { key: i }));
+              return th;
             }
           })
         );

build/lib/dragColumn.1.js

@@ -178,7 +178,6 @@ function dragColumn(Table) {
 
     this.onMouseDown = function (event, data) {
       _this2.mouse = true;
-      console.log(event.screenX);
       _this2.dragBorderObj.startScreenX = event.screenX;
     };
 
@@ -197,7 +196,6 @@ function dragColumn(Table) {
       });
       if (!currObj) return;
       currObj.width = currObj.width ? currObj.width + endx : endx;
-      console.log("currObj.width--", currObj.width);
       _this2.setState({
         columns: columns
       });
@@ -209,7 +207,6 @@ function dragColumn(Table) {
 
     this.onMouseUp = function (event, data) {
       var endx = event.screenX - _this2.dragBorderObj.startScreenX;
-      console.log("onmouseup-", endx);
       _this2.mouse = false;
     };
   }, _temp;

build/lib/dragColumn.js

@@ -175,7 +175,6 @@ function dragColumn(Table) {
 
     this.onMouseDown = function (event, data) {
       _this2.mouse = true;
-      console.log(event.screenX);
       _this2.dragBorderObj.startScreenX = event.screenX;
     };
 
@@ -194,7 +193,6 @@ function dragColumn(Table) {
       });
       if (!currObj) return;
       currObj.width = currObj.width ? currObj.width + endx : endx;
-      console.log("currObj.width--", currObj.width);
       _this2.setState({
         columns: columns
       });
@@ -206,7 +204,6 @@ function dragColumn(Table) {
 
     this.onMouseUp = function (event, data) {
       var endx = event.screenX - _this2.dragBorderObj.startScreenX;
-      console.log("onmouseup-", endx);
       _this2.mouse = false;
     };
   }, _temp;

build/render/InputRender.js

@@ -71,7 +71,6 @@ var InputRender = function (_Component) {
       var value = e;
       _this.setState({ value: value });
     }, _this.check = function () {
-      console.log('1');
       if (typeof _this.flag === "undefined" || _this.flag) {
         _this.props.check(_this.flag, _this.obj);
         _this.setState({ editable: false });
@@ -88,9 +87,7 @@ var InputRender = function (_Component) {
     }, _this.handleKeydown = function (event) {
       if (event.keyCode == 13) {
         _this.check();
-      } else if (event.keyCode == 9) {
+      } else if (event.keyCode == 9) {}
-        debugger;
-      }
     }, _this.formatCurrency = function (money) {
       if (money && money != null && !!Number(money)) {
         money = String(money);

demo/demolist/Demo23.js

@@ -1,67 +0,0 @@
-/**
-*
-* @title 动态调整列的宽度
-* @description 点击列的表头，进行左右拖拽
-*/
-import React, { Component } from 'react';
-import Table from '../../src'; 
-import dragColumn from '../../src/lib/dragColumn';
-
-import Icon from "bee-icon";
-
-const columns23 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 200
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
-    width: 200,
-  }
-];
-
-const data23 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
-];
-
-const DragColumnTable = dragColumn(Table);
-
-const defaultProps23 = {
-  prefixCls: "bee-table"
-};
-
-class Demo23 extends Component {
-  constructor(props) {
-    super(props); 
-  }
-
-  render() {
-    return <DragColumnTable columns={columns23} data={data23} bordered
-    dragborder={true}
-    />;
-  }
-}
-Demo23.defaultProps = defaultProps23;
-
-
-export default Demo23;

package.json

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