publish 1.6.17
This commit is contained in:
“jonyshi”
commit
f12affa1f4
27
CHANGELOG.md
27
CHANGELOG.md
|
|
@ -1,3 +1,28 @@
|
|||
<a name="1.6.16"></a>
|
||||
## [1.6.16](https://github.com/tinper-bee/bee-table/compare/v1.6.15...v1.6.16) (2018-12-17)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.15"></a>
|
||||
## [1.6.15](https://github.com/tinper-bee/bee-table/compare/v1.6.14...v1.6.15) (2018-12-15)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.14"></a>
|
||||
## [1.6.14](https://github.com/tinper-bee/bee-table/compare/v1.6.13...v1.6.14) (2018-12-14)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.13"></a>
|
||||
## [1.6.13](https://github.com/tinper-bee/bee-table/compare/v1.6.12...v1.6.13) (2018-12-14)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.12"></a>
|
||||
## [1.6.12](https://github.com/tinper-bee/bee-table/compare/v1.6.11...v1.6.12) (2018-12-11)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.11"></a>
|
||||
## [1.6.11](https://github.com/tinper-bee/bee-table/compare/v1.6.9...v1.6.11) (2018-12-06)
|
||||
|
||||
|
|
@ -144,7 +169,7 @@
|
|||
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ class Demo extends Component {
|
|||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
|
@ -135,6 +136,8 @@ class Demo extends Component {
|
|||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| 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
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ var FilterDropDown = function (_Component) {
|
|||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props = _this.props,
|
||||
onSelectDropdown = _this$props.onSelectDropdown,
|
||||
dataText = _this$props.dataText,
|
||||
filterDropdownType = _this$props.filterDropdownType;
|
||||
|
||||
if (onSelectDropdown) {
|
||||
|
|
@ -97,11 +96,65 @@ var FilterDropDown = function (_Component) {
|
|||
var _this$state = _this.state,
|
||||
selectValue = _this$state.selectValue,
|
||||
selectNumberValue = _this$state.selectNumberValue;
|
||||
var filterDropdownType = _this.props.filterDropdownType;
|
||||
var _this$props2 = _this.props,
|
||||
filterDropdownType = _this$props2.filterDropdownType,
|
||||
filterDropdownIncludeKeys = _this$props2.filterDropdownIncludeKeys;
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
var stringEnum = {
|
||||
LIKE: 'include',
|
||||
ULIKE: 'exclusive',
|
||||
EQ: 'equal',
|
||||
UEQ: 'unequal',
|
||||
START: 'begin',
|
||||
END: 'end'
|
||||
};
|
||||
var numberEnum = {
|
||||
GT: 'greater_than',
|
||||
GTEQ: 'great_than_equal_to',
|
||||
LT: 'less_than',
|
||||
LTEQ: 'less_than_equal_to',
|
||||
EQ: 'be_equal_to',
|
||||
UEQ: 'not_equal_to'
|
||||
};
|
||||
if (filterDropdownIncludeKeys != undefined) {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item },
|
||||
locale[stringEnum[item]]
|
||||
);
|
||||
})
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item },
|
||||
locale[numberEnum[item]]
|
||||
);
|
||||
})
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
} else {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
|
|
@ -132,12 +185,12 @@ var FilterDropDown = function (_Component) {
|
|||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'START' },
|
||||
{ key: 'RLIKE' },
|
||||
locale['begin']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'END' },
|
||||
{ key: 'LLIKE' },
|
||||
locale['end']
|
||||
)
|
||||
);
|
||||
|
|
@ -182,6 +235,7 @@ var FilterDropDown = function (_Component) {
|
|||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ var FilterType = function (_Component) {
|
|||
onFilterClear = _this$props.onFilterClear,
|
||||
dataIndex = _this$props.dataIndex;
|
||||
|
||||
if (_this.state.value !== "") {
|
||||
_this.setState({
|
||||
value: "", //清空值
|
||||
condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
|
||||
|
|
@ -75,6 +76,7 @@ var FilterType = function (_Component) {
|
|||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.changeText = function (val) {
|
||||
|
|
@ -89,7 +91,7 @@ var FilterType = function (_Component) {
|
|||
dataIndex = _this$props2.dataIndex;
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -107,7 +109,7 @@ var FilterType = function (_Component) {
|
|||
_this.setState({
|
||||
condition: item.key
|
||||
}, function () {
|
||||
onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
|
||||
_this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -183,6 +185,8 @@ var FilterType = function (_Component) {
|
|||
|
||||
_this.renderControl = function (rendertype) {
|
||||
var _this$props7 = _this.props,
|
||||
filterInputNumberOptions = _this$props7.filterInputNumberOptions,
|
||||
filterDropdownIncludeKeys = _this$props7.filterDropdownIncludeKeys,
|
||||
dataIndex = _this$props7.dataIndex,
|
||||
filterDropdown = _this$props7.filterDropdown,
|
||||
filterDropdownType = _this$props7.filterDropdownType,
|
||||
|
|
@ -213,19 +217,20 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeInputNumber2["default"], {
|
||||
_react2["default"].createElement(_beeInputNumber2["default"], _extends({}, filterInputNumberOptions, {
|
||||
className: className,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeNumber,
|
||||
iconStyle: 'one'
|
||||
}),
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
|
|
@ -234,7 +239,8 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value != 0,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dropdown':
|
||||
|
|
@ -253,7 +259,8 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'date':
|
||||
|
|
@ -275,7 +282,8 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'daterange':
|
||||
|
|
@ -300,7 +308,8 @@ var FilterType = function (_Component) {
|
|||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'bool':
|
||||
|
|
@ -312,7 +321,8 @@ var FilterType = function (_Component) {
|
|||
onChange: onChange
|
||||
}),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], { locale: locale,
|
||||
onSelectDropdown: onSelectDropdown
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -178,6 +178,8 @@
|
|||
transition: background 0.3s ease; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
overflow: hidden; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
.u-table tr {
|
||||
|
|
@ -328,7 +330,16 @@
|
|||
.u-table-thead .filter-wrap .filter-btns {
|
||||
min-width: 58px; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7; }
|
||||
background: #f7f7f7;
|
||||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
|
|
@ -608,7 +619,9 @@
|
|||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
padding: 0px 16px 0 16px;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,13 @@ var propTypes = {
|
|||
getBodyWrapper: _propTypes2["default"].func,
|
||||
children: _propTypes2["default"].node,
|
||||
draggable: _propTypes2["default"].bool,
|
||||
minColumnWidth: _propTypes2["default"].number
|
||||
minColumnWidth: _propTypes2["default"].number,
|
||||
filterable: _propTypes2["default"].bool,
|
||||
filterDelay: _propTypes2["default"].number,
|
||||
onFilterChange: _propTypes2["default"].func,
|
||||
onFilterClear: _propTypes2["default"].func,
|
||||
syncHover: _propTypes2["default"].bool
|
||||
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -132,7 +138,8 @@ var defaultProps = {
|
|||
},
|
||||
columns: [],
|
||||
minColumnWidth: 80,
|
||||
locale: {}
|
||||
locale: {},
|
||||
syncHover: true
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -501,7 +508,9 @@ var Table = function (_Component) {
|
|||
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData, //自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
|
||||
filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
|
||||
filterdropdowntype: column.filterDropdownType, //下拉的类型分为 String,Number 默认是String
|
||||
filterdropdownincludekeys: column.filterDropdownIncludeKeys, //下拉条件按照指定的keys去显示
|
||||
filterinputnumberoptions: column.filterInputNumberOptions //设置数值框内的详细属性
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -629,6 +638,11 @@ var Table = function (_Component) {
|
|||
leafColumns = this.columnManager.leafColumns();
|
||||
}
|
||||
|
||||
//合计代码如果是最后一行并且有合计功能时，最后一行为合计列
|
||||
if (i == data.length - 1 && props.showSum) {
|
||||
className = className + ' sumrow';
|
||||
}
|
||||
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||||
indent: indent,
|
||||
indentSize: props.indentSize,
|
||||
|
|
@ -1086,9 +1100,14 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
|
||||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||||
var syncHover = this.props.syncHover;
|
||||
|
||||
if (syncHover) {
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
|
|
|
|||
|
|
@ -72,7 +72,8 @@ var TableCell = function (_Component) {
|
|||
index = _props2.index,
|
||||
expandIcon = _props2.expandIcon,
|
||||
column = _props2.column,
|
||||
fixed = _props2.fixed;
|
||||
fixed = _props2.fixed,
|
||||
showSum = _props2.showSum;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render;
|
||||
var _column$className = column.className,
|
||||
|
|
@ -84,7 +85,7 @@ var TableCell = function (_Component) {
|
|||
var colSpan = void 0;
|
||||
var rowSpan = void 0;
|
||||
|
||||
if (render) {
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index);
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@ var _propTypes = require("prop-types");
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _shallowequal = require("shallowequal");
|
||||
|
||||
var _shallowequal2 = _interopRequireDefault(_shallowequal);
|
||||
|
||||
var _throttleDebounce = require("throttle-debounce");
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
|
@ -127,7 +123,6 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onLineMouseUp = function (event) {
|
||||
|
||||
_this.clearDragBorder(event);
|
||||
};
|
||||
|
||||
|
|
@ -173,7 +168,7 @@ var TableHeader = function (_Component) {
|
|||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", currentKey);
|
||||
_this.currentObj = _this.props.rows[0][currentIndex];
|
||||
event.dataTransfer.setDragImage(event.target, 0, 0);
|
||||
// event.dataTransfer.setDragImage(event.target, 0, 0);
|
||||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
|
|
@ -229,6 +224,7 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//数值输入
|
||||
case "number":
|
||||
|
|
@ -242,6 +238,8 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
, filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性
|
||||
});
|
||||
//下拉框选择
|
||||
case "dropdown":
|
||||
|
|
@ -269,12 +267,14 @@ var TableHeader = function (_Component) {
|
|||
rendertype: type,
|
||||
className: clsPrefix + " filter-dropdown",
|
||||
data: selectDataSource,
|
||||
dataIndex: dataIndex //字段
|
||||
notFoundContent: "Loading" //没有数据显示的默认字
|
||||
, dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期
|
||||
case "date":
|
||||
|
|
@ -289,6 +289,7 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期范围
|
||||
case "daterange":
|
||||
|
|
@ -303,6 +304,7 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
default:
|
||||
//不匹配类型默认文本输入
|
||||
|
|
@ -317,13 +319,17 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
_this.minWidth = 80; //确定最小宽度就是80
|
||||
_this.table = null;
|
||||
_this._thead = null; //当前对象
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态绑定th line 事件
|
||||
* type 为false 为增加事件
|
||||
* eventSource 为false 给 th 内部的div增加事件
|
||||
*
|
||||
* 动态绑定th line 事件方法
|
||||
* @param {*} events
|
||||
* @param {*} type type 为false 为增加事件
|
||||
* @param {*} eventSource 为false 给 th 内部的div增加事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
|
||||
var _table = this.table,
|
||||
|
|
@ -355,6 +361,14 @@ var TableHeader = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
|
||||
* @param {*} events
|
||||
* @param {*} type
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var _event = events[i];
|
||||
|
|
@ -371,13 +385,15 @@ var TableHeader = function (_Component) {
|
|||
this.initEvent();
|
||||
};
|
||||
|
||||
TableHeader.prototype.componentDidMount = function componentDidMount() {
|
||||
this.initTable();
|
||||
this.initEvent();
|
||||
};
|
||||
// componentDidMount(){
|
||||
// this.initTable();
|
||||
// this.initEvent();
|
||||
// }
|
||||
|
||||
/**
|
||||
* 拖拽列宽的事件处理
|
||||
* 初始化拖拽列宽的事件处理
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -395,7 +411,8 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
/**
|
||||
* 移除拖拽宽度的事件
|
||||
* 移除当前全局事件对象
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -408,13 +425,15 @@ var TableHeader = function (_Component) {
|
|||
|
||||
/**
|
||||
* 获取table的属性存放在this.table 中。(公用方法)
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
TableHeader.prototype.initTable = function initTable() {
|
||||
if (!this.props.dragborder && !this.props.draggable) return;
|
||||
var el = _reactDom2["default"].findDOMNode(this);
|
||||
var tableDome = el.parentNode;
|
||||
// let el = ReactDOM.findDOMNode(this);
|
||||
var tableDome = this._thead.parentNode;
|
||||
var table = {};
|
||||
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
|
||||
table.table = tableDome;
|
||||
|
|
@ -438,11 +457,30 @@ var TableHeader = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
//---拖拽列宽代码逻辑----start-----
|
||||
/**
|
||||
* 调整列宽的move事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 调整列宽的down事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 调整列宽的up事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 调整列宽到区域以外的up事件
|
||||
*/
|
||||
|
||||
|
||||
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
|
||||
// if (!this.props.dragborder || !this.props.draggable) return;
|
||||
if (!this.drag || !this.drag.option) return;
|
||||
var rows = this.props.rows;
|
||||
|
||||
|
|
@ -459,31 +497,40 @@ var TableHeader = function (_Component) {
|
|||
//---拖拽列宽代码逻辑----start-----
|
||||
|
||||
/**
|
||||
* 拖拽交换列的事件处理
|
||||
* 调整交换列down事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
/**
|
||||
* 调整交换列up事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 添加换列的事件监听
|
||||
*/
|
||||
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
|
||||
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: this.onDrop }];
|
||||
this.thEventListen(events, '', true);
|
||||
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除换列的事件监听
|
||||
*/
|
||||
|
||||
|
||||
TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
|
||||
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
|
||||
this.thEventListen(events, 'remove', true);
|
||||
};
|
||||
|
||||
/**
|
||||
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
// onDragEnter = (e) => {
|
||||
// if (!this.props.draggable) return;
|
||||
// if(this.drag.option === 'border'){return;}
|
||||
// let data = this.getCurrentEventData(e);
|
||||
// if (!this.currentObj || this.currentObj.key == data.key) return;
|
||||
// };
|
||||
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
|
|
@ -491,6 +538,12 @@ var TableHeader = function (_Component) {
|
|||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前th上的对象数据
|
||||
* @param {*} e
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
var th = this.getThDome(event.target);
|
||||
|
|
@ -511,9 +564,9 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
/**
|
||||
*根据拖拽，获取当前的Th属性
|
||||
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
|
||||
* @param {*} element
|
||||
* @returns
|
||||
* @returns <th />对象
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
|
@ -552,28 +605,21 @@ var TableHeader = function (_Component) {
|
|||
var _props = this.props,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
rowStyle = _props.rowStyle,
|
||||
onDragStart = _props.onDragStart,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
draggable = _props.draggable,
|
||||
dragborder = _props.dragborder,
|
||||
rows = _props.rows,
|
||||
filterable = _props.filterable,
|
||||
onFilterRowsChange = _props.onFilterRowsChange,
|
||||
onMouseDown = _props.onMouseDown,
|
||||
onMouseMove = _props.onMouseMove,
|
||||
onMouseUp = _props.onMouseUp,
|
||||
onMouseOut = _props.onMouseOut,
|
||||
contentWidthDiff = _props.contentWidthDiff,
|
||||
fixed = _props.fixed,
|
||||
lastShowIndex = _props.lastShowIndex,
|
||||
contentTable = _props.contentTable;
|
||||
lastShowIndex = _props.lastShowIndex;
|
||||
|
||||
|
||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"thead",
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
|
||||
return _this2._thead = _thead;
|
||||
} }),
|
||||
rows.map(function (row, index) {
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
|
|
@ -646,6 +692,5 @@ TableHeader.defaultProps = {
|
|||
|
||||
|
||||
TableHeader.propTypes = propTypes;
|
||||
|
||||
exports["default"] = TableHeader;
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -187,6 +187,8 @@ var TableRow = function (_Component) {
|
|||
indentSize = _props7.indentSize,
|
||||
isHiddenExpandIcon = _props7.isHiddenExpandIcon,
|
||||
fixed = _props7.fixed;
|
||||
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
||||
|
||||
|
|
@ -194,6 +196,10 @@ var TableRow = function (_Component) {
|
|||
className += ' ' + clsPrefix + '-hover';
|
||||
}
|
||||
|
||||
//判断是否为合计行
|
||||
if (className.indexOf('sumrow') > -1) {
|
||||
showSum = true;
|
||||
}
|
||||
var cells = [];
|
||||
|
||||
var expandIcon = _react2["default"].createElement(_ExpandIcon2["default"], {
|
||||
|
|
@ -207,7 +213,7 @@ var TableRow = function (_Component) {
|
|||
});
|
||||
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0) {
|
||||
if (expandIconAsCell && i === 0 && !showSum) {
|
||||
cells.push(_react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
|
|
@ -217,7 +223,7 @@ var TableRow = function (_Component) {
|
|||
expandIcon
|
||||
));
|
||||
}
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick ? false : i === expandIconColumnIndex;
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex;
|
||||
cells.push(_react2["default"].createElement(_TableCell2["default"], {
|
||||
clsPrefix: clsPrefix,
|
||||
record: record,
|
||||
|
|
@ -227,6 +233,7 @@ var TableRow = function (_Component) {
|
|||
column: columns[i],
|
||||
key: columns[i].key,
|
||||
fixed: fixed,
|
||||
showSum: showSum,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
"use strict";
|
||||
|
||||
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; };
|
||||
|
||||
exports["default"] = bigData;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require("prop-types");
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
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; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
rowsInView: _propTypes2["default"].number.isRequired
|
||||
};
|
||||
var defaultProps = {
|
||||
data: undefined,
|
||||
height: 40, //默认行高
|
||||
rowsInView: 25
|
||||
};
|
||||
|
||||
function bigData(Table) {
|
||||
return function (_Component) {
|
||||
_inherits(BigData, _Component);
|
||||
|
||||
function BigData(props) {
|
||||
_classCallCheck(this, BigData);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.state = {
|
||||
currentIndex: 0,
|
||||
scrollLeft: 0,
|
||||
scrollTop: 0
|
||||
};
|
||||
|
||||
_this.cachedRowHeight = [];
|
||||
_this.lastScrollTop = 0;
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
*获取数据区高度
|
||||
*
|
||||
*
|
||||
**/
|
||||
|
||||
BigData.prototype.getContentHeight = function getContentHeight() {
|
||||
if (!this.props.data) return 0;
|
||||
return this.getSumHeight(0, this.props.data.length);
|
||||
};
|
||||
|
||||
BigData.prototype.getSumHeight = function getSumHeight(start, end) {
|
||||
var rowHeight = this.props.rowHeight;
|
||||
|
||||
var height = 0;
|
||||
for (var i = start; i < end; i++) {
|
||||
height += this.cachedRowHeight[i] || rowHeight;
|
||||
}
|
||||
return height;
|
||||
};
|
||||
|
||||
BigData.prototype.getData = function getData() {};
|
||||
|
||||
BigData.prototype.render = function render() {
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { data: this.getData }));
|
||||
};
|
||||
|
||||
return BigData;
|
||||
}(_react.Component);
|
||||
BigData.defaultProps = defaultProps;
|
||||
BigData.propTypes = propTypes;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
158
build/lib/sum.js
158
build/lib/sum.js
|
|
@ -22,13 +22,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
//创建新列存放 “合计” 字段
|
||||
var columns2 = {
|
||||
title: "合计",
|
||||
key: "showSum",
|
||||
dataIndex: "showSum"
|
||||
};
|
||||
|
||||
function sum(Table) {
|
||||
return function (_React$Component) {
|
||||
_inherits(SumTable, _React$Component);
|
||||
|
|
@ -40,98 +33,6 @@ function sum(Table) {
|
|||
//array , tree
|
||||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
||||
|
||||
_this.currentFooter = function () {
|
||||
var data_2 = _this.props.data;
|
||||
var columns_sum = _this.props.columns.concat();
|
||||
var sumCol_index = void 0,
|
||||
sumColIndexArr = [];
|
||||
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
|
||||
for (var i = 0; i < columns_sum.length; i++) {
|
||||
if (columns_sum[i].sumCol) {
|
||||
sumColIndexArr.push(columns_sum[i].dataIndex);
|
||||
}
|
||||
}
|
||||
var obj = {};
|
||||
sumColIndexArr.forEach(function (sumCol_index) {
|
||||
|
||||
obj[sumCol_index] = 0;
|
||||
if (Array.isArray(data_2)) {
|
||||
for (var _i = 0; _i < data_2.length; _i++) {
|
||||
if (typeof data_2[_i][sumCol_index] == "number" || !isNaN(data_2[_i][sumCol_index])) {
|
||||
obj[sumCol_index] -= -data_2[_i][sumCol_index];
|
||||
} else {
|
||||
obj[sumCol_index] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
obj.key = sumCol_index + "sumData";
|
||||
});
|
||||
obj.showSum = "合计";
|
||||
obj = [obj];
|
||||
//将设置的和用户传入的合并属性
|
||||
columns_sum[0] = _extends({}, columns_sum[0], columns2);
|
||||
//除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
|
||||
columns_sum.map(function (item, index) {
|
||||
if (typeof item.render == "function" && !item.sumCol) {
|
||||
item.render = "";
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj, originWidth: true }));
|
||||
};
|
||||
|
||||
_this.currentTreeFooter = function () {
|
||||
var _this$props = _this.props,
|
||||
columns = _this$props.columns,
|
||||
data = _this$props.data;
|
||||
|
||||
var _columns = [];
|
||||
_this.getNodeItem(columns, _columns);
|
||||
var _countObj = {};
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
var _loop = function _loop() {
|
||||
var column = _step.value;
|
||||
|
||||
if (typeof column.render == "function" && !column.sumCol) {
|
||||
column.render = "";
|
||||
}
|
||||
if (column.sumCol) {
|
||||
var count = 0;
|
||||
data.forEach(function (da, i) {
|
||||
var _num = da[column.key];
|
||||
count += _num;
|
||||
});
|
||||
_countObj[column.key] = count;
|
||||
}
|
||||
};
|
||||
|
||||
for (var _iterator = _columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
_loop();
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator["return"]) {
|
||||
_iterator["return"]();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var _sumArray = [_extends({ key: "sumData", showSum: "合计" }, _countObj)];
|
||||
columns[0] = _extends({}, columns[0], columns2);
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray, originWidth: true }));
|
||||
};
|
||||
|
||||
_this.getNodeItem = function (array, newArray) {
|
||||
array.forEach(function (da, i) {
|
||||
if (da.children) {
|
||||
|
|
@ -155,35 +56,54 @@ function sum(Table) {
|
|||
return type;
|
||||
};
|
||||
|
||||
_this.setFooterRender = function () {
|
||||
var columns = _this.props.columns;
|
||||
_this.addSumData = function () {
|
||||
var _this$props = _this.props,
|
||||
_this$props$data = _this$props.data,
|
||||
data = _this$props$data === undefined ? [] : _this$props$data,
|
||||
_this$props$columns = _this$props.columns,
|
||||
columns = _this$props$columns === undefined ? [] : _this$props$columns;
|
||||
|
||||
var sumdata = {},
|
||||
newColumns = [],
|
||||
newData = [];
|
||||
if (!Array.isArray(columns)) {
|
||||
console.log("data type is error !");return;
|
||||
console.log("columns type is error !");return;
|
||||
}
|
||||
var type = _this.getTableType();
|
||||
if (type == "tree") {
|
||||
return _this.currentTreeFooter();
|
||||
if (type == 'tree') {
|
||||
_this.getNodeItem(columns, newColumns);
|
||||
} else {
|
||||
return _this.currentFooter();
|
||||
newColumns = columns;
|
||||
}
|
||||
//返回一个新的数据
|
||||
newData = data.slice();
|
||||
newColumns.forEach(function (column, index) {
|
||||
sumdata[column.dataIndex] = "";
|
||||
if (column.sumCol) {
|
||||
var count = 0;
|
||||
data.forEach(function (da, i) {
|
||||
|
||||
var _num = parseInt(da[column.key]);
|
||||
//排查字段值为NAN情况
|
||||
if (_num === _num) {
|
||||
count += _num;
|
||||
}
|
||||
});
|
||||
sumdata[column.dataIndex] = count;
|
||||
}
|
||||
if (index == 0) {
|
||||
sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex];
|
||||
}
|
||||
});
|
||||
|
||||
newData.push(sumdata);
|
||||
return newData;
|
||||
};
|
||||
|
||||
_this.tableType = "array";
|
||||
return _this;
|
||||
}
|
||||
|
||||
SumTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var columns = this.props.columns;
|
||||
|
||||
if (columns != nextProps.columns) {
|
||||
this.setFooterRender();
|
||||
}
|
||||
};
|
||||
|
||||
//合计数字列,并将计算所得数据存储到一个obj对象中
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
|
|
@ -192,11 +112,9 @@ function sum(Table) {
|
|||
|
||||
SumTable.prototype.render = function render() {
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
footerScroll: true,
|
||||
columns: this.props.columns,
|
||||
data: this.props.data,
|
||||
footer: this.setFooterRender
|
||||
// originWidth={true}
|
||||
showSum: true,
|
||||
data: this.addSumData()
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -195,17 +195,18 @@ function getColChildrenLength(columns, chilrenLen) {
|
|||
}
|
||||
|
||||
function addHandler(element, type, handler) {
|
||||
|
||||
var event = null;
|
||||
if (element.addEventListener) {
|
||||
//检测是否为DOM2级方法
|
||||
element.addEventListener(type, handler, false);
|
||||
event = element.addEventListener(type, handler, false);
|
||||
} else if (element.attachEvent) {
|
||||
//检测是否为IE级方法
|
||||
element.attachEvent("on" + type, handler);
|
||||
event = element.attachEvent("on" + type, handler);
|
||||
} else {
|
||||
//检测是否为DOM0级方法
|
||||
element["on" + type] = handler;
|
||||
event = element["on" + type] = handler;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
||||
function removeHandler(element, type, handler) {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@import "../node_modules/bee-message/build/Message.css";
|
||||
@import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
@import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
@import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
@import url(../node_modules/bee-message/build/Message.css);
|
||||
@import url(../node_modules/bee-dropdown/build/Dropdown.css);
|
||||
@import url(../node_modules/bee-input-number/build/InputNumber.css);
|
||||
@import url(../node_modules/bee-modal/build/Modal.css);
|
||||
.red {
|
||||
color: rgb(244,67,54) !important; }
|
||||
|
||||
|
|
@ -8438,6 +8439,8 @@ ul {
|
|||
transition: background 0.3s ease; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
overflow: hidden; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
.u-table tr {
|
||||
|
|
@ -8878,7 +8881,9 @@ ul {
|
|||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
padding: 0px 16px 0 16px;
|
||||
|
|
@ -10319,4 +10324,16 @@ li.rc-time-picker-panel-select-option-disabled:hover {
|
|||
.demo25 .u-table-filter-column-filter-icon {
|
||||
right: 15px; }
|
||||
|
||||
th .drop-menu .uf {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px; }
|
||||
|
||||
th:hover .uf {
|
||||
visibility: visible; }
|
||||
|
||||
.demo3 .u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
/*# sourceMappingURL=demo.css.map */
|
||||
|
|
|
|||
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
|
|
@ -54,6 +54,9 @@ import 'bee-table/build/Table.css';
|
|||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| sort | 排序的属性 | object| { mode:'single'//单列排序, backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
||||
|
|
@ -80,6 +83,8 @@ import 'bee-table/build/Table.css';
|
|||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| 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
|
||||
|
||||
{% include "mixin.md"%}
|
||||
|
||||
|
|
|
|||
11
package.json
11
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.6.11",
|
||||
"version": "1.6.17",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
|
|
@ -56,15 +56,16 @@
|
|||
"bee-loading": "^1.0.3",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^1.0.7",
|
||||
"bee-modal": "^1.0.9",
|
||||
"bee-popover": "^1.0.2",
|
||||
"bee-select": "^1.0.21",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"component-classes": "^1.2.6",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -90,8 +91,8 @@
|
|||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^15.5.0",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^15.5.0"
|
||||
"react-dom": "^16.6.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ class FilterDropDown extends Component {
|
|||
* @param {*} s 选中的selectRecord
|
||||
*/
|
||||
onSelectDropdown = (item) => {
|
||||
let { onSelectDropdown, dataText, filterDropdownType } = this.props;
|
||||
let { onSelectDropdown, filterDropdownType } = this.props;
|
||||
if (onSelectDropdown) {
|
||||
if (filterDropdownType == 'string') {
|
||||
this.setState({
|
||||
|
|
@ -69,8 +69,52 @@ class FilterDropDown extends Component {
|
|||
*/
|
||||
getMenu = () => {
|
||||
let { selectValue, selectNumberValue } = this.state;
|
||||
let { filterDropdownType } = this.props;
|
||||
let { filterDropdownType, filterDropdownIncludeKeys } = this.props;
|
||||
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
||||
let stringEnum = {
|
||||
LIKE: 'include',
|
||||
ULIKE: 'exclusive',
|
||||
EQ: 'equal',
|
||||
UEQ: 'unequal',
|
||||
START: 'begin',
|
||||
END: 'end'
|
||||
};
|
||||
let numberEnum = {
|
||||
GT: 'greater_than',
|
||||
GTEQ: 'great_than_equal_to',
|
||||
LT: 'less_than',
|
||||
LTEQ: 'less_than_equal_to',
|
||||
EQ: 'be_equal_to',
|
||||
UEQ: 'not_equal_to'
|
||||
};
|
||||
if (filterDropdownIncludeKeys != undefined) {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
{
|
||||
filterDropdownIncludeKeys.map(item => {
|
||||
return <Item key={item}>{locale[stringEnum[item]]}</Item>
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectNumberValue}
|
||||
>
|
||||
{
|
||||
filterDropdownIncludeKeys.map(item => {
|
||||
return <Item key={item}>{locale[numberEnum[item]]}</Item>
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
default:
|
||||
return <div></div>;
|
||||
}
|
||||
} else {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
|
|
@ -81,8 +125,8 @@ class FilterDropDown extends Component {
|
|||
<Item key="ULIKE">{locale['exclusive']}</Item>
|
||||
<Item key="EQ">{locale['equal']}</Item>
|
||||
<Item key="UEQ">{locale['unequal']}</Item>
|
||||
<Item key="START">{locale['begin']}</Item>
|
||||
<Item key="END">{locale['end']}</Item>
|
||||
<Item key="RLIKE">{locale['begin']}</Item>
|
||||
<Item key="LLIKE">{locale['end']}</Item>
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
|
|
@ -100,6 +144,7 @@ class FilterDropDown extends Component {
|
|||
return <div></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let { isShowCondition } = this.props;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ class FilterType extends Component {
|
|||
*/
|
||||
clearFilter = () => {
|
||||
let { onFilterClear, dataIndex } = this.props;
|
||||
if (this.state.value !== "") {
|
||||
this.setState({
|
||||
value: "",//清空值
|
||||
condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
|
||||
|
|
@ -41,6 +42,7 @@ class FilterType extends Component {
|
|||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置输入文本的值
|
||||
|
|
@ -59,7 +61,7 @@ class FilterType extends Component {
|
|||
changeTextCall = (e) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
if (e.keyCode == 13) {
|
||||
onFilterChange(dataIndex, e.target.value, this.state.condition);
|
||||
e.target.value !== "" && onFilterChange(dataIndex, e.target.value, this.state.condition);
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
|
@ -82,7 +84,7 @@ class FilterType extends Component {
|
|||
this.setState({
|
||||
condition: item.key
|
||||
}, () => {
|
||||
onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
|
||||
this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +159,7 @@ class FilterType extends Component {
|
|||
* @returns
|
||||
*/
|
||||
renderControl = (rendertype) => {
|
||||
let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
let { filterInputNumberOptions, filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
|
|
@ -177,12 +179,14 @@ class FilterType extends Component {
|
|||
isShowClear={this.state.value}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'number':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<InputNumber
|
||||
{...filterInputNumberOptions}
|
||||
className={className}
|
||||
value={this.state.value}
|
||||
onChange={this.changeNumber}
|
||||
|
|
@ -197,6 +201,7 @@ class FilterType extends Component {
|
|||
isShowClear={this.state.value != 0}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -215,6 +220,7 @@ class FilterType extends Component {
|
|||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown></div>
|
||||
case 'date':
|
||||
|
|
@ -235,6 +241,7 @@ class FilterType extends Component {
|
|||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -259,6 +266,7 @@ class FilterType extends Component {
|
|||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -270,6 +278,7 @@ class FilterType extends Component {
|
|||
/>
|
||||
<FilterDropDown locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
|
|||
27
src/Table.js
27
src/Table.js
|
|
@ -42,7 +42,13 @@ const propTypes = {
|
|||
getBodyWrapper: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
draggable: PropTypes.bool,
|
||||
minColumnWidth: PropTypes.number
|
||||
minColumnWidth: PropTypes.number,
|
||||
filterable: PropTypes.bool,
|
||||
filterDelay: PropTypes.number,
|
||||
onFilterChange: PropTypes.func,
|
||||
onFilterClear: PropTypes.func,
|
||||
syncHover: PropTypes.bool,
|
||||
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -71,7 +77,8 @@ const defaultProps = {
|
|||
emptyText: () => 'No Data',
|
||||
columns:[],
|
||||
minColumnWidth: 80,
|
||||
locale:{}
|
||||
locale:{},
|
||||
syncHover: true
|
||||
};
|
||||
|
||||
class Table extends Component {
|
||||
|
|
@ -401,7 +408,9 @@ class Table extends Component {
|
|||
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData,//自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
|
||||
filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
|
||||
filterdropdowntype: column.filterDropdownType,//下拉的类型分为 String,Number 默认是String
|
||||
filterdropdownincludekeys: column.filterDropdownIncludeKeys,//下拉条件按照指定的keys去显示
|
||||
filterinputnumberoptions: column.filterInputNumberOptions//设置数值框内的详细属性
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -494,7 +503,7 @@ class Table extends Component {
|
|||
if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
|
||||
isHiddenExpandIcon = props.haveExpandIcon(record, i);
|
||||
}
|
||||
const className = rowClassName(record, i, indent);
|
||||
let className = rowClassName(record, i, indent);
|
||||
|
||||
const onHoverProps = {};
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
|
|
@ -524,6 +533,11 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
|
||||
//合计代码如果是最后一行并且有合计功能时，最后一行为合计列
|
||||
if(i == data.length -1 && props.showSum){
|
||||
className = className + ' sumrow';
|
||||
}
|
||||
|
||||
rst.push(
|
||||
<TableRow
|
||||
indent={indent}
|
||||
|
|
@ -956,11 +970,16 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
handleRowHover(isHover, key) {
|
||||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||||
let { syncHover } = this.props;
|
||||
if(syncHover){
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const clsPrefix = props.clsPrefix;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,9 @@ $checkbox-height:16px;
|
|||
&[colspan] {
|
||||
text-align: center;
|
||||
}
|
||||
::last-child{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -695,6 +698,7 @@ $checkbox-height:16px;
|
|||
}
|
||||
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800;
|
||||
.u-dropdown-menu {
|
||||
li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ class TableCell extends Component{
|
|||
}
|
||||
render() {
|
||||
const { record, indentSize, clsPrefix, indent,
|
||||
index, expandIcon, column ,fixed} = this.props;
|
||||
index, expandIcon, column ,fixed,showSum} = this.props;
|
||||
const { dataIndex, render } = column;
|
||||
let {className = ''} = column;
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ class TableCell extends Component{
|
|||
let colSpan;
|
||||
let rowSpan;
|
||||
|
||||
if (render) {
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index);
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
|
|
|
|||
|
|
@ -433,6 +433,7 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//数值输入
|
||||
|
|
@ -448,6 +449,8 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
filterInputNumberOptions={rows[1][index]["filterinputnumberoptions"]}//设置数值框内的详细属性
|
||||
/>
|
||||
);
|
||||
//下拉框选择
|
||||
|
|
@ -475,12 +478,14 @@ class TableHeader extends Component {
|
|||
rendertype={type}
|
||||
className={`${clsPrefix} filter-dropdown`}
|
||||
data={selectDataSource}
|
||||
notFoundContent={"Loading"}//没有数据显示的默认字
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
onFocus={rows[1][index]["filterdropdownfocus"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期
|
||||
|
|
@ -497,6 +502,7 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期范围
|
||||
|
|
@ -513,6 +519,7 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -125,13 +125,17 @@ class TableRow extends Component{
|
|||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
|
||||
} = this.props;
|
||||
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
|
||||
if (this.state.hovered) {
|
||||
className += ` ${clsPrefix}-hover`;
|
||||
}
|
||||
|
||||
//判断是否为合计行
|
||||
if(className.indexOf('sumrow')>-1){
|
||||
showSum = true;
|
||||
}
|
||||
const cells = [];
|
||||
|
||||
const expandIcon = (
|
||||
|
|
@ -147,7 +151,7 @@ class TableRow extends Component{
|
|||
);
|
||||
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0) {
|
||||
if (expandIconAsCell && i === 0 && !showSum ) {
|
||||
cells.push(
|
||||
<td
|
||||
className={`${clsPrefix}-expand-icon-cell`}
|
||||
|
|
@ -157,7 +161,7 @@ class TableRow extends Component{
|
|||
</td>
|
||||
);
|
||||
}
|
||||
const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick)
|
||||
const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum)
|
||||
? false : (i === expandIconColumnIndex);
|
||||
cells.push(
|
||||
<TableCell
|
||||
|
|
@ -169,6 +173,7 @@ class TableRow extends Component{
|
|||
column={columns[i]}
|
||||
key={columns[i].key}
|
||||
fixed= {fixed}
|
||||
showSum={showSum}
|
||||
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
import React, { Component } from "react";
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
rowsInView: PropTypes.number.isRequired,
|
||||
}
|
||||
const defaultProps = {
|
||||
data: undefined,
|
||||
height: 40,//默认行高
|
||||
rowsInView:25
|
||||
}
|
||||
|
||||
export default function bigData(Table) {
|
||||
return class BigData extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentIndex: 0,
|
||||
scrollLeft: 0,
|
||||
scrollTop: 0
|
||||
};
|
||||
|
||||
this.cachedRowHeight = [];
|
||||
this.lastScrollTop = 0;
|
||||
}
|
||||
/**
|
||||
*获取数据区高度
|
||||
*
|
||||
*
|
||||
**/
|
||||
|
||||
getContentHeight() {
|
||||
if (!this.props.data) return 0;
|
||||
return this.getSumHeight(0, this.props.data.length);
|
||||
}
|
||||
|
||||
getSumHeight(start, end) {
|
||||
const { rowHeight } = this.props;
|
||||
let height = 0;
|
||||
for (let i = start; i < end; i++) {
|
||||
height += this.cachedRowHeight[i] || rowHeight;
|
||||
}
|
||||
return height;
|
||||
}
|
||||
|
||||
getData(){
|
||||
|
||||
}
|
||||
render(){
|
||||
return <Table {...this.props} data={this.getData}/>
|
||||
}
|
||||
};
|
||||
BigData.defaultProps = defaultProps;
|
||||
BigData.propTypes = propTypes;
|
||||
}
|
||||
125
src/lib/sum.js
125
src/lib/sum.js
|
|
@ -1,12 +1,5 @@
|
|||
import React from "react";
|
||||
|
||||
//创建新列存放 “合计” 字段
|
||||
let columns2 = {
|
||||
title: "合计",
|
||||
key: "showSum",
|
||||
dataIndex: "showSum"
|
||||
};
|
||||
|
||||
export default function sum(Table) {
|
||||
return class SumTable extends React.Component {
|
||||
//无状态
|
||||
|
|
@ -16,79 +9,6 @@ export default function sum(Table) {
|
|||
this.tableType = "array";
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
const {columns} = this.props;
|
||||
if(columns != nextProps.columns){
|
||||
this.setFooterRender();
|
||||
}
|
||||
}
|
||||
|
||||
//合计数字列,并将计算所得数据存储到一个obj对象中
|
||||
currentFooter = () => {
|
||||
let data_2 = this.props.data;
|
||||
let columns_sum = this.props.columns.concat();
|
||||
let sumCol_index,sumColIndexArr=[];
|
||||
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
|
||||
for (let i = 0; i < columns_sum.length; i++) {
|
||||
if (columns_sum[i].sumCol) {
|
||||
sumColIndexArr.push(columns_sum[i].dataIndex);
|
||||
}
|
||||
}
|
||||
let obj = {};
|
||||
sumColIndexArr.forEach(sumCol_index=>{
|
||||
|
||||
obj[sumCol_index] = 0;
|
||||
if (Array.isArray(data_2)) {
|
||||
for (let i = 0; i < data_2.length; i++) {
|
||||
if (
|
||||
typeof data_2[i][sumCol_index] == "number" ||
|
||||
!isNaN(data_2[i][sumCol_index])
|
||||
) {
|
||||
obj[sumCol_index] -= -data_2[i][sumCol_index];
|
||||
} else {
|
||||
obj[sumCol_index] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
obj.key = sumCol_index+"sumData";
|
||||
|
||||
})
|
||||
obj.showSum = "合计";
|
||||
obj = [obj];
|
||||
//将设置的和用户传入的合并属性
|
||||
columns_sum[0] = Object.assign({}, columns_sum[0], columns2);
|
||||
//除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
|
||||
columns_sum.map((item, index) => {
|
||||
if (typeof item.render == "function" && !item.sumCol) {
|
||||
item.render = "";
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return <Table{...this.props} loading={false} footerScroll showHeader={false} columns={columns_sum} data={obj} originWidth={true}/>;
|
||||
};
|
||||
|
||||
currentTreeFooter =()=>{
|
||||
const {columns,data} = this.props;
|
||||
let _columns = [];
|
||||
this.getNodeItem(columns,_columns);
|
||||
let _countObj = {};
|
||||
for (let column of _columns) {
|
||||
if (typeof column.render == "function" && !column.sumCol) {
|
||||
column.render = "";
|
||||
}
|
||||
if(column.sumCol){
|
||||
let count = 0;
|
||||
data.forEach((da,i)=>{
|
||||
let _num = da[column.key];
|
||||
count += _num;
|
||||
})
|
||||
_countObj[column.key] = count;
|
||||
}
|
||||
}
|
||||
let _sumArray = [{key:"sumData",showSum:"合计",..._countObj}];
|
||||
columns[0] = Object.assign({}, columns[0], columns2);
|
||||
return <Table{...this.props} bordered={false} loading={false} footerScroll showHeader={false} columns={columns} data={_sumArray} originWidth={true}/>;
|
||||
}
|
||||
|
||||
getNodeItem =(array,newArray)=>{
|
||||
array.forEach((da,i)=>{
|
||||
|
|
@ -116,26 +36,51 @@ export default function sum(Table) {
|
|||
return type;
|
||||
}
|
||||
|
||||
setFooterRender=()=>{
|
||||
const {columns} = this.props;
|
||||
if (!Array.isArray(columns)) {console.log("data type is error !");return;}
|
||||
|
||||
|
||||
addSumData=()=>{
|
||||
let {data=[],columns=[]} = this.props;
|
||||
let sumdata = {},newColumns = [],newData = [];
|
||||
if (!Array.isArray(columns)) {console.log("columns type is error !");return;}
|
||||
let type = this.getTableType();
|
||||
if(type == "tree"){
|
||||
return this.currentTreeFooter();
|
||||
if(type == 'tree'){
|
||||
this.getNodeItem(columns,newColumns);
|
||||
}else{
|
||||
return this.currentFooter();
|
||||
newColumns = columns;
|
||||
}
|
||||
//返回一个新的数据
|
||||
newData = data.slice();
|
||||
newColumns.forEach((column,index)=>{
|
||||
sumdata[column.dataIndex] = "";
|
||||
if(column.sumCol){
|
||||
let count = 0;
|
||||
data.forEach((da,i)=>{
|
||||
|
||||
let _num = parseInt(da[column.key]);
|
||||
//排查字段值为NAN情况
|
||||
if(_num === _num){
|
||||
count += _num;
|
||||
}
|
||||
|
||||
})
|
||||
sumdata[column.dataIndex] = count;
|
||||
}
|
||||
if(index == 0){
|
||||
sumdata[column.dataIndex] = "合计 "+sumdata[column.dataIndex];
|
||||
}
|
||||
})
|
||||
|
||||
newData.push(sumdata);
|
||||
return newData;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
{...this.props}
|
||||
footerScroll
|
||||
columns={this.props.columns}
|
||||
data={this.props.data}
|
||||
footer={this.setFooterRender}
|
||||
// originWidth={true}
|
||||
showSum={true}
|
||||
data={this.addSumData()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue