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,91 +1,91 @@
 {
-  "name": "bee-table",
+ "name": "bee-table",
-  "version": "1.1.3",
+ "version": "1.1.4",
-  "description": "Table ui component for react",
+ "description": "Table ui component for react",
-  "keywords": [
+ "keywords": [
-    "react",
+  "react",
-    "react-component",
+  "react-component",
-    "bee-table",
+  "bee-table",
-    "iuap-design",
+  "iuap-design",
-    "tinper-bee",
+  "tinper-bee",
-    "Table"
+  "Table"
+ ],
+ "engines": {
+  "node": ">=4.0.0"
+ },
+ "jest": {
+  "moduleFileExtensions": [
+   "js",
+   "jsx"
   ],
-  "engines": {
+  "transform": {
-    "node": ">=4.0.0"
+   "^.+\\.js$": "babel-jest"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "jsx"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest"
-    }
-  },
-  "homepage": "https://github.com/tinper-bee/bee-table.git",
-  "author": "Yonyou FED",
-  "repository": "http://github.com/tinper-bee/bee-table",
-  "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
-  "license": "MIT",
-  "main": "./build/index.js",
-  "config": {
-    "port": 3000,
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "scripts": {
-    "dev": "bee-tools run start",
-    "build": "bee-tools run build",
-    "lint": "bee-tools run lint",
-    "test": "jest",
-    "chrome": "bee-tools run chrome",
-    "coveralls": "jest",
-    "browsers": "bee-tools run browsers",
-    "pub": "bee-tools run pub",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
-  },
-  "dependencies": {
-    "bee-dnd": "^1.0.2",
-    "bee-loading": "^1.0.3",
-    "bee-popover": "^1.0.2",
-    "bee-select": "^1.0.8",
-    "classnames": "^2.2.5",
-    "object-path": "^0.11.3",
-    "re-resizable": "^4.4.8",
-    "react-dnd": "^2.6.0",
-    "shallowequal": "^1.0.2",
-    "tinper-bee-core": "latest",
-    "warning": "^3.0.0"
-  },
-  "peerDependencies": {
-    "react": "^15.3.0 || ^16.0",
-    "react-dom": "^15.3.0 || ^16.0",
-    "prop-types": "15.6.0"
-  },
-  "devDependencies": {
-    "babel-jest": "^22.0.4",
-    "bee-animate": "latest",
-    "bee-button": "latest",
-    "bee-checkbox": "^1.0.8",
-    "bee-datepicker": "latest",
-    "bee-form": "^1.0.8",
-    "bee-form-control": "latest",
-    "bee-icon": "latest",
-    "bee-input-group": "latest",
-    "bee-layout": "latest",
-    "bee-pagination": "latest",
-    "bee-panel": "latest",
-    "bee-tools": "latest",
-    "bee-tooltip": "^1.0.2",
-    "chai": "^3.5.0",
-    "console-polyfill": "~0.2.1",
-    "cz-conventional-changelog": "^2.1.0",
-    "enzyme": "^2.9.1",
-    "es5-shim": "~4.1.10",
-    "jest": "^22.0.4",
-    "react": "^15.5.0",
-    "react-addons-test-utils": "^15.5.0",
-    "react-dom": "^15.5.0"
   }
-}
+ },
+ "homepage": "https://github.com/tinper-bee/bee-table.git",
+ "author": "Yonyou FED",
+ "repository": "http://github.com/tinper-bee/bee-table",
+ "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+ "license": "MIT",
+ "main": "./build/index.js",
+ "config": {
+  "port": 3000,
+  "commitizen": {
+   "path": "./node_modules/cz-conventional-changelog"
+  }
+ },
+ "scripts": {
+  "dev": "bee-tools run start",
+  "build": "bee-tools run build",
+  "lint": "bee-tools run lint",
+  "test": "jest",
+  "chrome": "bee-tools run chrome",
+  "coveralls": "jest",
+  "browsers": "bee-tools run browsers",
+  "pub": "bee-tools run pub",
+  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+ },
+ "dependencies": {
+  "bee-dnd": "^1.0.2",
+  "bee-loading": "^1.0.3",
+  "bee-popover": "^1.0.2",
+  "bee-select": "^1.0.8",
+  "classnames": "^2.2.5",
+  "object-path": "^0.11.3",
+  "re-resizable": "^4.4.8",
+  "react-dnd": "^2.6.0",
+  "shallowequal": "^1.0.2",
+  "tinper-bee-core": "latest",
+  "warning": "^3.0.0"
+ },
+ "peerDependencies": {
+  "react": "^15.3.0 || ^16.0",
+  "react-dom": "^15.3.0 || ^16.0",
+  "prop-types": "15.6.0"
+ },
+ "devDependencies": {
+  "babel-jest": "^22.0.4",
+  "bee-animate": "latest",
+  "bee-button": "latest",
+  "bee-checkbox": "^1.0.8",
+  "bee-datepicker": "latest",
+  "bee-form": "^1.0.8",
+  "bee-form-control": "latest",
+  "bee-icon": "latest",
+  "bee-input-group": "latest",
+  "bee-layout": "latest",
+  "bee-pagination": "latest",
+  "bee-panel": "latest",
+  "bee-tools": "latest",
+  "bee-tooltip": "^1.0.2",
+  "chai": "^3.5.0",
+  "console-polyfill": "~0.2.1",
+  "cz-conventional-changelog": "^2.1.0",
+  "enzyme": "^2.9.1",
+  "es5-shim": "~4.1.10",
+  "jest": "^22.0.4",
+  "react": "^15.5.0",
+  "react-addons-test-utils": "^15.5.0",
+  "react-dom": "^15.5.0"
+ }
+}