merge
This commit is contained in:
wanghaoo
commit
06ee2107df
|
|
@ -1,3 +1,8 @@
|
|||
<a name="1.6.18"></a>
|
||||
## [1.6.18](https://github.com/tinper-bee/bee-table/compare/v1.6.17...v1.6.18) (2018-12-19)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.16"></a>
|
||||
## [1.6.16](https://github.com/tinper-bee/bee-table/compare/v1.6.15...v1.6.16) (2018-12-17)
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
## 安装
|
||||
|
||||
[](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 |
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -328,7 +328,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;
|
||||
|
|
|
|||
|
|
@ -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"];
|
||||
|
|
@ -12,6 +12,8 @@ var _react = require("react");
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -83,13 +85,13 @@ function sum(Table) {
|
|||
var count = 0;
|
||||
data.forEach(function (da, i) {
|
||||
|
||||
var _num = parseInt(da[column.key]);
|
||||
var _num = parseFloat(da[column.key]);
|
||||
//排查字段值为NAN情况
|
||||
if (_num === _num) {
|
||||
if (_num == _num) {
|
||||
count += _num;
|
||||
}
|
||||
});
|
||||
sumdata[column.dataIndex] = count;
|
||||
sumdata[column.dataIndex] = (0, _utils.DicimalFormater)(count, 2);
|
||||
}
|
||||
if (index == 0) {
|
||||
sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex];
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ exports.ObjectAssign = ObjectAssign;
|
|||
exports.closest = closest;
|
||||
exports.getMaxColChildrenLength = getMaxColChildrenLength;
|
||||
exports.getColChildrenLength = getColChildrenLength;
|
||||
exports.DicimalFormater = DicimalFormater;
|
||||
exports.checkDicimalInvalid = checkDicimalInvalid;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
|
|
@ -195,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) {
|
||||
|
|
@ -265,6 +268,25 @@ var EventUtil = exports.EventUtil = {
|
|||
element['on' + type] = null;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 处理精度
|
||||
*/
|
||||
};function DicimalFormater(value, precision) {
|
||||
var value = value + '',
|
||||
precision = precision ? precision : 0;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
if ("-0123456789.".indexOf(value.charAt(i)) == -1) return "";
|
||||
}
|
||||
return checkDicimalInvalid(value, precision);
|
||||
};
|
||||
function checkDicimalInvalid(value, precision) {
|
||||
if (value == null || isNaN(value)) return "";
|
||||
// 浮点数总位数不能超过10位
|
||||
var digit = parseFloat(value);
|
||||
var result = (digit * Math.pow(10, precision) / Math.pow(10, precision)).toFixed(precision);
|
||||
if (result == "NaN") return "";
|
||||
return result;
|
||||
};
|
||||
|
||||
var Event = exports.Event = {
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -58,16 +58,14 @@ const columns13 = [
|
|||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
fixed:'right',
|
||||
width: 200
|
||||
}
|
||||
];
|
||||
|
||||
const data13 = [
|
||||
{ a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
|
||||
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
|
||||
{ a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
|
||||
{ a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
|
||||
{ a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
|
||||
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90.52, key: "1" },
|
||||
|
||||
];
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
|
|
@ -125,6 +123,7 @@ class Demo13 extends Component {
|
|||
data={this.state.data13}
|
||||
multiSelect={multiObj}
|
||||
sort={sortObj}
|
||||
scroll={{x:'100%',y:100}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8595,7 +8595,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;
|
||||
|
|
|
|||
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
|
|
@ -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 | () => {} |
|
||||
|
||||
#### 使用
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.6.16",
|
||||
"version": "1.6.18",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -302,6 +302,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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
|
||||
import {DicimalFormater} from "../utils";
|
||||
export default function sum(Table) {
|
||||
return class SumTable extends React.Component {
|
||||
//无状态
|
||||
|
|
@ -56,14 +57,14 @@ export default function sum(Table) {
|
|||
let count = 0;
|
||||
data.forEach((da,i)=>{
|
||||
|
||||
let _num = parseInt(da[column.key]);
|
||||
let _num = parseFloat(da[column.key]);
|
||||
//排查字段值为NAN情况
|
||||
if(_num === _num){
|
||||
if(_num == _num){
|
||||
count += _num;
|
||||
}
|
||||
|
||||
})
|
||||
sumdata[column.dataIndex] = count;
|
||||
sumdata[column.dataIndex] = DicimalFormater(count,2);
|
||||
}
|
||||
if(index == 0){
|
||||
sumdata[column.dataIndex] = "合计 "+sumdata[column.dataIndex];
|
||||
|
|
|
|||
33
src/utils.js
33
src/utils.js
|
|
@ -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){
|
||||
|
|
@ -249,6 +250,30 @@ export const EventUtil = {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 处理精度
|
||||
*/
|
||||
export function DicimalFormater(value,precision) {
|
||||
var value = value + '',
|
||||
precision = precision?precision:0;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
if ("-0123456789.".indexOf(value.charAt(i)) == -1)
|
||||
return "";
|
||||
}
|
||||
return checkDicimalInvalid(value, precision);
|
||||
};
|
||||
export function checkDicimalInvalid(value, precision) {
|
||||
if (value == null || isNaN(value))
|
||||
return "";
|
||||
// 浮点数总位数不能超过10位
|
||||
var digit = parseFloat(value);
|
||||
var result = (digit * Math.pow(10, precision) / Math.pow(10, precision))
|
||||
.toFixed(precision);
|
||||
if (result == "NaN")
|
||||
return "";
|
||||
return result;
|
||||
};
|
||||
|
||||
export const Event = {
|
||||
addHandler,
|
||||
removeHandler,
|
||||
|
|
|
|||
Loading…
Reference in New Issue