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

Merge branch 'dev4iuap5.0' 

# Conflicts:
#	demo/index.js
#	dist/demo.js
#	dist/demo.js.map
#	docs/api.md
This commit is contained in:
huayj 2019-08-26 17:03:35 +08:00
parent 46fa797429 3a0460c70d
commit dfedfd3b75
28 changed files with 107725 additions and 49626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/Column.js
View File

@ -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) {

37
build/ColumnManager.js
View File

@ -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'];

20
build/Table.css
View File

@ -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; }

42
build/Table.js
View File

@ -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) {
@ -376,12 +382,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 +435,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 +670,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;
@ -830,6 +839,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];
@ -1041,7 +1069,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);

203
build/TableCell.js
View File

@ -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 = 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,

11
build/TableHeader.js
View File

@ -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",

200
build/lib/dragColumn.js
View File

@ -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'];

10
build/lib/i18n.js
View File

@ -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": "否"
}
};

12
build/lib/multiSelect.js
View File

@ -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"];

26
build/lib/sort.js
View File

@ -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'];

80
build/lib/util.js
View File

@ -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;
}

17
build/lib/utils.js
View File

@ -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,

4
demo/index.js
View File

File diff suppressed because one or more lines are too long

20
dist/demo.css vendored
View File

@ -430,11 +430,13 @@
background-clip: padding-box;
-moz-user-select: -moz-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;
@ -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; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

156297
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

67
docs/api.md
View File

@ -80,6 +80,8 @@ import 'bee-table/build/Table.css';
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
| size | 表格大小 | `sm / md / lg` | 'md' |
| hideHeaderScroll | 表体无数据时，表头下是否显示滚动条，默认显示 | bool | false |
| $\color{red}{*}$showRowNum | 展示序号功能，false时不展示，true时展示默认情况，可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -125,9 +127,74 @@ import 'bee-table/build/Table.css';
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
<<<<<<< HEAD
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
| mergeEndIndex | 大数据量滚动加载场景，合并表格行时，设置合并结束位置的行 index 值，设置在列 render 函数中的 props 属性上 | Number |
=======
| textAlign | 列对齐方式，默认是左对齐（'left、right、center'） | string |
| $\color{red}{*}$sortEnable | 开启默认排序,根据fieldType属性确定排序规则，默认按字符串排序;优先级低于sorter属性;需配合高阶函数`multiSelect`使用 | bool | false |
| $\color{red}{*}$fieldType | 列类型，可选`string`,`number`,`currency`,`bool`,`link` | string | 'string' |
| $\color{red}{*}$fontColor | 列文本颜色 | string | - |
| $\color{red}{*}$bgColor | 列背景颜色 | string | - |
| $\color{red}{*}$titleAlign | 标题对齐方式 | 'left'\|'center'\|'right' | 'left' |
| $\color{red}{*}$contentAlign | 内容对齐方式 | 'left'\|'center'\|'right' | 'left' |
| $\color{red}{*}$required | 必填项,列标题展示红色星号 | bool | false |
#### [新增]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'|
>>>>>>> dev4iuap5.0
*需要单独安装[moment.js](http://momentjs.cn/),并将moment对象传入*
### 高阶函数
Table内部封装了七个高阶组件，接收基础 Table 组件作为输入，输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。

3
src/Column.js
View File

@ -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 {

29
src/ColumnManager.js
View File

@ -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 = {};
}

40
src/Table.js
View File

@ -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) {
@ -190,12 +196,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 +251,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 +480,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;
@ -674,6 +683,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];
@ -885,7 +911,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);

21
src/Table.scss
View File

@ -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
View File

@ -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 = 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}

8
src/TableHeader.js
View File

@ -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}

6
src/lib/i18n.js
View File

@ -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":"否",
}
}

10
src/lib/multiSelect.js
View File

@ -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}/>
}
};
}

18
src/lib/sort.js
View File

@ -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 = [];

17
src/lib/utils.js
View File

@ -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,