JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
jonyshi 2018-11-13 19:01:02 +08:00
parent 0ff0fe34e9 1931b7cbd3
commit b941e33150
21 changed files with 430 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
CHANGELOG.md
View File

@ -1,3 +1,23 @@
<a name="1.4.39"></a>
## [1.4.39](https://github.com/tinper-bee/bee-table/compare/v1.4.38...v1.4.39) (2018-11-13)
<a name="1.4.38"></a>
## [1.4.38](https://github.com/tinper-bee/bee-table/compare/v1.4.37...v1.4.38) (2018-11-12)
<a name="1.4.37"></a>
## [1.4.37](https://github.com/tinper-bee/bee-table/compare/v1.4.36...v1.4.37) (2018-11-08)
<a name="1.4.36"></a>
## [1.4.36](https://github.com/tinper-bee/bee-table/compare/v1.4.35...v1.4.36) (2018-11-08)
<a name="1.4.35"></a>
## [1.4.35](https://github.com/tinper-bee/bee-table/compare/v1.4.34...v1.4.35) (2018-11-07)

2
build/FilterDropDown.js
View File

@ -127,7 +127,7 @@ var FilterDropDown = function (_Component) {
);
return _react2["default"].createElement(
'div',
null,
{ className: 'filter-btns' },
isShowCondition == 'show' && _react2["default"].createElement(
_beeDropdown2["default"],
{

10
build/Table.css
View File

@ -320,7 +320,11 @@
.u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
font-weight: normal; }
.u-table-thead .filter-wrap {
display: flex; }
display: flex;
justify-content: center;
align-items: center; }
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7;
overflow: hidden;
@ -408,8 +412,8 @@
top: 3px;
right: 18px;
width: 22px;
height: 30px;
line-height: 30px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7; }
.u-table-filter-column-filter-iconi.uf {

53
build/Table.js
View File

@ -211,6 +211,10 @@ var Table = function (_Component) {
Table.prototype.componentDidMount = function componentDidMount() {
setTimeout(this.resetScrollY, 300);
//含有纵向滚动条
if (this.props.scroll.y) {
this.scrollbarWidth = (0, _utils.measureScrollbar)();
}
//后续也放在recevice里面
if (!this.props.originWidth) {
this.computeTableWidth();
@ -271,8 +275,12 @@ var Table = function (_Component) {
};
Table.prototype.computeTableWidth = function computeTableWidth() {
//如果用户传了scroll.x按用户传的为主
var setWidthParam = this.props.scroll.x;
var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
var lastShowIndex = computeObj.lastShowIndex;
this.computeWidth = computeObj.computeWidth;
if (typeof setWidthParam == 'number') {
var numSetWidthParam = parseInt(setWidthParam);
this.contentWidth = numSetWidthParam;
@ -282,15 +290,18 @@ var Table = function (_Component) {
this.contentDomWidth = this.contentTable.getBoundingClientRect().width; //表格容器宽度
this.contentWidth = this.contentDomWidth; //默认与容器宽度一样
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
}
}
var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
var lastShowIndex = computeObj.lastShowIndex;
this.computeWidth = computeObj.computeWidth;
if (this.computeWidth < this.contentWidth) {
var contentWidthDiff = this.contentWidth - this.computeWidth;
var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
//bordered的表格需要减去边框的差值1
if (this.props.bordered) {
contentWidthDiff = contentWidthDiff - 1;
}
this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
} else {
this.contentWidth = this.computeWidth;
@ -381,7 +392,7 @@ var Table = function (_Component) {
});
}
var trStyle = headerHeight ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey } : {};
var contentWidthDiff = 0;
@ -740,19 +751,36 @@ var Table = function (_Component) {
useFixedHeader = true;
// Add negative margin bottom for scroll bar overflow bug
var scrollbarWidth = (0, _utils.measureScrollbar)();
var scrollbarWidth = this.scrollbarWidth;
if (scrollbarWidth >= 0) {
(fixed ? bodyStyle : headStyle).paddingBottom = '0px';
//显示表头滚动条
if (headerScroll) {
if (fixed) {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
//内容少，不用显示滚动条
if (this.domWidthDiff <= 0) {
headStyle.marginBottom = scrollbarWidth + 'px';
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
} else {
innerBodyStyle.overflowX = 'auto';
}
} else {
//内容少，不用显示滚动条
if (this.domWidthDiff > 0) {
headStyle.overflowX = 'auto';
}
headStyle.marginBottom = '0px';
}
} else {
(fixed ? bodyStyle : headStyle).marginBottom = '-' + scrollbarWidth + 'px';
if (fixed) {
if (this.domWidthDiff > 0) {
innerBodyStyle.overflowX = 'auto';
} else {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
}
} else {
headStyle.marginBottom = '-' + scrollbarWidth + 'px';
}
}
}
}
@ -913,12 +941,17 @@ var Table = function (_Component) {
var _props7 = this.props,
clsPrefix = _props7.clsPrefix,
height = _props7.height,
headerHeight = _props7.headerHeight;
headerHeight = _props7.headerHeight,
columns = _props7.columns;
var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
return headerHeight ? headerHeight : row.getBoundingClientRect().height || 'auto';
var height = headerHeight;
if (headerHeight) {
height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight;
}
return headerHeight ? height : row.getBoundingClientRect().height || 'auto';
});
var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
return height ? height : row.getBoundingClientRect().height || 'auto';

2
build/TableHeader.js
View File

@ -387,7 +387,7 @@ var TableHeader = function (_Component) {
rows.map(function (row, index) {
return _react2["default"].createElement(
"tr",
{ key: index, style: rowStyle },
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
row.map(function (da, i, arr) {
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
delete da.drgHover;

11
build/lib/sum.js
View File

@ -43,15 +43,17 @@ function sum(Table) {
_this.currentFooter = function () {
var data_2 = _this.props.data;
var columns_sum = _this.props.columns.concat();
var sumCol_index = void 0;
var sumCol_index = void 0,
sumColIndexArr = [];
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
for (var i = 0; i < columns_sum.length; i++) {
if (columns_sum[i].sumCol) {
sumCol_index = columns_sum[i].dataIndex;
break;
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++) {
@ -62,7 +64,8 @@ function sum(Table) {
}
}
}
obj.key = "sumData";
obj.key = sumCol_index + "sumData";
});
obj.showSum = "合计";
obj = [obj];
//将设置的和用户传入的合并属性

24
build/utils.js
View File

@ -14,6 +14,8 @@ exports.addClass = addClass;
exports.removeClass = removeClass;
exports.ObjectAssign = ObjectAssign;
exports.closest = closest;
exports.getMaxColChildrenLength = getMaxColChildrenLength;
exports.getColChildrenLength = getColChildrenLength;
var _warning = require('warning');
@ -163,3 +165,25 @@ function closest(ele, selector) {
}
return null;
}
function getMaxColChildrenLength(columns) {
var arr = [];
arr = columns.map(function (item, index) {
var chilrenLen = 0;
if (item.children) {
chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
}
return chilrenLen;
});
var max = Math.max.apply(null, arr);
return max;
}
function getColChildrenLength(columns, chilrenLen) {
columns.forEach(function (item, index) {
if (item.children) {
chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
}
});
return chilrenLen;
}

5
demo/demolist/Demo3.js
View File

@ -1,7 +1,8 @@
/**
*
* @title 表头分组
* @title 表头分组并自定义表头高度
* @description columns[n] 可以内嵌 children，以渲染分组表头。
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
*
*/
@ -105,8 +106,10 @@ class Demo3 extends Component {
render() {
return (
<Table
className={'demo3'}
columns={columns}
data={data}
headerHeight={40} //自定义表头高度
bordered
scroll={{ y: 240 }}
/>

6
demo/demolist/Demo3.scss Normal file
View File

@ -0,0 +1,6 @@
.demo3{
.u-table-thead th {
padding-top: 0px;
padding-bottom: 0px;
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

20
dist/demo.css vendored
View File

@ -8583,7 +8583,13 @@ ul {
font-weight: normal; }
.u-table-thead .filter-wrap {
display: -ms-flexbox;
display: flex; }
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7;
overflow: hidden;
@ -8665,10 +8671,10 @@ ul {
.u-table-filter-column-filter-icon {
position: absolute;
top: 3px;
right: 2px;
width: 25px;
height: 38px;
line-height: 38px;
right: 18px;
width: 22px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7; }
.u-table-filter-column-filter-iconi.uf {
@ -10302,4 +10308,8 @@ th .drop-menu .uf {
th:hover .uf {
visibility: visible; }
.demo3 .u-table-thead th {
padding-top: 0px;
padding-bottom: 0px; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

272
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

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

2
src/FilterDropDown.js
View File

@ -52,7 +52,7 @@ class FilterDropDown extends Component {
<Item key="3">{locale['end']}</Item>
</Menu>
);
return (<div>
return (<div className="filter-btns">
{isShowCondition == 'show' && <Dropdown
trigger={['click']}
overlay={dropmenu}

57
src/Table.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TableRow from './TableRow';
import TableHeader from './TableHeader';
import { measureScrollbar, debounce, warningOnce } from './utils';
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
import shallowequal from 'shallowequal';
import addEventListener from 'tinper-bee-core/lib/addEventListener';
import ColumnManager from './ColumnManager';
@ -129,6 +129,10 @@ class Table extends Component {
componentDidMount() {
setTimeout(this.resetScrollY, 300);
//含有纵向滚动条
if(this.props.scroll.y){
this.scrollbarWidth = measureScrollbar();
}
//后续也放在recevice里面
if (!this.props.originWidth) {
this.computeTableWidth();
@ -196,8 +200,12 @@ class Table extends Component {
}
computeTableWidth() {
//如果用户传了scroll.x按用户传的为主
let setWidthParam = this.props.scroll.x
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
let lastShowIndex = computeObj.lastShowIndex;
this.computeWidth = computeObj.computeWidth;
if (typeof (setWidthParam) == 'number') {
let numSetWidthParam = parseInt(setWidthParam);
this.contentWidth = numSetWidthParam;
@ -207,15 +215,18 @@ class Table extends Component {
this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100
}
}
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
let lastShowIndex = computeObj.lastShowIndex;
this.computeWidth = computeObj.computeWidth;
if (this.computeWidth < this.contentWidth) {
let contentWidthDiff = this.contentWidth - this.computeWidth;
let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
//bordered的表格需要减去边框的差值1
if(this.props.bordered){
contentWidthDiff = contentWidthDiff-1;
}
this.setState({ contentWidthDiff, lastShowIndex });
} else {
this.contentWidth = this.computeWidth;
@ -290,7 +301,7 @@ class Table extends Component {
});
}
const trStyle = headerHeight ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey } : {};
let contentWidthDiff = 0;
@ -645,19 +656,38 @@ class Table extends Component {
useFixedHeader = true;
// Add negative margin bottom for scroll bar overflow bug
const scrollbarWidth = measureScrollbar();
const scrollbarWidth = this.scrollbarWidth;
if (scrollbarWidth >= 0) {
(fixed ? bodyStyle : headStyle).paddingBottom = '0px';
//显示表头滚动条
if(headerScroll){
if(fixed){
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
//内容少，不用显示滚动条
if(this.domWidthDiff <= 0){
headStyle.marginBottom = `${scrollbarWidth}px`;
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
}else{
innerBodyStyle.overflowX = 'auto';
}
}else{
//内容少，不用显示滚动条
if(this.domWidthDiff > 0){
headStyle.overflowX = 'auto';
}
headStyle.marginBottom = `0px`;
}
}else{
(fixed ? bodyStyle : headStyle).marginBottom = `-${scrollbarWidth}px`;
if(fixed){
if(this.domWidthDiff > 0){
innerBodyStyle.overflowX = 'auto';
}else{
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
}
}else{
headStyle.marginBottom = `-${scrollbarWidth}px`;
}
}
}
}
@ -795,13 +825,18 @@ class Table extends Component {
syncFixedTableRowHeight() {
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
const { clsPrefix, height, headerHeight } = this.props;
const { clsPrefix, height, headerHeight,columns } = this.props;
const headRows = this.refs.headTable ?
this.refs.headTable.querySelectorAll('thead') :
this.refs.bodyTable.querySelectorAll('thead');
const bodyRows = this.refs.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
const fixedColumnsHeadRowsHeight = [].map.call(
headRows, row => headerHeight ? headerHeight : (row.getBoundingClientRect().height || 'auto')
headRows, row =>{
let height = headerHeight;
if(headerHeight){
height = (getMaxColChildrenLength(columns)+1)*headerHeight;
}
return headerHeight ? height : (row.getBoundingClientRect().height || 'auto')}
);
const fixedColumnsBodyRowsHeight = [].map.call(
bodyRows, row => height ? height : (row.getBoundingClientRect().height || 'auto')

9
src/Table.scss
View File

@ -282,6 +282,11 @@ $table-move-in-color: $bg-color-base;
}
.filter-wrap{
display: flex;
justify-content: center;
align-items: center;
.filter-btns{
min-width: 58px;
}
}
th{
background: $table-head-background-color;
@ -413,8 +418,8 @@ $table-move-in-color: $bg-color-base;
top: 3px;
right: 18px;
width: 22px;
height: 30px;
line-height: 30px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7;
&i.uf{

2
src/TableHeader.js
View File

@ -406,7 +406,7 @@ class TableHeader extends Component {
return (
<thead className={`${clsPrefix}-thead`} {...attr}>
{rows.map((row, index) => (
<tr key={index} style={rowStyle}>
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, i, arr) => {
let thHover = da.drgHover
? ` ${clsPrefix}-thead th-drag-hover`

11
src/lib/sum.js
View File

@ -27,15 +27,16 @@ export default function sum(Table) {
currentFooter = () => {
let data_2 = this.props.data;
let columns_sum = this.props.columns.concat();
let sumCol_index;
let sumCol_index,sumColIndexArr=[];
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
for (let i = 0; i < columns_sum.length; i++) {
if (columns_sum[i].sumCol) {
sumCol_index = columns_sum[i].dataIndex;
break;
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++) {
@ -49,7 +50,9 @@ export default function sum(Table) {
}
}
}
obj.key = "sumData";
obj.key = sumCol_index+"sumData";
})
obj.showSum = "合计";
obj = [obj];
//将设置的和用户传入的合并属性

23
src/utils.js
View File

@ -143,3 +143,26 @@ export function closest(ele, selector) {
}
return null;
}
export function getMaxColChildrenLength(columns){
let arr=[];
arr = columns.map((item,index)=>{
let chilrenLen = 0;
if(item.children){
chilrenLen = getColChildrenLength(item.children,chilrenLen+1)
}
return chilrenLen
})
var max = Math.max.apply(null,arr);
return max;
}
export function getColChildrenLength(columns,chilrenLen){
columns.forEach((item,index)=>{
if(item.children){
chilrenLen = getColChildrenLength(item.children,chilrenLen+1);
}
})
return chilrenLen;
}