解决了switch问题
This commit is contained in:
parent
d067cce97b
commit
4165143767
|
@ -42,7 +42,7 @@ var ColumnManager = function () {
|
|||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
fixed: "left",
|
||||
// fixed:"left",
|
||||
width: 49,
|
||||
render: function render() {
|
||||
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
|
||||
|
|
|
@ -209,6 +209,8 @@
|
|||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: #1565c0; }
|
||||
.u-table td .u-switch-span {
|
||||
display: inline-block; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table thead tr > th:last-child {
|
||||
|
|
|
@ -239,7 +239,7 @@ var Table = function (_Component) {
|
|||
console.log('向上拖');
|
||||
arr.splice(index2 + 1, 0, value1);
|
||||
}
|
||||
// arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
|
||||
return arr;
|
||||
};
|
||||
|
||||
|
|
|
@ -160,21 +160,28 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onTouchStart = function (e) {
|
||||
e.stopPropagation();
|
||||
var onDragRowStart = _this.props.onDragRowStart;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
while (target.tagName != 'TR') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
if (target.tagName === 'TR') {
|
||||
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
} else {
|
||||
|
||||
_this.canBeTouch = false;
|
||||
}
|
||||
};
|
||||
|
||||
_this.onTouchMove = function (e) {
|
||||
|
||||
if (!_this.canBeTouch) return;
|
||||
e.stopPropagation();
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
var touchTarget = _this.getTouchDom(event),
|
||||
|
@ -191,6 +198,13 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onTouchEnd = function (e) {
|
||||
|
||||
if (!_this.canBeTouch) {
|
||||
_this.canBeTouch = true;
|
||||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
|
@ -321,6 +335,7 @@ var TableRow = function (_Component) {
|
|||
_this.expandHeight = 0;
|
||||
_this.event = false;
|
||||
_this.cacheCurrentIndex = null;
|
||||
_this.canBeTouch = true; //受否允许拖动该行
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
|
@ -8,11 +8,12 @@
|
|||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Switch from 'bee-switch';
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "系统权限", dataIndex: "c", key: "c", width: 200,render:()=>{return(<Switch size="sm" />)}},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -194,6 +194,8 @@
|
|||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: #1565c0; }
|
||||
.u-table td .u-switch-span {
|
||||
display: inline-block; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table thead tr > th:last-child {
|
||||
|
|
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
187
package.json
187
package.json
|
@ -1,96 +1,97 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.1.9",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
"name": "bee-table",
|
||||
"version": "2.2.0-alpha.0",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
"engines": {
|
||||
"node": ">=6.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-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "1.1.2",
|
||||
"bee-locale": "0.0.14",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.14",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"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-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^3.0.2",
|
||||
"bee-switch": "^2.0.6",
|
||||
"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": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
},
|
||||
"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-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "1.1.2",
|
||||
"bee-locale": "0.0.14",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.14",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"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-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^3.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": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,8 +15,8 @@ export default class ColumnManager {
|
|||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
fixed:"left",
|
||||
width: 49,
|
||||
// fixed:"left",
|
||||
width: 49,
|
||||
render: () => {
|
||||
return <Icon type="uf-navmenu" />
|
||||
}
|
||||
|
@ -64,11 +64,11 @@ export default class ColumnManager {
|
|||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
centerColumns() {
|
||||
return this._cache('centerColumns', () => {
|
||||
return this.groupedColumns().filter(
|
||||
column => !column.fixed
|
||||
column => !column.fixed
|
||||
);
|
||||
});
|
||||
}
|
||||
|
@ -235,7 +235,7 @@ export default class ColumnManager {
|
|||
//todo 含有children的宽度计算
|
||||
_leafColumns(columns) {
|
||||
const leafColumns = [];
|
||||
|
||||
|
||||
columns.forEach(column => {
|
||||
if (!column.children) {
|
||||
|
||||
|
|
|
@ -78,6 +78,9 @@ $icon-color:#505F79;
|
|||
color: #1565c0;
|
||||
}
|
||||
}
|
||||
.u-switch-span{
|
||||
display: inline-block
|
||||
}
|
||||
}
|
||||
thead{
|
||||
tr:last-child{
|
||||
|
|
|
@ -62,6 +62,7 @@ class TableRow extends Component{
|
|||
this.expandHeight = 0;
|
||||
this.event = false;
|
||||
this.cacheCurrentIndex = null;
|
||||
this.canBeTouch = true //受否允许拖动该行
|
||||
}
|
||||
|
||||
|
||||
|
@ -194,20 +195,28 @@ class TableRow extends Component{
|
|||
* 开始调整交换行的事件
|
||||
*/
|
||||
onTouchStart = (e) => {
|
||||
e.stopPropagation()
|
||||
let {onDragRowStart} = this.props;
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
while (target.tagName != 'TR') {
|
||||
target = target.parentNode
|
||||
|
||||
if (target.tagName === 'TR') {
|
||||
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(this.currentIndex);
|
||||
}else{
|
||||
|
||||
this.canBeTouch = false
|
||||
}
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(this.currentIndex);
|
||||
|
||||
}
|
||||
|
||||
onTouchMove = (e) => {
|
||||
|
||||
if (!this.canBeTouch) return;
|
||||
e.stopPropagation()
|
||||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
let touchTarget = this.getTouchDom(event),
|
||||
|
@ -226,6 +235,13 @@ class TableRow extends Component{
|
|||
* 手指移开时触发
|
||||
*/
|
||||
onTouchEnd = (e) => {
|
||||
|
||||
if(!this.canBeTouch){
|
||||
this.canBeTouch = true
|
||||
return
|
||||
}
|
||||
|
||||
e.stopPropagation()
|
||||
let {onDragRow} = this.props;
|
||||
let event = Event.getEvent(e),
|
||||
currentKey = this.currentIndex, //拖拽行的key
|
||||
|
|
Loading…
Reference in New Issue