p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

merge

This commit is contained in:
wanghaoo 2018-12-19 15:52:10 +08:00
parent 765a4beff9 f12affa1f4
commit 24ca9f2f16
14 changed files with 313 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -16,13 +16,15 @@ react bee-table component for tinper-bee
* 多选
* 主子表
* 固定表头
* 交互列
* 列拖拽
* 拖拽表头进行列交换
* 拖拽调整列宽度
* 嵌套子表格
* 行、列合并
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
## 安装
[![bee-table](https://nodei.co/npm/bee-table.png)](https://npmjs.org/package/bee-table)
@ -217,7 +219,8 @@ import multiSelect from "bee-table/lib/multiSelect.js";
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| draggable | 当前表格可拖拽 | boolean | false |
| draggable | 可拖拽交换列 | boolean | false |
| dragborder | 可拖拽改变列宽 | boolean | false |
| checkMinSize | 当前表格显示最少列数 | boolean | false |

11
build/Table.css
View File

@ -330,7 +330,16 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7; }
background: #f7f7f7;
background-clip: padding-box;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none; }
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;

126
build/TableHeader.js
View File

@ -18,10 +18,6 @@ var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shallowequal = require("shallowequal");
var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _throttleDebounce = require("throttle-debounce");
var _utils = require("./utils");
@ -127,7 +123,6 @@ var TableHeader = function (_Component) {
};
_this.onLineMouseUp = function (event) {
_this.clearDragBorder(event);
};
@ -173,7 +168,7 @@ var TableHeader = function (_Component) {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
_this.currentObj = _this.props.rows[0][currentIndex];
event.dataTransfer.setDragImage(event.target, 0, 0);
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
_this.onDragOver = function (e) {
@ -324,13 +319,17 @@ var TableHeader = function (_Component) {
};
_this.minWidth = 80; //确定最小宽度就是80
_this.table = null;
_this._thead = null; //当前对象
return _this;
}
/**
* 动态绑定th line 事件
* type 为false 为增加事件
* eventSource 为false 给 th 内部的div增加事件
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
@ -362,6 +361,14 @@ var TableHeader = function (_Component) {
}
};
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
for (var i = 0; i < events.length; i++) {
var _event = events[i];
@ -378,13 +385,15 @@ var TableHeader = function (_Component) {
this.initEvent();
};
TableHeader.prototype.componentDidMount = function componentDidMount() {
this.initTable();
this.initEvent();
};
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 拖拽列宽的事件处理
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
@ -402,7 +411,8 @@ var TableHeader = function (_Component) {
};
/**
* 移除拖拽宽度的事件
* 移除当前全局事件对象
* @memberof TableHeader
*/
@ -415,13 +425,15 @@ var TableHeader = function (_Component) {
/**
* 获取table的属性存放在this.table 中。(公用方法)
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initTable = function initTable() {
if (!this.props.dragborder && !this.props.draggable) return;
var el = _reactDom2["default"].findDOMNode(this);
var tableDome = el.parentNode;
// let el = ReactDOM.findDOMNode(this);
var tableDome = this._thead.parentNode;
var table = {};
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
table.table = tableDome;
@ -445,11 +457,30 @@ var TableHeader = function (_Component) {
}
};
//---拖拽列宽代码逻辑----start-----
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
/**
* 调整列宽到区域以外的up事件
*/
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
// if (!this.props.dragborder || !this.props.draggable) return;
if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
@ -466,31 +497,40 @@ var TableHeader = function (_Component) {
//---拖拽列宽代码逻辑----start-----
/**
* 拖拽交换列的事件处理
* 调整交换列down事件
* @memberof TableHeader
*/
/**
* 调整交换列up事件
* @memberof TableHeader
*/
/**
* 添加换列的事件监听
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }];
this.thEventListen(events, '', true);
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
};
/**
* 删除换列的事件监听
*/
TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
this.thEventListen(events, 'remove', true);
};
/**
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
* @memberof TableHeader
* 开始调整交换列的事件
*/
// onDragEnter = (e) => {
// if (!this.props.draggable) return;
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@ -498,6 +538,12 @@ var TableHeader = function (_Component) {
*/
/**
* 获取当前th上的对象数据
* @param {*} e
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var th = this.getThDome(event.target);
@ -518,9 +564,9 @@ var TableHeader = function (_Component) {
};
/**
*根据拖拽，获取当前的Th属性
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns
* @returns <th />对象
* @memberof TableHeader
*/
@ -559,28 +605,21 @@ var TableHeader = function (_Component) {
var _props = this.props,
clsPrefix = _props.clsPrefix,
rowStyle = _props.rowStyle,
onDragStart = _props.onDragStart,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
draggable = _props.draggable,
dragborder = _props.dragborder,
rows = _props.rows,
filterable = _props.filterable,
onFilterRowsChange = _props.onFilterRowsChange,
onMouseDown = _props.onMouseDown,
onMouseMove = _props.onMouseMove,
onMouseUp = _props.onMouseUp,
onMouseOut = _props.onMouseOut,
contentWidthDiff = _props.contentWidthDiff,
fixed = _props.fixed,
lastShowIndex = _props.lastShowIndex,
contentTable = _props.contentTable;
lastShowIndex = _props.lastShowIndex;
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
return _react2["default"].createElement(
"thead",
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
return _this2._thead = _thead;
} }),
rows.map(function (row, index) {
return _react2["default"].createElement(
"tr",
@ -653,6 +692,5 @@ TableHeader.defaultProps = {
TableHeader.propTypes = propTypes;
exports["default"] = TableHeader;
module.exports = exports["default"];

9
build/utils.js
View File

@ -197,17 +197,18 @@ function getColChildrenLength(columns, chilrenLen) {
}
function addHandler(element, type, handler) {
var event = null;
if (element.addEventListener) {
//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
event = element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
//检测是否为IE级方法
element.attachEvent("on" + type, handler);
event = element.attachEvent("on" + type, handler);
} else {
//检测是否为DOM0级方法
element["on" + type] = handler;
event = element["on" + type] = handler;
}
return event;
}
function removeHandler(element, type, handler) {

BIN
demo/demolist/.DS_Store vendored
View File

Binary file not shown.

10
dist/demo.css vendored
View File

@ -8597,7 +8597,15 @@ ul {
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7; }
background: #f7f7f7;
background-clip: padding-box;
-moz-user-select: -moz-none;
-webkit-user-select: none;
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none; }
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

135
dist/demo.js vendored
View File

@ -12625,10 +12625,6 @@
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shallowequal = __webpack_require__(110);
var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _throttleDebounce = __webpack_require__(112);
var _utils = __webpack_require__(113);
@ -12734,7 +12730,6 @@
};
_this.onLineMouseUp = function (event) {
_this.clearDragBorder(event);
};
@ -12780,7 +12775,7 @@
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
_this.currentObj = _this.props.rows[0][currentIndex];
event.dataTransfer.setDragImage(event.target, 0, 0);
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
_this.onDragOver = function (e) {
@ -12931,13 +12926,17 @@
};
_this.minWidth = 80; //确定最小宽度就是80
_this.table = null;
_this._thead = null; //当前对象
return _this;
}
/**
* 动态绑定th line 事件
* type 为false 为增加事件
* eventSource 为false 给 th 内部的div增加事件
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
@ -12969,6 +12968,14 @@
}
};
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
for (var i = 0; i < events.length; i++) {
var _event = events[i];
@ -12985,13 +12992,15 @@
this.initEvent();
};
TableHeader.prototype.componentDidMount = function componentDidMount() {
this.initTable();
this.initEvent();
};
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 拖拽列宽的事件处理
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
@ -13009,7 +13018,8 @@
};
/**
* 移除拖拽宽度的事件
* 移除当前全局事件对象
* @memberof TableHeader
*/
@ -13022,13 +13032,15 @@
/**
* 获取table的属性存放在this.table 中。(公用方法)
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initTable = function initTable() {
if (!this.props.dragborder && !this.props.draggable) return;
var el = _reactDom2["default"].findDOMNode(this);
var tableDome = el.parentNode;
// let el = ReactDOM.findDOMNode(this);
var tableDome = this._thead.parentNode;
var table = {};
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
table.table = tableDome;
@ -13052,11 +13064,30 @@
}
};
//---拖拽列宽代码逻辑----start-----
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
/**
* 调整列宽到区域以外的up事件
*/
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
// if (!this.props.dragborder || !this.props.draggable) return;
if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
@ -13073,31 +13104,40 @@
//---拖拽列宽代码逻辑----start-----
/**
* 拖拽交换列的事件处理
* 调整交换列down事件
* @memberof TableHeader
*/
/**
* 调整交换列up事件
* @memberof TableHeader
*/
/**
* 添加换列的事件监听
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }];
this.thEventListen(events, '', true);
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
};
/**
* 删除换列的事件监听
*/
TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
this.thEventListen(events, 'remove', true);
};
/**
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
* @memberof TableHeader
* 开始调整交换列的事件
*/
// onDragEnter = (e) => {
// if (!this.props.draggable) return;
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@ -13105,6 +13145,12 @@
*/
/**
* 获取当前th上的对象数据
* @param {*} e
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var th = this.getThDome(event.target);
@ -13125,9 +13171,9 @@
};
/**
*根据拖拽，获取当前的Th属性
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns
* @returns <th />对象
* @memberof TableHeader
*/
@ -13166,28 +13212,21 @@
var _props = this.props,
clsPrefix = _props.clsPrefix,
rowStyle = _props.rowStyle,
onDragStart = _props.onDragStart,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
draggable = _props.draggable,
dragborder = _props.dragborder,
rows = _props.rows,
filterable = _props.filterable,
onFilterRowsChange = _props.onFilterRowsChange,
onMouseDown = _props.onMouseDown,
onMouseMove = _props.onMouseMove,
onMouseUp = _props.onMouseUp,
onMouseOut = _props.onMouseOut,
contentWidthDiff = _props.contentWidthDiff,
fixed = _props.fixed,
lastShowIndex = _props.lastShowIndex,
contentTable = _props.contentTable;
lastShowIndex = _props.lastShowIndex;
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
return _react2["default"].createElement(
"thead",
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
return _this2._thead = _thead;
} }),
rows.map(function (row, index) {
return _react2["default"].createElement(
"tr",
@ -13260,7 +13299,6 @@
TableHeader.propTypes = propTypes;
exports["default"] = TableHeader;
module.exports = exports["default"];
@ -13603,17 +13641,18 @@
}
function addHandler(element, type, handler) {
var event = null;
if (element.addEventListener) {
//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
event = element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
//检测是否为IE级方法
element.attachEvent("on" + type, handler);
event = element.attachEvent("on" + type, handler);
} else {
//检测是否为DOM0级方法
element["on" + type] = handler;
event = element["on" + type] = handler;
}
return event;
}
function removeHandler(element, type, handler) {

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

28
docs/mixin.md
View File

@ -9,11 +9,13 @@ Table拓展功能方法。注：拼接成复杂功能的table组件不能在rend
import multiSelect from "tinper-bee/lib/multiSelect.js";
```
### multiSelect
### multiSelect
全选功能
> 选中功能组件
#### Table新增参数
<font color="#ccc">
#### <font color="#ccc">multiSelect 废弃部分的API</font>
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
@ -24,6 +26,19 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
</font>
#### multiSelect 新增API
> data 数据中新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| _checked | 设置当前数据是否选中 | boolean | true/false |
| _disabled | 禁用当前选中数据 | boolean | true/false
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
#### 使用
@ -84,11 +99,8 @@ const SumTable = sum(Table);
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| dragborder | 显示拖拽边框 | boolean | false |
| draggable | 是否可拖拽 | boolean | false |
| onDragStart | 拖拽开始回调函数 | function | () => {} |
| onDragEnter |拖拽进入回调函数 | function | () => {} |
| onDragOver | 拖拽划过回调函数 | function | () => {} |
| dragborder | 拖拽调整列宽度 | boolean | false |
| draggable | 拖拽交换列 | boolean | false |
| onDrop | 拖拽释放回调函数 | function | () => {} |
#### 使用

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.6.16",
"version": "1.6.17",
"description": "Table ui component for react",
"keywords": [
"react",

11
src/Table.scss
View File

@ -297,6 +297,17 @@ $checkbox-height:16px;
}
th{
background: $table-head-background-color;
background-clip:padding-box;
//禁止选中文字
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;

134
src/TableHeader.js
View File

@ -1,9 +1,8 @@
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import PropTypes from "prop-types";
import shallowequal from "shallowequal";
import { throttle, debounce } from "throttle-debounce";
import { tryParseInt, ObjectAssign ,Event,EventUtil} from "./utils";
import { debounce } from "throttle-debounce";
import { Event,EventUtil} from "./utils";
import FilterType from "./FilterType";
const propTypes = {
@ -22,16 +21,20 @@ class TableHeader extends Component {
};
this.minWidth = 80;//确定最小宽度就是80
this.table = null;
this._thead = null;//当前对象
}
static defaultProps = {
contentWidthDiff: 0
};
/**
* 动态绑定th line 事件
* type 为false 为增加事件
* eventSource 为false 给 th 内部的div增加事件
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
thEventListen(events,type,eventSource){
let {ths,cols} = this.table;
@ -54,7 +57,6 @@ class TableHeader extends Component {
EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
}else{
EventUtil.addHandler(_dataSource,_event.key,_event.fun);
}
}
}
@ -62,6 +64,12 @@ class TableHeader extends Component {
}
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
bodyEventListen(events,type){
for (let i = 0; i < events.length; i++) {
const _event = events[i];
@ -78,13 +86,15 @@ class TableHeader extends Component {
this.initEvent();
}
componentDidMount(){
this.initTable();
this.initEvent();
}
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 拖拽列宽的事件处理
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
initEvent(){
let events = [
@ -103,7 +113,8 @@ class TableHeader extends Component {
}
/**
* 移除拖拽宽度的事件
* 移除当前全局事件对象
* @memberof TableHeader
*/
removeDragBorderEvent(){
let events = [
@ -117,11 +128,13 @@ class TableHeader extends Component {
/**
* 获取table的属性存放在this.table 中。(公用方法)
* @returns
* @memberof TableHeader
*/
initTable(){
if(!this.props.dragborder && !this.props.draggable)return;
let el = ReactDOM.findDOMNode(this);
let tableDome = el.parentNode;
// let el = ReactDOM.findDOMNode(this);
let tableDome = this._thead.parentNode;
let table = {};
if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
table.table = tableDome;
@ -144,8 +157,11 @@ class TableHeader extends Component {
}
}
}
//---拖拽列宽代码逻辑----start-----
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
onLineMouseMove = (e) => {
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
Event.stopPropagation(e);
@ -194,6 +210,10 @@ class TableHeader extends Component {
}
};
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
onLineMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e);
@ -209,16 +229,22 @@ class TableHeader extends Component {
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
};
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
onLineMouseUp = (event) => {
this.clearDragBorder(event);
};
/**
* 调整列宽到区域以外的up事件
*/
bodyonLineMouseMove = (event) => {
this.clearDragBorder(event);
};
clearDragBorder(){
// if (!this.props.dragborder || !this.props.draggable) return;
if(!this.drag || !this.drag.option)return;
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
@ -233,6 +259,10 @@ class TableHeader extends Component {
//---拖拽列宽代码逻辑----start-----
/**
* 调整交换列down事件
* @memberof TableHeader
*/
dragAbleMouseDown = (e) => {
// Event.stopPropagation(e);
let event = Event.getEvent(e);
@ -247,7 +277,10 @@ class TableHeader extends Component {
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
this.addDragAbleEvent(); //添加拖拽交换列的事件
}
/**
* 调整交换列up事件
* @memberof TableHeader
*/
dragAbleMouseUp = (e) => {
this.currentDome.setAttribute('draggable',false);//添加交换列效果
this.removeDragAbleEvent();
@ -256,20 +289,22 @@ class TableHeader extends Component {
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
this.initEvent();
}
/**
* 拖拽交换列的事件处理
* 添加换列的事件监听
*/
addDragAbleEvent (){
let events = [
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
// {key:'dragenter', fun:this.onDragEnter} //当被鼠标拖动的对象进入其容器范围内时触发此事件
];
this.thEventListen(events,'',true);
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
}
/**
* 删除换列的事件监听
*/
removeDragAbleEvent(){
let events = [
{key:'dragstart',fun:this.onDragStart},
@ -280,6 +315,9 @@ class TableHeader extends Component {
this.thEventListen(events,'remove',true);
}
/**
* 开始调整交换列的事件
*/
onDragStart = (e) => {
let event = Event.getEvent(e);
if (!this.props.draggable) return;
@ -292,24 +330,13 @@ class TableHeader extends Component {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
this.currentObj = this.props.rows[0][currentIndex];
event.dataTransfer.setDragImage(event.target, 0, 0);
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
onDragOver = (e) => {
event.preventDefault();
};
/**
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
* @memberof TableHeader
*/
// onDragEnter = (e) => {
// if (!this.props.draggable) return;
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
@ -325,6 +352,12 @@ class TableHeader extends Component {
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
};
/**
* 获取当前th上的对象数据
* @param {*} e
* @returns
* @memberof TableHeader
*/
getCurrentEventData(e){
let event = Event.getEvent(e);
let th = this.getThDome(event.target)
@ -343,9 +376,9 @@ class TableHeader extends Component {
}
/**
*根据拖拽，获取当前的Th属性
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns
* @returns <th />对象
* @memberof TableHeader
*/
getThDome(element){
@ -497,30 +530,14 @@ class TableHeader extends Component {
render() {
const {
clsPrefix,
rowStyle,
onDragStart,
onDragOver,
onDrop,
draggable,
dragborder,
rows,
filterable,
onFilterRowsChange,
onMouseDown,
onMouseMove,
onMouseUp,
onMouseOut,
contentWidthDiff,
fixed,
lastShowIndex,
contentTable
const { clsPrefix, rowStyle,draggable,
dragborder, rows,filterable,fixed,lastShowIndex,
} = this.props;
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return (
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' >
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
{rows.map((row, index) => (
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, columIndex, arr) => {
@ -585,5 +602,4 @@ class TableHeader extends Component {
}
TableHeader.propTypes = propTypes;
export default TableHeader;

9
src/utils.js
View File

@ -174,14 +174,15 @@ export function getColChildrenLength(columns,chilrenLen){
function addHandler(element,type,handler){
let event = null;
if(element.addEventListener){//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
event = element.addEventListener(type, handler, false);
}else if (element.attachEvent){//检测是否为IE级方法
element.attachEvent("on" + type, handler);
event = element.attachEvent("on" + type, handler);
} else {//检测是否为DOM0级方法
element["on" + type] = handler;
event = element["on" + type] = handler;
}
return event;
}
function removeHandler(element, type, handler){