解决右侧固定列无法设置展开功能

This commit is contained in:
cw 2019-08-26 15:03:04 +08:00
parent 0613edbc05
commit 0df167281a
6 changed files with 58 additions and 14 deletions

View File

@ -342,9 +342,16 @@ var Table = function (_Component) {
_this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this); _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
_this.tableUid = null; _this.tableUid = null;
_this.contentTable = null; _this.contentTable = null;
_this.leftColumnsLength; //左侧固定列的长度
_this.centerColumnsLength; //非固定列的长度
return _this; return _this;
} }
Table.prototype.componentWillMount = function componentWillMount() {
this.centerColumnsLength = this.columnManager.centerColumns().length;
this.leftColumnsLength = this.columnManager.leftColumns().length;
};
Table.prototype.componentDidMount = function componentDidMount() { Table.prototype.componentDidMount = function componentDidMount() {
this.getTableUID(); this.getTableUID();
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
@ -818,7 +825,7 @@ var Table = function (_Component) {
var onRowDoubleClick = props.onRowDoubleClick; var onRowDoubleClick = props.onRowDoubleClick;
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1; var expandIconColumnIndex = props.expandIconColumnIndex;
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) { if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true })); rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
} }
@ -926,7 +933,9 @@ var Table = function (_Component) {
expandedIcon: props.expandedIcon, expandedIcon: props.expandedIcon,
collapsedIcon: props.collapsedIcon, collapsedIcon: props.collapsedIcon,
lazyStartIndex: lazyCurrentIndex, lazyStartIndex: lazyCurrentIndex,
lazyEndIndex: lazyEndIndex lazyEndIndex: lazyEndIndex,
centerColumnsLength: this.centerColumnsLength,
leftColumnsLength: this.leftColumnsLength
}))); })));
this.treeRowIndex++; this.treeRowIndex++;
var subVisible = visible && isRowExpanded; var subVisible = visible && isRowExpanded;

View File

@ -593,6 +593,12 @@ var TableRow = function (_Component) {
isHiddenExpandIcon: isHiddenExpandIcon isHiddenExpandIcon: isHiddenExpandIcon
}); });
var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : ''; var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
var expandIndexInThisTable;
if (this.props.fixed === 'right') {
expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength - this.props.centerColumnsLength;
} else {
expandIndexInThisTable = expandIconColumnIndex;
}
for (var i = 0; i < columns.length; i++) { for (var i = 0; i < columns.length; i++) {
if (expandIconAsCell && i === 0 && !showSum) { if (expandIconAsCell && i === 0 && !showSum) {
cells.push(_react2["default"].createElement( cells.push(_react2["default"].createElement(
@ -604,7 +610,7 @@ var TableRow = function (_Component) {
expandIcon expandIcon
)); ));
} }
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex; var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIndexInThisTable;
cells.push(_react2["default"].createElement(_TableCell2["default"], { cells.push(_react2["default"].createElement(_TableCell2["default"], {
clsPrefix: clsPrefix, clsPrefix: clsPrefix,
record: record, record: record,

21
dist/demo.js vendored
View File

@ -37194,9 +37194,16 @@
_this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this); _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
_this.tableUid = null; _this.tableUid = null;
_this.contentTable = null; _this.contentTable = null;
_this.leftColumnsLength; //左侧固定列的长度
_this.centerColumnsLength; //非固定列的长度
return _this; return _this;
} }
Table.prototype.componentWillMount = function componentWillMount() {
this.centerColumnsLength = this.columnManager.centerColumns().length;
this.leftColumnsLength = this.columnManager.leftColumns().length;
};
Table.prototype.componentDidMount = function componentDidMount() { Table.prototype.componentDidMount = function componentDidMount() {
this.getTableUID(); this.getTableUID();
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
@ -37670,7 +37677,7 @@
var onRowDoubleClick = props.onRowDoubleClick; var onRowDoubleClick = props.onRowDoubleClick;
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1; var expandIconColumnIndex = props.expandIconColumnIndex;
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) { if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
rst.push(_react2['default'].createElement(_TableRow2['default'], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true })); rst.push(_react2['default'].createElement(_TableRow2['default'], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
} }
@ -37778,7 +37785,9 @@
expandedIcon: props.expandedIcon, expandedIcon: props.expandedIcon,
collapsedIcon: props.collapsedIcon, collapsedIcon: props.collapsedIcon,
lazyStartIndex: lazyCurrentIndex, lazyStartIndex: lazyCurrentIndex,
lazyEndIndex: lazyEndIndex lazyEndIndex: lazyEndIndex,
centerColumnsLength: this.centerColumnsLength,
leftColumnsLength: this.leftColumnsLength
}))); })));
this.treeRowIndex++; this.treeRowIndex++;
var subVisible = visible && isRowExpanded; var subVisible = visible && isRowExpanded;
@ -39027,6 +39036,12 @@
isHiddenExpandIcon: isHiddenExpandIcon isHiddenExpandIcon: isHiddenExpandIcon
}); });
var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : ''; var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
var expandIndexInThisTable;
if (this.props.fixed === 'right') {
expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength - this.props.centerColumnsLength;
} else {
expandIndexInThisTable = expandIconColumnIndex;
}
for (var i = 0; i < columns.length; i++) { for (var i = 0; i < columns.length; i++) {
if (expandIconAsCell && i === 0 && !showSum) { if (expandIconAsCell && i === 0 && !showSum) {
cells.push(_react2['default'].createElement( cells.push(_react2['default'].createElement(
@ -39038,7 +39053,7 @@
expandIcon expandIcon
)); ));
} }
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex; var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIndexInThisTable;
cells.push(_react2['default'].createElement(_TableCell2['default'], { cells.push(_react2['default'].createElement(_TableCell2['default'], {
clsPrefix: clsPrefix, clsPrefix: clsPrefix,
record: record, record: record,

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -154,6 +154,12 @@ class Table extends Component {
this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this); this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this);
this.tableUid = null; this.tableUid = null;
this.contentTable = null; this.contentTable = null;
this.leftColumnsLength //左侧固定列的长度
this.centerColumnsLength //非固定列的长度
}
componentWillMount() {
this.centerColumnsLength = this.columnManager.centerColumns().length
this.leftColumnsLength = this.columnManager.leftColumns().length
} }
componentDidMount() { componentDidMount() {
@ -661,7 +667,7 @@ class Table extends Component {
const onRowDoubleClick = props.onRowDoubleClick; const onRowDoubleClick = props.onRowDoubleClick;
const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1; const expandIconColumnIndex = props.expandIconColumnIndex
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){ if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
rst.push( rst.push(
<TableRow height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/> <TableRow height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
@ -776,6 +782,8 @@ class Table extends Component {
collapsedIcon={props.collapsedIcon} collapsedIcon={props.collapsedIcon}
lazyStartIndex = {lazyCurrentIndex} lazyStartIndex = {lazyCurrentIndex}
lazyEndIndex = {lazyEndIndex} lazyEndIndex = {lazyEndIndex}
centerColumnsLength={this.centerColumnsLength}
leftColumnsLength={this.leftColumnsLength}
/> />
); );
this.treeRowIndex++; this.treeRowIndex++;

View File

@ -200,21 +200,21 @@ class TableRow extends Component{
let event = Event.getEvent(e) , let event = Event.getEvent(e) ,
_target = Event.getTarget(event), _target = Event.getTarget(event),
target = _target.parentNode; target = _target.parentNode;
if (target.tagName === 'TR') { if (target.tagName === 'TR') {
this.currentIndex = target.getAttribute("data-row-key"); this.currentIndex = target.getAttribute("data-row-key");
onDragRowStart && onDragRowStart(this.currentIndex); onDragRowStart && onDragRowStart(this.currentIndex);
}else{ }else{
this.canBeTouch = false this.canBeTouch = false
} }
} }
onTouchMove = (e) => { onTouchMove = (e) => {
if (!this.canBeTouch) return; if (!this.canBeTouch) return;
e.stopPropagation() e.stopPropagation()
let event = Event.getEvent(e); let event = Event.getEvent(e);
@ -235,7 +235,7 @@ class TableRow extends Component{
* 手指移开时触发 * 手指移开时触发
*/ */
onTouchEnd = (e) => { onTouchEnd = (e) => {
if(!this.canBeTouch){ if(!this.canBeTouch){
this.canBeTouch = true this.canBeTouch = true
return return
@ -476,6 +476,12 @@ class TableRow extends Component{
/> />
); );
let isExpandIconAsCell = expandIconAsCell ? `${clsPrefix}-expand-columns-in-body` : ''; let isExpandIconAsCell = expandIconAsCell ? `${clsPrefix}-expand-columns-in-body` : '';
var expandIndexInThisTable
if(this.props.fixed === 'right'){
expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength-this.props.centerColumnsLength
}else {
expandIndexInThisTable = expandIconColumnIndex
}
for (let i = 0; i < columns.length; i++) { for (let i = 0; i < columns.length; i++) {
if (expandIconAsCell && i === 0 && !showSum ) { if (expandIconAsCell && i === 0 && !showSum ) {
cells.push( cells.push(
@ -488,7 +494,7 @@ class TableRow extends Component{
); );
} }
const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum) const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum)
? false : (i === expandIconColumnIndex); ? false : (i === expandIndexInThisTable);
cells.push( cells.push(
<TableCell <TableCell
clsPrefix={clsPrefix} clsPrefix={clsPrefix}