feat(表格拖拽交换列、表头过滤、issues的示例): 表格拖拽交换列、表头过滤、issues的示例
表格拖拽交换列、表头过滤、issues的示例 BREAKING CHANGE: 表格拖拽交换列、表头过滤、issues的示例
This commit is contained in:
jonyshi
parent
96250f8832
commit
903d1a8763
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
176
package.json
176
package.json
|
|
@ -1,91 +1,91 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.1.3",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
"name": "bee-table",
|
||||
"version": "1.1.4",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"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"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue