feat: crud自定义列在drag模式下支持全选

This commit is contained in:
yudeguo 2024-03-07 13:08:43 +08:00
parent 108b46c2c2
commit 3cad097c68
2 changed files with 40 additions and 34 deletions

View File

@ -375,11 +375,12 @@ export default class ColumnToggler extends React.Component<
overlay,
translate: __,
footerBtnSize,
children,
env
} = this.props;
const {enableSorting, tempColumns} = this.state;
const inDragging = enableSorting && draggable && tempColumns.length > 1;
return (
<>
<Modal
@ -403,7 +404,9 @@ export default class ColumnToggler extends React.Component<
<Icon icon="close" className="icon" />
</a>
</header>
{!inDragging && (
<ul className={cx('ColumnToggler-modal-content')}>{children}</ul>
)}
<ul className={cx('ColumnToggler-modal-content')} ref={this.dragRef}>
{Array.isArray(tempColumns)
? tempColumns.map((column, index) => (
@ -419,7 +422,7 @@ export default class ColumnToggler extends React.Component<
className={cx('ColumnToggler-menuItem')}
key={column.index}
>
{enableSorting && draggable && tempColumns.length > 1 ? (
{inDragging ? (
<>
<a className={cx('ColumnToggler-menuItem-dragBar')}>
<Icon icon="drag" className={cx('icon')} />

View File

@ -2333,39 +2333,42 @@ export default class Table extends React.Component<TableProps, object> {
</li>
) : null}
{store.toggableColumns.map(column => (
<li
className={cx('ColumnToggler-menuItem')}
key={column.index}
onClick={async () => {
const {data, dispatchEvent} = this.props;
let columns = store.activeToggaleColumns.map(
item => item.pristine
);
if (!column.toggled) {
columns.push(column.pristine);
} else {
columns = columns.filter(c => c.name !== column.pristine.name);
}
const rendererEvent = await dispatchEvent(
'columnToggled',
createObject(data, {
columns
})
);
{!config?.draggable &&
store.toggableColumns.map(column => (
<li
className={cx('ColumnToggler-menuItem')}
key={column.index}
onClick={async () => {
const {data, dispatchEvent} = this.props;
let columns = store.activeToggaleColumns.map(
item => item.pristine
);
if (!column.toggled) {
columns.push(column.pristine);
} else {
columns = columns.filter(
c => c.name !== column.pristine.name
);
}
const rendererEvent = await dispatchEvent(
'columnToggled',
createObject(data, {
columns
})
);
if (rendererEvent?.prevented) {
return;
}
if (rendererEvent?.prevented) {
return;
}
column.toggleToggle();
}}
>
<Checkbox size="sm" classPrefix={ns} checked={column.toggled}>
{column.label ? render('tpl', column.label) : null}
</Checkbox>
</li>
))}
column.toggleToggle();
}}
>
<Checkbox size="sm" classPrefix={ns} checked={column.toggled}>
{column.label ? render('tpl', column.label) : null}
</Checkbox>
</li>
))}
</ColumnToggler>
);
}