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

表格拖拽交换列、表头过滤、issues的示例 BREAKING CHANGE: 表格拖拽交换列、表头过滤、issues的示例
tinper-bee · May 11, 2018 · 903d1a8 · 903d1a8
1 parent 96250f8
commit 903d1a8
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 297 deletions.
diff --git a/build/ResizableTh.js b/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;
     };
 

diff --git a/build/Table.css b/build/Table.css
@@ -168,8 +168,7 @@
       position: absolute;
       top: 0px;
       left: 0px;
-      height: 10px;
-      border: 1px solid; }
+      height: 10px; }
   .u-table table {
     width: 100%;
     border-collapse: collapse;

diff --git a/build/Table.js b/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);
       }

diff --git a/build/TableHeader.js b/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;
             }
           })
         );

diff --git a/build/lib/dragColumn.1.js b/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;

diff --git a/build/lib/dragColumn.js b/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;

diff --git a/build/render/InputRender.js b/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) {
-        debugger;
-      }
+      } else if (event.keyCode == 9) {}
     }, _this.formatCurrency = function (money) {
       if (money && money != null && !!Number(money)) {
         money = String(money);

diff --git a/demo/demolist/Demo23.js b/demo/demolist/Demo23.js
diff --git a/demo/index.js b/demo/index.js
diff --git a/dist/demo.js b/dist/demo.js
diff --git a/dist/demo.js.map b/dist/demo.js.map