JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

[Feature]行拖拽支持触摸屏

This commit is contained in:
yangchch6 2019-06-19 13:21:15 +08:00
parent 0cddb2738f
commit b4013ecb14
14 changed files with 87070 additions and 30607 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
build/ColumnManager.js
View File

@ -18,6 +18,10 @@ var _ColumnGroup = require('./ColumnGroup');
var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);
var _beeIcon = require('bee-icon');
var _beeIcon2 = _interopRequireDefault(_beeIcon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@ -25,13 +29,27 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
//行控制管理
var ColumnManager = function () {
function ColumnManager(columns, elements, originWidth) {
function ColumnManager(columns, elements, originWidth, rowDraggAble) {
_classCallCheck(this, ColumnManager);
this._cached = {};
//判断是否使用行拖拽
if (rowDraggAble) {
var dragHandleColumn = [{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
fixed: "left",
width: 49,
render: function render() {
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
}
}];
columns = dragHandleColumn.concat(columns);
}
this.columns = columns || this.normalize(elements);
this.originWidth = originWidth;
}

4
build/Table.css
View File

@ -224,6 +224,10 @@
.u-table td {
padding: 12px 8px;
word-break: break-all; }
.u-table th.drag-handle-column .uf,
.u-table td.drag-handle-column .uf {
font-size: 12px;
line-height: 12px; }
.u-table th.text-center,
.u-table td.text-center {
text-align: center; }

2
build/Table.js
View File

@ -266,7 +266,7 @@ var Table = function (_Component) {
var expandedRowKeys = [];
var rows = [].concat(_toConsumableArray(props.data));
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble);
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
_this.firstDid = true;
if (props.defaultExpandAllRows) {

101
build/TableRow.js
View File

@ -83,16 +83,26 @@ var TableRow = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.initEvent = function () {
var events = [{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
{ key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
{ key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
_this.eventListen(events, '', _this.element);
};
_this.removeDragAbleEvent = function () {
var events = [{ key: 'dragstart', fun: _this.onDragStart }, { key: 'dragover', fun: _this.onDragOver }, { key: 'drop', fun: _this.onDrop }, { key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
{ key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
{ key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
_this.eventListen(events, 'remove', _this.element);
};
@ -138,26 +148,81 @@ var TableRow = function (_Component) {
onDragRow && onDragRow(currentKey, targetKey);
};
_this.getTouchDom = function (event) {
var currentLocation = event.changedTouches[0];
var realTarget = document.elementFromPoint(currentLocation.clientX, currentLocation.clientY);
return realTarget;
};
_this.onTouchStart = function (e) {
var event = _utils.Event.getEvent(e),
_target = _utils.Event.getTarget(event),
target = _target.parentNode;
_this.currentIndex = target.getAttribute("data-row-key");
};
_this.onTouchMove = function (e) {
var event = _utils.Event.getEvent(e);
event.preventDefault();
var touchTarget = _this.getTouchDom(event),
target = touchTarget.parentNode,
targetKey = target.getAttribute("data-row-key");
if (!targetKey || targetKey === _this.currentIndex) return;
if (target.nodeName.toUpperCase() === "TR") {
if (_this.cacheCurrentIndex !== targetKey) {
//模拟 touchenter toucheleave 事件
_this.cacheCurrentIndex && _this.synchronizeTableTr(_this.cacheCurrentIndex, null); //去掉虚线
_this.synchronizeTableTr(targetKey, true); //添加虚线
}
}
};
_this.onTouchEnd = function (e) {
var onDragRow = _this.props.onDragRow;
var event = _utils.Event.getEvent(e),
currentKey = _this.currentIndex,
//拖拽行的key
touchTarget = _this.getTouchDom(event),
//当前触摸的DOM节点
target = touchTarget.parentNode,
//目标位置的行
targetKey = target.getAttribute("data-row-key"); //目标位置的行key
if (!targetKey || targetKey === currentKey) return;
if (target.nodeName.toUpperCase() === "TR") {
_this.synchronizeTableTr(currentKey, null);
_this.synchronizeTableTr(targetKey, null);
}
onDragRow && onDragRow(currentKey, targetKey);
};
_this.synchronizeTableTrShadow = function () {
var _this$props2 = _this.props,
contentTable = _this$props2.contentTable,
index = _this$props2.index;
var _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
_table_trs = _table_cont.getBoundingClientRect(),
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
trs = cont.getBoundingClientRect(),
fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
var div = document.createElement("div");
var style = "wdith:" + (_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width) + "px";
style += "height:" + _table_trs.height + "px";
style += "classname:" + _table_cont.className;
var style = "wdith:" + (trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0)) + "px";
style += ";height:" + trs.height + "px";
style += ";classname:" + cont.className;
div.setAttribute("style", style);
return div;
};
_this.synchronizeTableTr = function (currentIndex, type) {
if (type) {
//同步 this.cacheCurrentIndex
_this.cacheCurrentIndex = currentIndex;
}
var contentTable = _this.props.contentTable;
var _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
@ -242,6 +307,7 @@ var TableRow = function (_Component) {
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
_this.expandHeight = 0;
_this.event = false;
_this.cacheCurrentIndex = null;
return _this;
}
@ -303,6 +369,21 @@ var TableRow = function (_Component) {
*/
/**
* 获取当前触摸的Dom节点
*/
/**
* 开始调整交换行的事件
*/
/**
* 手指移开时触发
*/
/**
*同步当前拖拽到阴影
* @memberof TableRow

1
demo/demolist/Demo1201.js
View File

@ -7,7 +7,6 @@
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

10
dist/demo.css vendored
View File

@ -142,6 +142,12 @@
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
.u-loading.u-loading-custom > div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); }
@keyframes line-scale {
0% {
transform: scaley(1); }
@ -203,6 +209,10 @@
.u-table td {
padding: 12px 8px;
word-break: break-all; }
.u-table th.drag-handle-column .uf,
.u-table td.drag-handle-column .uf {
font-size: 12px;
line-height: 12px; }
.u-table th.text-center,
.u-table td.text-center {
text-align: center; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

117411
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

19
src/ColumnManager.js
View File

@ -1,13 +1,28 @@
import React from 'react';
import Column from './Column';
import ColumnGroup from './ColumnGroup';
import Icon from 'bee-icon';
//行控制管理
export default class ColumnManager {
_cached = {}
constructor(columns, elements,originWidth) {
constructor(columns, elements,originWidth,rowDraggAble) {
//判断是否使用行拖拽
if(rowDraggAble) {
let dragHandleColumn =[{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
fixed:"left",
width: 49,
render: () => {
return <Icon type="uf-navmenu" />
}
}]
columns = dragHandleColumn.concat(columns);
}
this.columns = columns || this.normalize(elements);
this.originWidth = originWidth;
}

2
src/Table.js
View File

@ -102,7 +102,7 @@ class Table extends Component {
super(props);
let expandedRowKeys = [];
let rows = [...props.data];
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth);
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble);
this.store = createStore({ currentHoverKey: null });
this.firstDid = true;
if (props.defaultExpandAllRows) {

6
src/Table.scss
View File

@ -111,6 +111,12 @@ $icon-color:#505F79;
td {
padding: $vertical-padding $horizontal-padding;
word-break: break-all;
&.drag-handle-column {
.uf {
font-size: 12px;
line-height: 12px;
}
}
&.text-center{
text-align: center;
}

93
src/TableRow.js
View File

@ -60,6 +60,7 @@ class TableRow extends Component{
this.onMouseLeave = this.onMouseLeave.bind(this);
this.expandHeight = 0;
this.event = false;
this.cacheCurrentIndex = null;
}
@ -84,10 +85,13 @@ class TableRow extends Component{
*/
initEvent=()=>{
let events = [
{key:'touchstart', fun:this.onTouchStart},//手指触摸到一个 DOM 元素时触发
{key:'touchmove', fun:this.onTouchMove}, //手指在一个 DOM 元素上滑动时触发
{key:'touchend', fun:this.onTouchEnd}, //手指从一个 DOM 元素上移开时触发
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
{key:'dragenter', fun:this.onDragEnter},
{key:'dragleave', fun:this.onDragLeave},
];
@ -99,10 +103,13 @@ class TableRow extends Component{
*/
removeDragAbleEvent=()=>{
let events = [
{key:'dragstart',fun:this.onDragStart},
{key:'dragover', fun:this.onDragOver},
{key:'drop', fun:this.onDrop},
{key:'touchstart', fun:this.onTouchStart},//手指触摸到一个 DOM 元素时触发
{key:'touchmove', fun:this.onTouchMove}, //手指在一个 DOM 元素上滑动时触发
{key:'touchend', fun:this.onTouchEnd}, //手指从一个 DOM 元素上移开时触发
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
{key:'dragenter', fun:this.onDragEnter},
{key:'dragleave', fun:this.onDragLeave},
];
@ -154,14 +161,15 @@ class TableRow extends Component{
onDrop = (e) => {
let {rowDraggAble,onDragRow} = this.props;
let event = Event.getEvent(e) ,
_target = Event.getTarget(event),target = _target.parentNode;
_target = Event.getTarget(event),
target = _target.parentNode;
let currentKey = event.dataTransfer.getData("text");
let targetKey = target.getAttribute("data-row-key");
if(!targetKey || targetKey === currentKey)return;
if(target.nodeName.toUpperCase() === "TR"){
this.synchronizeTableTr(currentKey,null);
this.synchronizeTableTr(currentKey,null);
this.synchronizeTableTr(targetKey,null);
// target.setAttribute("style","");
// this.synchronizeTrStyle(this.currentIndex,false);
@ -169,6 +177,58 @@ class TableRow extends Component{
onDragRow && onDragRow(currentKey,targetKey);
};
/**
* 获取当前触摸的Dom节点
*/
getTouchDom = (event) => {
let currentLocation = event.changedTouches[0];
let realTarget = document.elementFromPoint(currentLocation.clientX, currentLocation.clientY);
return realTarget;
}
/**
* 开始调整交换行的事件
*/
onTouchStart = (e) => {
let event = Event.getEvent(e) ,
_target = Event.getTarget(event),
target = _target.parentNode;
this.currentIndex = target.getAttribute("data-row-key");
}
onTouchMove = (e) => {
let event = Event.getEvent(e);
event.preventDefault();
let touchTarget = this.getTouchDom(event),
target = touchTarget.parentNode,
targetKey = target.getAttribute("data-row-key");
if(!targetKey || targetKey === this.currentIndex)return;
if(target.nodeName.toUpperCase() === "TR"){
if(this.cacheCurrentIndex !== targetKey){ //模拟 touchenter toucheleave 事件
this.cacheCurrentIndex && this.synchronizeTableTr(this.cacheCurrentIndex,null); //去掉虚线
this.synchronizeTableTr(targetKey,true); //添加虚线
}
}
}
/**
* 手指移开时触发
*/
onTouchEnd = (e) => {
let {onDragRow} = this.props;
let event = Event.getEvent(e),
currentKey = this.currentIndex, //拖拽行的key
touchTarget = this.getTouchDom(event), //当前触摸的DOM节点
target = touchTarget.parentNode, //目标位置的行
targetKey = target.getAttribute("data-row-key"); //目标位置的行key
if(!targetKey || targetKey === currentKey)return;
if(target.nodeName.toUpperCase() === "TR"){
this.synchronizeTableTr(currentKey,null);
this.synchronizeTableTr(targetKey,null);
}
onDragRow && onDragRow(currentKey,targetKey);
}
/**
*同步当前拖拽到阴影
@ -177,15 +237,17 @@ class TableRow extends Component{
synchronizeTableTrShadow = ()=>{
let {contentTable,index} = this.props;
let _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
_table_trs = _table_cont.getBoundingClientRect(),
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
let cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
trs = cont.getBoundingClientRect(),
fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect()
let div = document.createElement("div");
let style = "wdith:"+(_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width)+"px";
style += "height:"+ _table_trs.height+"px";
style += "classname:"+ _table_cont.className;
let style = "wdith:"+(trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0))+"px";
style += ";height:"+ trs.height+"px";
style += ";classname:"+ cont.className;
div.setAttribute("style",style);
return div;
}
@ -195,6 +257,9 @@ class TableRow extends Component{
* 同步自己,也需要同步当前行的行显示
*/
synchronizeTableTr = (currentIndex,type)=>{
if(type){ //同步 this.cacheCurrentIndex
this.cacheCurrentIndex = currentIndex;
}
let {contentTable} = this.props;
let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),