解决了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;
|
||||
}
|
||||
if (target.tagName === 'TR') {
|
||||
|
||||
_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
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.1.9",
|
||||
"version": "2.2.0-alpha.0",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
@ -80,6 +80,7 @@
|
|||
"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",
|
||||
|
|
|
@ -15,7 +15,7 @@ export default class ColumnManager {
|
|||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
fixed:"left",
|
||||
// fixed:"left",
|
||||
width: 49,
|
||||
render: () => {
|
||||
return <Icon type="uf-navmenu" />
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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