enhance footer event

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

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) => { ... }
} }
} }
``` ```

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'
}, { }, {

View File

@ -4,9 +4,11 @@ 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,
@ -19,11 +21,13 @@ const FooterCell = (props) => {
footerAttrs footerAttrs
} = column; } = column;
const delegateEvents = this.delegate(footerEvents);
const cellAttrs = { const cellAttrs = {
...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs), ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
...footerEvents ...delegateEvents
}; };
let text = ''; let text = '';
if (_.isString(footer)) { if (_.isString(footer)) {
text = footer; text = footer;
@ -53,7 +57,8 @@ const FooterCell = (props) => {
const children = footerFormatter ? footerFormatter(column, index) : text; const children = footerFormatter ? footerFormatter(column, index) : text;
return React.createElement('th', cellAttrs, children); return React.createElement('th', cellAttrs, children);
}; }
}
FooterCell.propTypes = { FooterCell.propTypes = {
columnData: PropTypes.array, columnData: PropTypes.array,