feat:增加onBodyScroll回调函数
This commit is contained in:
yangchch6
commit
5bd7ea17a8
32
CHANGELOG.md
32
CHANGELOG.md
|
|
@ -1,3 +1,28 @@
|
|||
<a name="2.2.3"></a>
|
||||
## [2.2.3](https://github.com/tinper-bee/bee-table/compare/v2.2.2...v2.2.3) (2019-08-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **TableCell.js:** 修复number类型数据在末位为的显示错误的bug ([094bf16](https://github.com/tinper-bee/bee-table/commit/094bf16))
|
||||
|
||||
|
||||
|
||||
<a name="2.2.2"></a>
|
||||
## [2.2.2](https://github.com/tinper-bee/bee-table/compare/v2.2.0...v2.2.2) (2019-08-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **新增fieldType属性,包括string number currency bool link date类型:** 新增fieldType属性,包括string number currenc ([e771e8e](https://github.com/tinper-bee/bee-table/commit/e771e8e))
|
||||
|
||||
|
||||
|
||||
<a name="2.2.0"></a>
|
||||
# [2.2.0](https://github.com/tinper-bee/bee-table/compare/v2.1.14...v2.2.0) (2019-08-21)
|
||||
|
||||
|
||||
|
||||
<a name="2.1.14"></a>
|
||||
## [2.1.14](https://github.com/tinper-bee/bee-table/compare/v2.1.13...v2.1.14) (2019-08-17)
|
||||
|
||||
|
|
@ -75,7 +100,7 @@
|
|||
|
||||
|
||||
<a name="2.1.0"></a>
|
||||
# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.25...v2.1.0) (2019-06-01)
|
||||
# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.1.0) (2019-06-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -84,11 +109,6 @@
|
|||
|
||||
|
||||
|
||||
<a name="2.0.25"></a>
|
||||
## [2.0.25](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.0.25) (2019-05-24)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.24"></a>
|
||||
## [2.0.24](https://github.com/tinper-bee/bee-table/compare/v2.0.22...v2.0.24) (2019-05-22)
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ var propTypes = {
|
|||
fixed: _propTypes2["default"].oneOf([true, 'left', 'right']),
|
||||
render: _propTypes2["default"].func,
|
||||
onCellClick: _propTypes2["default"].func,
|
||||
ifshow: _propTypes2["default"].bool
|
||||
ifshow: _propTypes2["default"].bool,
|
||||
fieldType: _propTypes2["default"].string // 类型
|
||||
};
|
||||
|
||||
var Column = function (_Component) {
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||
|
||||
//行控制管理
|
||||
var ColumnManager = function () {
|
||||
function ColumnManager(columns, elements, originWidth, rowDraggAble) {
|
||||
function ColumnManager(columns, elements, originWidth, rowDraggAble, showRowNum) {
|
||||
_classCallCheck(this, ColumnManager);
|
||||
|
||||
this._cached = {};
|
||||
_initialiseProps.call(this);
|
||||
|
||||
//判断是否使用行拖拽
|
||||
if (rowDraggAble) {
|
||||
|
|
@ -50,10 +50,16 @@ var ColumnManager = function () {
|
|||
}];
|
||||
columns = dragHandleColumn.concat(columns);
|
||||
}
|
||||
columns = this.addOrderColumn(columns, showRowNum);
|
||||
|
||||
this.columns = columns || this.normalize(elements);
|
||||
|
||||
this.originWidth = originWidth;
|
||||
}
|
||||
|
||||
// 向数据列中添加一列:序号
|
||||
|
||||
|
||||
ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
|
||||
var _this = this;
|
||||
|
||||
|
|
@ -226,7 +232,8 @@ var ColumnManager = function () {
|
|||
return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]);
|
||||
};
|
||||
|
||||
ColumnManager.prototype.reset = function reset(columns, elements) {
|
||||
ColumnManager.prototype.reset = function reset(columns, elements, showRowNum) {
|
||||
columns = this.addOrderColumn(columns, showRowNum);
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this._cached = {};
|
||||
};
|
||||
|
|
@ -327,5 +334,29 @@ var ColumnManager = function () {
|
|||
return ColumnManager;
|
||||
}();
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
this._cached = {};
|
||||
|
||||
this.addOrderColumn = function (columns, showRowNum) {
|
||||
if (!showRowNum) {
|
||||
return columns;
|
||||
}
|
||||
var order = {
|
||||
dataIndex: showRowNum.key || '_index',
|
||||
key: '_index',
|
||||
fixed: showRowNum.fixed || 'left',
|
||||
width: showRowNum.width || 50,
|
||||
title: showRowNum.name || '序号'
|
||||
};
|
||||
if (columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio') {
|
||||
// 多选表格/单选表格时放在第二列,其他情况放到第一列
|
||||
columns = [order].concat(columns);
|
||||
} else {
|
||||
columns.splice(1, 0, order); // splice方法改变原数组,返回切割出的数组,此处为[]
|
||||
}
|
||||
return columns;
|
||||
};
|
||||
};
|
||||
|
||||
exports["default"] = ColumnManager;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -438,11 +438,13 @@
|
|||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.u-table-thead th .required {
|
||||
color: #F22C1D; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
|
|
@ -599,6 +601,14 @@
|
|||
.u-table .u-table-drag-hidden-cont {
|
||||
width: 100px;
|
||||
height: 40px; }
|
||||
.u-table .u-table-link {
|
||||
cursor: pointer;
|
||||
color: #0073E1; }
|
||||
.u-table .u-table-link-underline:hover {
|
||||
text-decoration: underline; }
|
||||
.u-table .u-table-currency {
|
||||
display: inline-block;
|
||||
text-align: right; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -835,6 +845,12 @@
|
|||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.body-dispaly-in-row .u-table-fieldtype {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.u-table-drag-hidden-cont {
|
||||
position: absolute;
|
||||
top: -1000px; }
|
||||
|
|
|
|||
|
|
@ -114,7 +114,10 @@ var propTypes = {
|
|||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDropRow: _propTypes2["default"].func,
|
||||
onDragRowStart: _propTypes2["default"].func
|
||||
onDragRowStart: _propTypes2["default"].func,
|
||||
bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
|
||||
headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
|
||||
showRowNum: _propTypes2["default"].object // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -161,7 +164,10 @@ var defaultProps = {
|
|||
size: 'md',
|
||||
rowDraggAble: false,
|
||||
onDropRow: function onDropRow() {},
|
||||
onDragRowStart: function onDragRowStart() {}
|
||||
onDragRowStart: function onDragRowStart() {},
|
||||
bodyDisplayInRow: true,
|
||||
headerDisplayInRow: true,
|
||||
showRowNum: false
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -292,7 +298,7 @@ var Table = function (_Component) {
|
|||
|
||||
var expandedRowKeys = [];
|
||||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble);
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
|
||||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||||
_this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -342,9 +348,16 @@ var Table = function (_Component) {
|
|||
_this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
|
||||
_this.tableUid = null;
|
||||
_this.contentTable = null;
|
||||
_this.leftColumnsLength; //左侧固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
return _this;
|
||||
}
|
||||
|
||||
Table.prototype.componentWillMount = function componentWillMount() {
|
||||
this.centerColumnsLength = this.columnManager.centerColumns().length;
|
||||
this.leftColumnsLength = this.columnManager.leftColumns().length;
|
||||
};
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
this.getTableUID();
|
||||
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||||
|
|
@ -376,12 +389,12 @@ var Table = function (_Component) {
|
|||
});
|
||||
}
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns);
|
||||
this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
|
||||
if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
|
||||
this.scrollTop = this.bodyTable.scrollTop;
|
||||
}
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
this.columnManager.reset(null, nextProps.children, this.porps.showRowNum); // 加入this.props.showRowNum参数
|
||||
}
|
||||
//适配lazyload
|
||||
if (nextProps.scrollTop > -1) {
|
||||
|
|
@ -429,6 +442,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
// 移除绑定事件,避免内存泄漏
|
||||
this.contentTable = null;
|
||||
_utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||||
_utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
|
||||
|
|
@ -663,7 +677,9 @@ var Table = function (_Component) {
|
|||
fixed: column.fixed,
|
||||
width: width,
|
||||
dataindex: column.dataIndex,
|
||||
textAlign: column.textAlign
|
||||
textAlign: column.textAlign,
|
||||
titleAlign: column.titleAlign, // 标题水平对齐方式
|
||||
required: column.required // 标题是否展示必填标志
|
||||
};
|
||||
if (column.onHeadCellClick) {
|
||||
cell.onClick = column.onHeadCellClick;
|
||||
|
|
@ -821,7 +837,7 @@ var Table = function (_Component) {
|
|||
var onRowDoubleClick = props.onRowDoubleClick;
|
||||
|
||||
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||||
var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
|
||||
var expandIconColumnIndex = props.expandIconColumnIndex;
|
||||
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
}
|
||||
|
|
@ -830,6 +846,25 @@ var Table = function (_Component) {
|
|||
var lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ? props.lazyLoad.endIndex : -1;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var isHiddenExpandIcon = void 0;
|
||||
if (props.showRowNum) {
|
||||
switch (props.showRowNum.type) {
|
||||
case 'number':
|
||||
{
|
||||
data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + 1;
|
||||
break;
|
||||
}
|
||||
case 'ascii':
|
||||
{
|
||||
data[i][props.showRowNum.key || '_index'] = String.fromCharCode(i + (props.showRowNum.base || '0').charCodeAt());
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
var record = data[i];
|
||||
var key = this.getRowKey(record, i);
|
||||
var childrenColumn = record[childrenColumnName];
|
||||
|
|
@ -929,7 +964,9 @@ var Table = function (_Component) {
|
|||
expandedIcon: props.expandedIcon,
|
||||
collapsedIcon: props.collapsedIcon,
|
||||
lazyStartIndex: lazyCurrentIndex,
|
||||
lazyEndIndex: lazyEndIndex
|
||||
lazyEndIndex: lazyEndIndex,
|
||||
centerColumnsLength: this.centerColumnsLength,
|
||||
leftColumnsLength: this.leftColumnsLength
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -1041,7 +1078,7 @@ var Table = function (_Component) {
|
|||
useFixedHeader = _props4.useFixedHeader,
|
||||
data = _props4.data;
|
||||
|
||||
var bodyStyle = _extends({}, this.props.bodyStyle);
|
||||
var bodyStyle = _extends({}, this.props.bodyStyle); // 这里为什么不写在上面?
|
||||
var headStyle = {};
|
||||
var innerBodyStyle = {};
|
||||
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
|
@ -16,6 +18,14 @@ var _objectPath = require('object-path');
|
|||
|
||||
var _objectPath2 = _interopRequireDefault(_objectPath);
|
||||
|
||||
var _i18n = require('./lib/i18n');
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
|
||||
var _tool = require('bee-locale/build/tool');
|
||||
|
||||
var _utils = require('./lib/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; }
|
||||
|
|
@ -44,6 +54,122 @@ var TableCell = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.renderLinkType = function (data, record, index) {
|
||||
var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
||||
var url = config.url,
|
||||
urlIndex = config.urlIndex,
|
||||
linkType = config.linkType,
|
||||
className = config.className,
|
||||
underline = config.underline,
|
||||
descIndex = config.descIndex,
|
||||
desc = config.desc,
|
||||
linkColor = config.linkColor;
|
||||
|
||||
var linkUrl = '';
|
||||
if (url) {
|
||||
linkUrl = url(data, record, index);
|
||||
} else if (urlIndex) {
|
||||
linkUrl = record[urlIndex];
|
||||
}
|
||||
if (linkUrl) {
|
||||
var link = function link() {
|
||||
window.open(linkUrl, linkType || '_blank');
|
||||
};
|
||||
var cls = 'u-table-link u-table-fieldtype ';
|
||||
if (className) {
|
||||
cls += className + ' ';
|
||||
}
|
||||
if (underline) {
|
||||
cls += 'u-table-link-underline ';
|
||||
}
|
||||
var title = '';
|
||||
|
||||
if (desc === true) {
|
||||
title = linkUrl;
|
||||
} else if (typeof desc === 'string') {
|
||||
title = desc;
|
||||
} else if (typeof desc === 'function') {
|
||||
title = desc(data, record, index);
|
||||
} else if (descIndex) {
|
||||
title = record[descIndex];
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
{ onClick: link, className: cls, style: { color: linkColor || '' }, title: title },
|
||||
data
|
||||
);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
_this.renderBoolType = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
var boolConfig = _extends({ trueText: locale['bool_true'], falseText: locale['bool_false'] }, config);
|
||||
if (typeof data === 'string') {
|
||||
if (data === 'false' || data === '0') {
|
||||
return boolConfig.falseText;
|
||||
}
|
||||
} else if (!data) {
|
||||
return boolConfig.falseText;
|
||||
}
|
||||
return boolConfig.trueText;
|
||||
};
|
||||
|
||||
_this.renderNumber = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
|
||||
var precision = config.precision,
|
||||
thousand = config.thousand,
|
||||
makeUp = config.makeUp,
|
||||
preSymbol = config.preSymbol,
|
||||
nextSymbol = config.nextSymbol;
|
||||
|
||||
var number = (0, _utils.formatMoney)(data, precision, thousand);
|
||||
if (makeUp === false && number !== '0' && number.indexOf('.') !== -1) {
|
||||
number = number.replace(/0*$/, '').replace(/\.$/, '');
|
||||
}
|
||||
var numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px
|
||||
var res = _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency-number' },
|
||||
number
|
||||
);
|
||||
var pre = preSymbol ? _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency-pre' },
|
||||
preSymbol
|
||||
) : null;
|
||||
var next = nextSymbol ? _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency-next' },
|
||||
nextSymbol
|
||||
) : null;
|
||||
var title = '';
|
||||
title += typeof preSymbol === 'string' ? preSymbol : '';
|
||||
title += number;
|
||||
title += typeof nextSymbol === 'string' ? nextSymbol : '';
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency u-table-fieldtype', style: { width: numberWidth }, title: title },
|
||||
pre,
|
||||
res,
|
||||
next
|
||||
);
|
||||
};
|
||||
|
||||
_this.renderDate = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var moment = config.moment,
|
||||
format = config.format;
|
||||
|
||||
if (!moment) return data;
|
||||
return moment(data).format(format || 'YYYY-MM-DD');
|
||||
};
|
||||
|
||||
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
|
||||
_this.handleClick = _this.handleClick.bind(_this);
|
||||
return _this;
|
||||
|
|
@ -63,6 +189,18 @@ var TableCell = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
// 渲染链接类型
|
||||
|
||||
|
||||
// 渲染布尔类型
|
||||
|
||||
|
||||
// 渲染整数/货币类型
|
||||
|
||||
|
||||
// 渲染时间类型
|
||||
|
||||
|
||||
TableCell.prototype.render = function render() {
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
|
|
@ -78,7 +216,11 @@ var TableCell = function (_Component) {
|
|||
lazyStartIndex = _props2.lazyStartIndex,
|
||||
lazyEndIndex = _props2.lazyEndIndex;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render;
|
||||
render = column.render,
|
||||
fieldType = column.fieldType,
|
||||
linkConfig = column.linkConfig,
|
||||
fontColor = column.fontColor,
|
||||
bgColor = column.bgColor;
|
||||
var _column$className = column.className,
|
||||
className = _column$className === undefined ? '' : _column$className;
|
||||
|
||||
|
|
@ -99,6 +241,55 @@ var TableCell = function (_Component) {
|
|||
}
|
||||
}
|
||||
|
||||
// 根据 fieldType 来渲染数据
|
||||
if (!render) {
|
||||
switch (column.fieldType) {
|
||||
case 'link':
|
||||
{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
case 'bool':
|
||||
{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':
|
||||
{
|
||||
var config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':
|
||||
{
|
||||
var _config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':
|
||||
{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
text = null;
|
||||
}
|
||||
|
|
@ -119,10 +310,12 @@ var TableCell = function (_Component) {
|
|||
if (column.fixed && !fixed) {
|
||||
className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
|
||||
}
|
||||
if (column.textAlign) {
|
||||
if (column.contentAlign) {
|
||||
className = className + (' text-' + column.contentAlign);
|
||||
} else if (column.textAlign) {
|
||||
className = className + (' text-' + column.textAlign);
|
||||
}
|
||||
if (typeof text == 'string' && bodyDisplayInRow) {
|
||||
if ((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow) {
|
||||
title = text;
|
||||
}
|
||||
if (expandIcon && expandIcon.props.expandable) {
|
||||
|
|
@ -135,8 +328,8 @@ var TableCell = function (_Component) {
|
|||
rowSpan: rowSpan,
|
||||
className: className,
|
||||
onClick: this.handleClick,
|
||||
title: title
|
||||
|
||||
title: title,
|
||||
style: { color: fontColor, backgroundColor: bgColor }
|
||||
},
|
||||
indentText,
|
||||
expandIcon,
|
||||
|
|
|
|||
|
|
@ -835,10 +835,14 @@ var TableHeader = function (_Component) {
|
|||
canDotDrag = "th-can-not-drag";
|
||||
}
|
||||
var thClassName = "" + da.className ? "" + da.className : '';
|
||||
if (da.textAlign) {
|
||||
if (da.titleAlign) {
|
||||
thClassName += " text-" + da.titleAlign + " ";
|
||||
} else if (da.textAlign) {
|
||||
thClassName += " text-" + da.textAlign + " ";
|
||||
}
|
||||
|
||||
delete da.textAlign;
|
||||
delete da.titleAlign;
|
||||
var keyTemp = {};
|
||||
//避免key为undefined
|
||||
// if(da.dataindex && da.key ===undefined ){
|
||||
|
|
@ -867,6 +871,11 @@ var TableHeader = function (_Component) {
|
|||
"th",
|
||||
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
|
||||
"data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable" }),
|
||||
da.required ? _react2["default"].createElement(
|
||||
"span",
|
||||
{ className: "required" },
|
||||
"*"
|
||||
) : '',
|
||||
da.children,
|
||||
dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
|
||||
"div",
|
||||
|
|
|
|||
|
|
@ -593,6 +593,12 @@ var TableRow = function (_Component) {
|
|||
isHiddenExpandIcon: isHiddenExpandIcon
|
||||
});
|
||||
var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
|
||||
var expandIndexInThisTable;
|
||||
if (this.props.fixed === 'right') {
|
||||
expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength - this.props.centerColumnsLength;
|
||||
} else {
|
||||
expandIndexInThisTable = expandIconColumnIndex;
|
||||
}
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0 && !showSum) {
|
||||
cells.push(_react2["default"].createElement(
|
||||
|
|
@ -604,7 +610,7 @@ var TableRow = function (_Component) {
|
|||
expandIcon
|
||||
));
|
||||
}
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex;
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIndexInThisTable;
|
||||
cells.push(_react2["default"].createElement(_TableCell2["default"], {
|
||||
clsPrefix: clsPrefix,
|
||||
record: record,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
|
@ -35,115 +35,115 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
|
||||
function dragColumn(Table) {
|
||||
|
||||
return function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
return function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
|
||||
function DragColumn(props) {
|
||||
_classCallCheck(this, DragColumn);
|
||||
function DragColumn(props) {
|
||||
_classCallCheck(this, DragColumn);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
|
||||
_this.onDragEnd = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
_this.onDragEnd = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
var _newColumns = [];
|
||||
columns.forEach(function (da, i) {
|
||||
var newDate = _extends(da, {});
|
||||
newDate.title = da.title;
|
||||
_newColumns.push(newDate);
|
||||
});
|
||||
_this.setState({
|
||||
columns: _newColumns //cloneDeep(columns)
|
||||
});
|
||||
if (_this.props.onDragEnd) {
|
||||
_this.props.onDragEnd(event, data, columns);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
var _newColumns = [];
|
||||
columns.forEach(function (da, i) {
|
||||
var newDate = _extends(da, {});
|
||||
newDate.title = da.title;
|
||||
_newColumns.push(newDate);
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
});
|
||||
_this.setState({
|
||||
columns: _newColumns //cloneDeep(columns)
|
||||
});
|
||||
if (_this.props.onDragEnd) {
|
||||
_this.props.onDragEnd(event, data, columns);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
className = _props.className,
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragEnd: this.onDragEnd,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
}));
|
||||
};
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
className = _props.className,
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragEnd: this.onDragEnd,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
}));
|
||||
};
|
||||
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -16,6 +16,8 @@ module.exports = {
|
|||
'be_equal_to': '等于',
|
||||
'not_equal_to': '不等于',
|
||||
"no_data": '暂无数据',
|
||||
"bool_true": "是",
|
||||
"bool_false": "否",
|
||||
'en-us': {
|
||||
'resetSettings': 'reset settings',
|
||||
'include': 'include',
|
||||
|
|
@ -30,7 +32,9 @@ module.exports = {
|
|||
'less_than_equal_to': 'less than equal to',
|
||||
'be_equal_to': 'be equal to',
|
||||
'not_equal_to': 'not equal to',
|
||||
"no_data": 'no data'
|
||||
"no_data": 'no data',
|
||||
"bool_true": "true",
|
||||
"bool_false": "false"
|
||||
},
|
||||
'zh-tw': {
|
||||
'resetSettings': '還原設置',
|
||||
|
|
@ -46,6 +50,8 @@ module.exports = {
|
|||
'less_than_equal to': '小於等於',
|
||||
'be_equal_to': '等於',
|
||||
'not_equal_to': '不等於',
|
||||
"no_data": '暫無數據'
|
||||
"no_data": '暫無數據',
|
||||
"bool_true": "是",
|
||||
"bool_false": "否"
|
||||
}
|
||||
};
|
||||
|
|
@ -121,11 +121,14 @@ function multiSelect(Table, Checkbox) {
|
|||
return Object.prototype.toString.call(o) == '[object Array]';
|
||||
};
|
||||
|
||||
// 实现行点击时触发多选框勾选的需求
|
||||
|
||||
|
||||
MultiSelect.prototype.render = function render() {
|
||||
var columns = this.props.columns;
|
||||
var data = this.state.data;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data, onRowClick: this.onRowClick }));
|
||||
};
|
||||
|
||||
return MultiSelect;
|
||||
|
|
@ -240,6 +243,13 @@ function multiSelect(Table, Checkbox) {
|
|||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
|
||||
this.onRowClick = function (record, index, event) {
|
||||
_this2.onCheckboxChange('', record, index)();
|
||||
if (_this2.props.onRowClick) {
|
||||
_this2.props.onRowClick(record, index, event);
|
||||
}
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -125,6 +125,11 @@ function sort(Table, Icon) {
|
|||
//点击置为“”时，动态的设置相关column的orderNum值。并排序
|
||||
|
||||
|
||||
// 默认的比较函数,即字符串比较函数
|
||||
|
||||
// 数值比较函数
|
||||
|
||||
|
||||
SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) {
|
||||
var colLen = flatColumns.length;
|
||||
var parentIndex = void 0,
|
||||
|
|
@ -335,8 +340,13 @@ function sort(Table, Icon) {
|
|||
}
|
||||
|
||||
var sortButton = void 0;
|
||||
if (column.sorter) {
|
||||
|
||||
// sorter和sortEnable均可触发排序,且sorter优先级更高
|
||||
if (column.sorter || column.sortEnable) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if (column.sortEnable && !column.sorter) {
|
||||
column.sorter = column.fieldType === 'number' ? _this3.numberSortFn(column.dataIndex) : _this3.defaultSortFn(column.dataIndex);
|
||||
}
|
||||
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
|
||||
column.orderNum = _this3.getOrderNum();
|
||||
}
|
||||
|
|
@ -369,6 +379,20 @@ function sort(Table, Icon) {
|
|||
);
|
||||
return column;
|
||||
};
|
||||
|
||||
this.defaultSortFn = function (key) {
|
||||
return function (a, b) {
|
||||
return a[key] >= b[key] ? 1 : -1;
|
||||
};
|
||||
};
|
||||
|
||||
this.numberSortFn = function (key) {
|
||||
return function (a, b) {
|
||||
var numberA = parseFloat(a[key]);
|
||||
var numberB = parseFloat(b[key]);
|
||||
return numberA >= numberB ? 1 : -1;
|
||||
};
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
|
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
|
|||
*/
|
||||
|
||||
function sortBy(arr, prop, desc) {
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
|
|||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -63,17 +63,17 @@ function compare(property) {
|
|||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@ exports.getMaxColChildrenLength = getMaxColChildrenLength;
|
|||
exports.getColChildrenLength = getColChildrenLength;
|
||||
exports.DicimalFormater = DicimalFormater;
|
||||
exports.checkDicimalInvalid = checkDicimalInvalid;
|
||||
exports.formatMoney = formatMoney;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
|
|
@ -309,6 +310,22 @@ function checkDicimalInvalid(value, precision) {
|
|||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 将数值转化为货币类型
|
||||
* @param {*} number 数值
|
||||
* @param {*} places 精度
|
||||
* @param {*} thousand 是否展示千分位
|
||||
*/
|
||||
function formatMoney(number, places, thousand) {
|
||||
number = number || 0;
|
||||
places = !isNaN(places = Math.abs(places)) ? places : 2;
|
||||
var thousandSymbol = thousand ? "," : '';
|
||||
var negative = number < 0 ? "-" : "";
|
||||
var i = (0, _parseInt2["default"])(number = Math.abs(+number || 0).toFixed(places), 10) + "";
|
||||
var j = (j = i.length) > 3 ? j % 3 : 0;
|
||||
return negative + (j ? i.substr(0, j) + thousandSymbol : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandSymbol) + (places ? '.' + Math.abs(number - i).toFixed(places).slice(2) : "");
|
||||
}
|
||||
|
||||
var Event = exports.Event = {
|
||||
addHandler: addHandler,
|
||||
removeHandler: removeHandler,
|
||||
|
|
|
|||
|
|
@ -67,6 +67,13 @@ class Demo30 extends Component {
|
|||
data
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 表体滚动加载时触发的回调函数
|
||||
* @param endIndex 可视区最后一条数据的 index 序号
|
||||
*/
|
||||
handleBodyScroll = endIndex => {
|
||||
console.log('endIndex：', endIndex);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
|
@ -79,6 +86,7 @@ class Demo30 extends Component {
|
|||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
onBodyScroll={this.handleBodyScroll}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class DemoGroup extends Component {
|
|||
render () {
|
||||
return (
|
||||
<Row>
|
||||
{[DemoArray[41]].map((child,index) => {
|
||||
{[DemoArray[39]].map((child,index) => {
|
||||
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -435,6 +435,8 @@
|
|||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.u-table-thead th .required {
|
||||
color: #F22C1D; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
|
|
@ -588,6 +590,14 @@
|
|||
.u-table .u-table-drag-hidden-cont {
|
||||
width: 100px;
|
||||
height: 40px; }
|
||||
.u-table .u-table-link {
|
||||
cursor: pointer;
|
||||
color: #0073E1; }
|
||||
.u-table .u-table-link-underline:hover {
|
||||
text-decoration: underline; }
|
||||
.u-table .u-table-currency {
|
||||
display: inline-block;
|
||||
text-align: right; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -826,6 +836,12 @@
|
|||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.body-dispaly-in-row .u-table-fieldtype {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.u-table-drag-hidden-cont {
|
||||
position: absolute;
|
||||
top: -1000px; }
|
||||
|
|
|
|||
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
64
docs/api.md
64
docs/api.md
|
|
@ -80,6 +80,8 @@ import 'bee-table/build/Table.css';
|
|||
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
|
||||
| size | 表格大小 | `sm / md / lg` | 'md' |
|
||||
| hideHeaderScroll | 表体无数据时，表头下是否显示滚动条，默认显示 | bool | false |
|
||||
| [v2.2.2新增]showRowNum | 展示序号功能，false时不展示，true时展示默认情况，可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
|
@ -127,7 +129,69 @@ import 'bee-table/build/Table.css';
|
|||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
|
||||
| mergeEndIndex | 大数据量滚动加载场景，合并表格行时，设置合并结束位置的行 index 值，设置在列 render 函数中的 props 属性上 | Number |
|
||||
| textAlign | 列对齐方式，默认是左对齐（'left、right、center'） | string |
|
||||
| [v2.2.2新增]sortEnable | 开启默认排序,根据fieldType属性确定排序规则，默认按字符串排序;优先级低于sorter属性;需配合高阶函数`multiSelect`使用 | bool | false |
|
||||
| [v2.2.2新增]fieldType | 列类型，可选`string`,`number`,`currency`,`bool`,`link` | string | 'string' |
|
||||
| [v2.2.2新增]fontColor | 列文本颜色 | string | - |
|
||||
| [v2.2.2新增]bgColor | 列背景颜色 | string | - |
|
||||
| [v2.2.2新增]titleAlign | 标题对齐方式 | 'left'\|'center'\|'right' | 'left' |
|
||||
| [v2.2.2新增]contentAlign | 内容对齐方式 | 'left'\|'center'\|'right' | 'left' |
|
||||
| [v2.2.2新增]required | 必填项,列标题展示红色星号 | bool | false |
|
||||
|
||||
#### [v2.2.2新增]fieldType
|
||||
|
||||
fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有`string`,`number`,`currency`,`bool`,`link`,`date`类型，支持自定义配置(`string`类型为默认类型)。
|
||||
|
||||
- numberConfig
|
||||
|
||||
|具体属性|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|thousand|是否展示千分符号|bool|true|
|
||||
|preSymbol|数值的前缀|string|null|
|
||||
|nextSymbol|数值的后缀|string|null|
|
||||
|
||||
- currencyConfig
|
||||
|
||||
|具体属性|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|thousand|是否展示千分符号|bool|true|
|
||||
|preSymbol|数值的前缀|string|null|
|
||||
|nextSymbol|数值的后缀|string|null|
|
||||
|precision|精度|number|2|
|
||||
|makeUp|末位是否补零|bool|true|
|
||||
|
||||
- boolConfig
|
||||
|
||||
|具体属性|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|trueText|数值为true时的展示文本|string|'是'|
|
||||
|falseText|数值为false时的展示文本|string|'否'|
|
||||
|
||||
- linkConfig
|
||||
|
||||
|具体属性|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|url|获取url的函数|function(text,record,index)|null|
|
||||
|urlIndex|数据内url字段的key值|string|null|
|
||||
|desc|鼠标hover时展示的title值，为false时不展示，true时展示链接的url，为字符串时展示字符串，为函数时展示返回值,如(text,record,index)=>'text'|bool\|string\|func|true|
|
||||
|descIndex|数据内desc字段的key值|string|null|
|
||||
|linkType|打开窗口的方式|'_self'\|'_blank'|'_blank'|
|
||||
|linkColor|链接的字体颜色|string|'#0073E1'|
|
||||
|underline|hover时是否展示下划线|bool|false|
|
||||
|className|链接的className|string|null|
|
||||
|
||||
*url和urlIndex属性至少有一个，均存在时url优先级更高*
|
||||
|
||||
*desc和descIndex属性相比，desc优先级更高*
|
||||
|
||||
- dateConfig
|
||||
|
||||
|具体属性|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|moment|传入的moment对象,必需|object|-|
|
||||
|format|渲染的时间格式|string|'YYYY-MM-DD'|
|
||||
|
||||
*需要单独安装[moment.js](http://momentjs.cn/),并将moment对象传入*
|
||||
|
||||
### 高阶函数
|
||||
Table内部封装了七个高阶组件，接收基础 Table 组件作为输入，输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.2.0",
|
||||
"version": "2.2.3",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ const propTypes = {
|
|||
]),
|
||||
render: PropTypes.func,
|
||||
onCellClick: PropTypes.func,
|
||||
ifshow:PropTypes.bool
|
||||
ifshow:PropTypes.bool,
|
||||
fieldType: PropTypes.string, // 类型
|
||||
}
|
||||
|
||||
class Column extends Component {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Icon from 'bee-icon';
|
|||
export default class ColumnManager {
|
||||
_cached = {}
|
||||
|
||||
constructor(columns, elements,originWidth,rowDraggAble) {
|
||||
constructor(columns, elements,originWidth,rowDraggAble,showRowNum) {
|
||||
//判断是否使用行拖拽
|
||||
if(rowDraggAble) {
|
||||
let dragHandleColumn =[{
|
||||
|
|
@ -23,10 +23,34 @@ export default class ColumnManager {
|
|||
}]
|
||||
columns = dragHandleColumn.concat(columns);
|
||||
}
|
||||
columns = this.addOrderColumn(columns,showRowNum);
|
||||
|
||||
this.columns = columns || this.normalize(elements);
|
||||
|
||||
this.originWidth = originWidth;
|
||||
}
|
||||
|
||||
// 向数据列中添加一列:序号
|
||||
addOrderColumn = (columns, showRowNum) => {
|
||||
if(!showRowNum){
|
||||
return columns
|
||||
}
|
||||
let order = {
|
||||
dataIndex: showRowNum.key || '_index',
|
||||
key:'_index',
|
||||
fixed:showRowNum.fixed || 'left',
|
||||
width:showRowNum.width || 50,
|
||||
title: showRowNum.name || '序号',
|
||||
}
|
||||
if(columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio'){ // 多选表格/单选表格时放在第二列,其他情况放到第一列
|
||||
columns = [order].concat(columns);
|
||||
}
|
||||
else{
|
||||
columns.splice(1,0,order); // splice方法改变原数组,返回切割出的数组,此处为[]
|
||||
}
|
||||
return columns;
|
||||
}
|
||||
|
||||
isAnyColumnsFixed() {
|
||||
return this._cache('isAnyColumnsFixed', () => {
|
||||
return this.columns.some(column => !!column.fixed);
|
||||
|
|
@ -169,7 +193,8 @@ export default class ColumnManager {
|
|||
return element && (element.type === Column || element.type === ColumnGroup);
|
||||
}
|
||||
|
||||
reset(columns, elements) {
|
||||
reset(columns, elements, showRowNum) {
|
||||
columns = this.addOrderColumn(columns,showRowNum);
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this._cached = {};
|
||||
}
|
||||
|
|
|
|||
54
src/Table.js
54
src/Table.js
|
|
@ -58,7 +58,10 @@ const propTypes = {
|
|||
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: PropTypes.bool,
|
||||
onDropRow: PropTypes.func,
|
||||
onDragRowStart: PropTypes.func
|
||||
onDragRowStart: PropTypes.func,
|
||||
bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
|
||||
headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
|
||||
showRowNum: PropTypes.object, // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -96,7 +99,10 @@ const defaultProps = {
|
|||
size: 'md',
|
||||
rowDraggAble:false,
|
||||
onDropRow: ()=>{},
|
||||
onDragRowStart: ()=>{}
|
||||
onDragRowStart: ()=>{},
|
||||
bodyDisplayInRow: true,
|
||||
headerDisplayInRow: true,
|
||||
showRowNum: false,
|
||||
};
|
||||
|
||||
class Table extends Component {
|
||||
|
|
@ -104,7 +110,7 @@ class Table extends Component {
|
|||
super(props);
|
||||
let expandedRowKeys = [];
|
||||
let rows = [...props.data];
|
||||
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble);
|
||||
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
|
||||
this.store = createStore({ currentHoverKey: null });
|
||||
this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -154,6 +160,12 @@ class Table extends Component {
|
|||
this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this);
|
||||
this.tableUid = null;
|
||||
this.contentTable = null;
|
||||
this.leftColumnsLength //左侧固定列的长度
|
||||
this.centerColumnsLength //非固定列的长度
|
||||
}
|
||||
componentWillMount() {
|
||||
this.centerColumnsLength = this.columnManager.centerColumns().length
|
||||
this.leftColumnsLength = this.columnManager.leftColumns().length
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -190,12 +202,12 @@ class Table extends Component {
|
|||
});
|
||||
}
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns);
|
||||
this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
|
||||
if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
|
||||
this.scrollTop = this.bodyTable.scrollTop;
|
||||
}
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
this.columnManager.reset(null, nextProps.children,this.porps.showRowNum); // 加入this.props.showRowNum参数
|
||||
}
|
||||
//适配lazyload
|
||||
if(nextProps.scrollTop > -1){
|
||||
|
|
@ -245,6 +257,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// 移除绑定事件,避免内存泄漏
|
||||
this.contentTable = null;
|
||||
EventUtil.removeHandler(this.contentTable,'keydown',this.onKeyDown);
|
||||
EventUtil.removeHandler(this.contentTable,'focus',this.onFocus);
|
||||
|
|
@ -473,7 +486,9 @@ class Table extends Component {
|
|||
fixed: column.fixed,
|
||||
width: width,
|
||||
dataindex:column.dataIndex,
|
||||
textAlign:column.textAlign
|
||||
textAlign:column.textAlign,
|
||||
titleAlign: column.titleAlign, // 标题水平对齐方式
|
||||
required: column.required, // 标题是否展示必填标志
|
||||
};
|
||||
if (column.onHeadCellClick) {
|
||||
cell.onClick = column.onHeadCellClick;
|
||||
|
|
@ -663,7 +678,7 @@ class Table extends Component {
|
|||
const onRowDoubleClick = props.onRowDoubleClick;
|
||||
|
||||
const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||||
const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
|
||||
const expandIconColumnIndex = props.expandIconColumnIndex
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
|
|
@ -674,6 +689,23 @@ class Table extends Component {
|
|||
const lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ?props.lazyLoad.endIndex :-1;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let isHiddenExpandIcon;
|
||||
if ( props.showRowNum ){
|
||||
switch(props.showRowNum.type){
|
||||
case 'number':{
|
||||
data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + 1;
|
||||
break;
|
||||
}
|
||||
case 'ascii': {
|
||||
data[i][props.showRowNum.key || '_index'] = String.fromCharCode(i + (props.showRowNum.base || '0').charCodeAt());
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
const record = data[i];
|
||||
const key = this.getRowKey(record, i);
|
||||
const childrenColumn = record[childrenColumnName];
|
||||
|
|
@ -778,6 +810,8 @@ class Table extends Component {
|
|||
collapsedIcon={props.collapsedIcon}
|
||||
lazyStartIndex = {lazyCurrentIndex}
|
||||
lazyEndIndex = {lazyEndIndex}
|
||||
centerColumnsLength={this.centerColumnsLength}
|
||||
leftColumnsLength={this.leftColumnsLength}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
@ -885,7 +919,7 @@ class Table extends Component {
|
|||
const { columns, fixed } = options;
|
||||
const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false,expandIconAsCell } = this.props;
|
||||
let { useFixedHeader,data } = this.props;
|
||||
const bodyStyle = { ...this.props.bodyStyle };
|
||||
const bodyStyle = { ...this.props.bodyStyle }; // 这里为什么不写在上面?
|
||||
const headStyle = {};
|
||||
const innerBodyStyle = {};
|
||||
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
|
|
@ -1194,7 +1228,7 @@ class Table extends Component {
|
|||
|
||||
handleBodyScroll(e) {
|
||||
const headTable = this.headTable;
|
||||
const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
|
||||
const { scroll = {},clsPrefix,handleScrollY, handleScrollX,onBodyScroll} = this.props;
|
||||
const {fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
|
||||
// Prevent scrollTop setter trigger onScroll event
|
||||
// http://stackoverflow.com/q/1386696
|
||||
|
|
@ -1245,7 +1279,7 @@ class Table extends Component {
|
|||
this.lastScrollTop = e.target.scrollTop;
|
||||
if(handleScrollY){
|
||||
debounce(
|
||||
handleScrollY(this.lastScrollTop,this.treeType),
|
||||
handleScrollY(this.lastScrollTop,this.treeType,onBodyScroll),
|
||||
300)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -466,6 +466,9 @@ $icon-color:#505F79;
|
|||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
.required {
|
||||
color: #F22C1D;
|
||||
}
|
||||
.bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
|
|
@ -487,6 +490,7 @@ $icon-color:#505F79;
|
|||
width: 34px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -711,6 +715,17 @@ $icon-color:#505F79;
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
.u-table-link{
|
||||
cursor: pointer;
|
||||
color: #0073E1;
|
||||
}
|
||||
.u-table-link-underline:hover{
|
||||
text-decoration:underline;
|
||||
}
|
||||
.u-table-currency{
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.u-table:focus{
|
||||
|
|
@ -1029,6 +1044,12 @@ $icon-color:#505F79;
|
|||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
.u-table-fieldtype{
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.u-table-drag-hidden-cont{
|
||||
position: absolute;
|
||||
|
|
|
|||
142
src/TableCell.js
142
src/TableCell.js
|
|
@ -1,7 +1,9 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import objectPath from 'object-path';
|
||||
|
||||
import i18n from './lib/i18n';
|
||||
import { getComponentLocale } from 'bee-locale/build/tool';
|
||||
import { formatMoney } from './lib/utils';
|
||||
const propTypes = {
|
||||
record: PropTypes.object,
|
||||
clsPrefix: PropTypes.string,
|
||||
|
|
@ -28,10 +30,95 @@ class TableCell extends Component{
|
|||
onCellClick(record, e);
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染链接类型
|
||||
renderLinkType = ( data, record, index, config={}) => {
|
||||
const { url, urlIndex, linkType, className, underline, descIndex, desc, linkColor } = config;
|
||||
let linkUrl = '';
|
||||
if(url){
|
||||
linkUrl = url(data, record, index);
|
||||
}
|
||||
else if(urlIndex){
|
||||
linkUrl = record[urlIndex];
|
||||
}
|
||||
if(linkUrl){
|
||||
let link = () => {
|
||||
window.open(linkUrl,linkType || '_blank');
|
||||
}
|
||||
let cls = 'u-table-link u-table-fieldtype ';
|
||||
if(className){
|
||||
cls += `${className} `;
|
||||
}
|
||||
if(underline){
|
||||
cls += 'u-table-link-underline ';
|
||||
}
|
||||
let title = '';
|
||||
|
||||
if(desc === true){
|
||||
title = linkUrl;
|
||||
}
|
||||
else if( typeof desc === 'string'){
|
||||
title = desc;
|
||||
}
|
||||
else if( typeof desc === 'function'){
|
||||
title = desc(data, record, index);
|
||||
}
|
||||
else if(descIndex){
|
||||
title = record[descIndex];
|
||||
}
|
||||
return <span onClick={link} className={cls} style={{color:linkColor || ''}} title={title}>{data}</span>
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// 渲染布尔类型
|
||||
renderBoolType = ( data, config={} ) => {
|
||||
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
||||
let boolConfig = {...{ trueText: locale['bool_true'], falseText: locale['bool_false']},...config};
|
||||
if(typeof data === 'string'){
|
||||
if(data === 'false' || data === '0'){
|
||||
return boolConfig.falseText;
|
||||
}
|
||||
}
|
||||
else if(!data){
|
||||
return boolConfig.falseText;
|
||||
}
|
||||
return boolConfig.trueText;
|
||||
}
|
||||
|
||||
// 渲染整数/货币类型
|
||||
renderNumber = (data, config={}, width=200) => {
|
||||
const { precision, thousand, makeUp, preSymbol, nextSymbol } = config;
|
||||
let number = formatMoney(data, precision, thousand);
|
||||
if(makeUp === false && number !== '0' && number.indexOf('.') !== -1) {
|
||||
number = number.replace(/0*$/,'').replace(/\.$/,'');
|
||||
}
|
||||
let numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px
|
||||
let res = <span className='u-table-currency-number' >{number}</span>;
|
||||
let pre = preSymbol ? <span className='u-table-currency-pre'>{preSymbol}</span> : null;
|
||||
let next = nextSymbol ? <span className='u-table-currency-next'>{nextSymbol}</span> : null;
|
||||
let title = '';
|
||||
title += typeof preSymbol === 'string' ? preSymbol : '';
|
||||
title += number;
|
||||
title += typeof nextSymbol === 'string' ? nextSymbol : '';
|
||||
return <span className='u-table-currency u-table-fieldtype' style={{width:numberWidth}} title={title}>
|
||||
{pre}
|
||||
{res}
|
||||
{next}
|
||||
</span>;
|
||||
}
|
||||
|
||||
// 渲染时间类型
|
||||
renderDate = ( data, config={}) => {
|
||||
const { moment, format } = config;
|
||||
if(!moment)return data;
|
||||
return moment(data).format(format || 'YYYY-MM-DD');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { record, indentSize, clsPrefix, indent,
|
||||
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
|
||||
const { dataIndex, render } = column;
|
||||
const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor } = column;
|
||||
let {className = ''} = column;
|
||||
|
||||
let text = objectPath.get(record, dataIndex);
|
||||
|
|
@ -49,6 +136,48 @@ class TableCell extends Component{
|
|||
}
|
||||
}
|
||||
|
||||
// 根据 fieldType 来渲染数据
|
||||
if(!render){
|
||||
switch(column.fieldType){
|
||||
case 'link':{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
case 'bool':{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':{
|
||||
let config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '', // 后置符号
|
||||
}
|
||||
text = this.renderNumber(text, {...config,...column.currencyConfig}, column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':{
|
||||
let config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '', // 后置符号
|
||||
}
|
||||
text = this.renderNumber(text, {...config,...column.numberConfig}, column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
default : {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
text = null;
|
||||
|
|
@ -72,10 +201,13 @@ class TableCell extends Component{
|
|||
if(column.fixed && !fixed){
|
||||
className = className+` ${clsPrefix}-fixed-columns-in-body`;
|
||||
}
|
||||
if(column.textAlign){
|
||||
if(column.contentAlign){
|
||||
className = className+` text-${column.contentAlign}`;
|
||||
}
|
||||
else if(column.textAlign){
|
||||
className = className+` text-${column.textAlign}`;
|
||||
}
|
||||
if(typeof text == 'string' && bodyDisplayInRow){
|
||||
if((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow){
|
||||
title = text
|
||||
}
|
||||
if(expandIcon && expandIcon.props.expandable){
|
||||
|
|
@ -88,7 +220,7 @@ class TableCell extends Component{
|
|||
className={className}
|
||||
onClick={this.handleClick}
|
||||
title={title}
|
||||
|
||||
style={{color:fontColor,backgroundColor:bgColor}}
|
||||
>
|
||||
{indentText}
|
||||
{expandIcon}
|
||||
|
|
|
|||
|
|
@ -745,10 +745,15 @@ class TableHeader extends Component {
|
|||
canDotDrag = "th-can-not-drag";
|
||||
}
|
||||
let thClassName = `${da.className}`?`${da.className}`:'';
|
||||
if(da.textAlign){
|
||||
if(da.titleAlign){
|
||||
thClassName += ` text-${da.titleAlign} `;
|
||||
}
|
||||
else if(da.textAlign){
|
||||
thClassName += ` text-${da.textAlign} `;
|
||||
}
|
||||
|
||||
delete da.textAlign;
|
||||
delete da.titleAlign;
|
||||
const keyTemp = {};
|
||||
//避免key为undefined
|
||||
// if(da.dataindex && da.key ===undefined ){
|
||||
|
|
@ -779,6 +784,7 @@ class TableHeader extends Component {
|
|||
if(!da.fixed ){
|
||||
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
|
||||
data-line-index={columIndex} data-th-width={da.width} data-type="draggable">
|
||||
{da.required ? <span className='required'>*</span>:''}
|
||||
{da.children}
|
||||
{
|
||||
dragborder && columIndex != _rowLeng? <div ref={el => (this.gap = el)} data-line-key={da.key}
|
||||
|
|
|
|||
|
|
@ -200,21 +200,21 @@ class TableRow extends Component{
|
|||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),
|
||||
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);
|
||||
|
|
@ -235,7 +235,7 @@ class TableRow extends Component{
|
|||
* 手指移开时触发
|
||||
*/
|
||||
onTouchEnd = (e) => {
|
||||
|
||||
|
||||
if(!this.canBeTouch){
|
||||
this.canBeTouch = true
|
||||
return
|
||||
|
|
@ -476,6 +476,12 @@ class TableRow extends Component{
|
|||
/>
|
||||
);
|
||||
let isExpandIconAsCell = expandIconAsCell ? `${clsPrefix}-expand-columns-in-body` : '';
|
||||
var expandIndexInThisTable
|
||||
if(this.props.fixed === 'right'){
|
||||
expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength-this.props.centerColumnsLength
|
||||
}else {
|
||||
expandIndexInThisTable = expandIconColumnIndex
|
||||
}
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0 && !showSum ) {
|
||||
cells.push(
|
||||
|
|
@ -488,7 +494,7 @@ class TableRow extends Component{
|
|||
);
|
||||
}
|
||||
const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum)
|
||||
? false : (i === expandIconColumnIndex);
|
||||
? false : (i === expandIndexInThisTable);
|
||||
cells.push(
|
||||
<TableCell
|
||||
clsPrefix={clsPrefix}
|
||||
|
|
|
|||
|
|
@ -212,8 +212,9 @@ export default function bigData(Table) {
|
|||
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
|
||||
*@param 最新一次滚动的scrollTop
|
||||
*@param treeType是否是树状表
|
||||
*@param callback表体滚动过程中触发的回调
|
||||
*/
|
||||
handleScrollY = (nextScrollTop, treeType) => {
|
||||
handleScrollY = (nextScrollTop, treeType, callback) => {
|
||||
//树表逻辑
|
||||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
|
|
@ -308,6 +309,7 @@ export default function bigData(Table) {
|
|||
this.startIndex = startIndex;
|
||||
this.endIndex = endIndex;
|
||||
this.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
}
|
||||
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
|
||||
|
|
@ -320,6 +322,7 @@ export default function bigData(Table) {
|
|||
this.startIndex = startIndex;
|
||||
this.endIndex = this.startIndex + loadCount;
|
||||
this.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
// console.log(
|
||||
// "**index**" + index,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ module.exports = {
|
|||
'be_equal_to':'等于',
|
||||
'not_equal_to':'不等于',
|
||||
"no_data":'暂无数据',
|
||||
"bool_true":"是",
|
||||
"bool_false":"否",
|
||||
'en-us': {
|
||||
'resetSettings': 'reset settings',
|
||||
'include': 'include',
|
||||
|
|
@ -29,6 +31,8 @@ module.exports = {
|
|||
'be_equal_to':'be equal to',
|
||||
'not_equal_to':'not equal to',
|
||||
"no_data":'no data',
|
||||
"bool_true":"true",
|
||||
"bool_false":"false",
|
||||
},
|
||||
'zh-tw': {
|
||||
'resetSettings': '還原設置',
|
||||
|
|
@ -45,5 +49,7 @@ module.exports = {
|
|||
'be_equal_to':'等於',
|
||||
'not_equal_to':'不等於',
|
||||
"no_data":'暫無數據',
|
||||
"bool_true":"是",
|
||||
"bool_false":"否",
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -193,10 +193,18 @@ export default function multiSelect(Table, Checkbox) {
|
|||
return _defaultColumns.concat(columns);
|
||||
}
|
||||
|
||||
// 实现行点击时触发多选框勾选的需求
|
||||
onRowClick = (record,index,event) =>{
|
||||
this.onCheckboxChange('',record, index)();
|
||||
if( this.props.onRowClick ){
|
||||
this.props.onRowClick(record,index,event);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {columns} = this.props;
|
||||
const {data} = this.state;
|
||||
return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
|
||||
return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} onRowClick={this.onRowClick}/>
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,8 +244,13 @@ export default function sort(Table, Icon) {
|
|||
}
|
||||
|
||||
let sortButton;
|
||||
if (column.sorter) {
|
||||
|
||||
// sorter和sortEnable均可触发排序,且sorter优先级更高
|
||||
if (column.sorter || column.sortEnable ) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if ( column.sortEnable && !column.sorter) {
|
||||
column.sorter = column.fieldType === 'number' ? this.numberSortFn(column.dataIndex) : this.defaultSortFn(column.dataIndex);
|
||||
}
|
||||
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
|
||||
column.orderNum = this.getOrderNum();
|
||||
}
|
||||
|
|
@ -270,6 +275,17 @@ export default function sort(Table, Icon) {
|
|||
return column;
|
||||
};
|
||||
|
||||
// 默认的比较函数,即字符串比较函数
|
||||
defaultSortFn = (key) => (a, b)=> {
|
||||
return a[key] >= b[key] ? 1 : -1;
|
||||
}
|
||||
// 数值比较函数
|
||||
numberSortFn = (key) => (a, b)=> {
|
||||
let numberA = parseFloat(a[key]);
|
||||
let numberB = parseFloat(b[key]);
|
||||
return numberA >= numberB ? 1 : -1;
|
||||
}
|
||||
|
||||
_flatToColumn(flatColumns){
|
||||
const colLen = flatColumns.length;
|
||||
let parentIndex,rsColumns = [];
|
||||
|
|
|
|||
|
|
@ -293,6 +293,23 @@ export function checkDicimalInvalid(value, precision) {
|
|||
return result;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 将数值转化为货币类型
|
||||
* @param {*} number 数值
|
||||
* @param {*} places 精度
|
||||
* @param {*} thousand 是否展示千分位
|
||||
*/
|
||||
export function formatMoney(number, places, thousand) {
|
||||
number = number || 0;
|
||||
places = !isNaN(places = Math.abs(places)) ? places : 2;
|
||||
let thousandSymbol = thousand ? "," : '';
|
||||
let negative = number < 0 ? "-" : "";
|
||||
let i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "";
|
||||
let j = (j = i.length) > 3 ? j % 3 : 0;
|
||||
return negative + (j ? i.substr(0, j) + thousandSymbol : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandSymbol) + (places ? '.' + Math.abs(number - i).toFixed(places).slice(2) : "");
|
||||
}
|
||||
|
||||
export const Event = {
|
||||
addHandler,
|
||||
removeHandler,
|
||||
|
|
|
|||
Loading…
Reference in New Issue