vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enhance footer event

Browse Source
This commit is contained in:
AllenFang 2019-09-07 16:27:18 +08:00
parent 16128e77e6
commit 7d28d46185
3 changed files with 53 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/columns.md
View File

@ -666,7 +666,7 @@ It's also available to custom via a callback function:
{ {
// omit... // omit...
footerEvents: { footerEvents: {
onClick: e => { ... } onClick: (e, column, columnIndex) => { ... }
} }
} }
``` ```

4
packages/react-bootstrap-table2-example/examples/footer/column-event-table.js vendored
View File

@ -12,7 +12,7 @@ const columns = [{
dataField: 'id', dataField: 'id',
text: 'Product ID', text: 'Product ID',
footerEvents: { footerEvents: {
onClick: () => alert('Click on Product ID footer column') onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
}, },
footer: 'Footer 1' footer: 'Footer 1'
}, { }, {
@ -32,7 +32,7 @@ const columns = [{
dataField: 'id', dataField: 'id',
text: 'Product ID', text: 'Product ID',
footerEvents: { footerEvents: {
onClick: () => alert('Click on Product ID footer column') onClick: (e, column, columnIndex) => alert('Click on Product ID footer column')
}, },
footer: 'Footer 1' footer: 'Footer 1'
}, { }, {

95
packages/react-bootstrap-table2/src/footer-cell.js vendored
View File

@ -4,56 +4,61 @@ import cs from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import _ from './utils'; import _ from './utils';
import eventDelegater from './cell-event-delegater';
const FooterCell = (props) => { class FooterCell extends eventDelegater(React.Component) {
const { index, column, columnData } = props; render() {
const { index, column, columnData } = this.props;
const { const {
footer, footer,
footerTitle, footerTitle,
footerAlign, footerAlign,
footerFormatter, footerFormatter,
footerEvents, footerEvents,
footerClasses, footerClasses,
footerStyle, footerStyle,
footerAttrs footerAttrs
} = column; } = column;
const cellAttrs = { const delegateEvents = this.delegate(footerEvents);
...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs), const cellAttrs = {
...footerEvents ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
}; ...delegateEvents
};
let text = '';
if (_.isString(footer)) { let text = '';
text = footer; if (_.isString(footer)) {
} else if (_.isFunction(footer)) { text = footer;
text = footer(columnData, column, index); } else if (_.isFunction(footer)) {
text = footer(columnData, column, index);
}
let cellStyle = {};
const cellClasses = _.isFunction(footerClasses) ? footerClasses(column, index) : footerClasses;
if (footerStyle) {
cellStyle = _.isFunction(footerStyle) ? footerStyle(column, index) : footerStyle;
cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
}
if (footerTitle) {
cellAttrs.title = _.isFunction(footerTitle) ? footerTitle(column, index) : text;
}
if (footerAlign) {
cellStyle.textAlign = _.isFunction(footerAlign) ? footerAlign(column, index) : footerAlign;
}
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
const children = footerFormatter ? footerFormatter(column, index) : text;
return React.createElement('th', cellAttrs, children);
} }
}
let cellStyle = {};
const cellClasses = _.isFunction(footerClasses) ? footerClasses(column, index) : footerClasses;
if (footerStyle) {
cellStyle = _.isFunction(footerStyle) ? footerStyle(column, index) : footerStyle;
cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
}
if (footerTitle) {
cellAttrs.title = _.isFunction(footerTitle) ? footerTitle(column, index) : text;
}
if (footerAlign) {
cellStyle.textAlign = _.isFunction(footerAlign) ? footerAlign(column, index) : footerAlign;
}
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
const children = footerFormatter ? footerFormatter(column, index) : text;
return React.createElement('th', cellAttrs, children);
};
FooterCell.propTypes = { FooterCell.propTypes = {
columnData: PropTypes.array, columnData: PropTypes.array,