【Material-UI】Transfer List中的 Enhanced Transfer List 详解

Material-UI 是 React 生态系统中非常流行的 UI 框架，提供了大量的组件来帮助开发者创建优质的用户界面。本文将详细介绍 Material-UI 中的 Transfer List 组件及其 Enhanced Transfer List 示例，该示例通过引入“全选/全不选”复选框和计数器，替代了传统的“全部移动”按钮，提升了用户交互体验。

一、Transfer List 组件概述

1. 组件介绍

Transfer List 是 Material-UI 提供的一个高级组件，常用于在两个列表之间移动项目。用户可以选择一个或多个项目并在列表之间进行传输，通常用于配置、设置或者选择项的管理等场景。Material-UI 的 Transfer List 组件通过其灵活的配置和自定义选项，为开发者提供了一个强大的工具来管理复杂的交互操作。

2. Enhanced Transfer List 的概念

Enhanced Transfer List 是对传统 Transfer List 的一种增强，它通过取消“全部移动”按钮，取而代之的是一个“全选/全不选”复选框，并添加了项目计数器。这个改进使得用户能够更直观地进行多项选择和操作，从而提升了用户体验和操作效率。

二、Enhanced Transfer List 组件的实现

1. 基本实现结构

下面的代码展示了如何实现一个简单的 Enhanced Transfer List：

import * as React from 'react';
import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';

function not(a, b) {
  return a.filter((value) => b.indexOf(value) === -1);
}

function intersection(a, b) {
  return a.filter((value) => b.indexOf(value) !== -1);
}

function union(a, b) {
  return [...a, ...not(b, a)];
}

export default function SelectAllTransferList() {
  const [checked, setChecked] = React.useState([]);
  const [left, setLeft] = React.useState([0, 1, 2, 3]);
  const [right, setRight] = React.useState([4, 5, 6, 7]);

  const leftChecked = intersection(checked, left);
  const rightChecked = intersection(checked, right);

  const handleToggle = (value) => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  const numberOfChecked = (items) => intersection(checked, items).length;

  const handleToggleAll = (items) => () => {
    if (numberOfChecked(items) === items.length) {
      setChecked(not(checked, items));
    } else {
      setChecked(union(checked, items));
    }
  };

  const handleCheckedRight = () => {
    setRight(right.concat(leftChecked));
    setLeft(not(left, leftChecked));
    setChecked(not(checked, leftChecked));
  };

  const handleCheckedLeft = () => {
    setLeft(left.concat(rightChecked));
    setRight(not(right, rightChecked));
    setChecked(not(checked, rightChecked));
  };

  const customList = (title, items) => (
    <Card>
      <CardHeader
        sx={{ px: 2, py: 1 }}
        avatar={
          <Checkbox
            onClick={handleToggleAll(items)}
            checked={numberOfChecked(items) === items.length && items.length !== 0}
            indeterminate={
              numberOfChecked(items) !== items.length && numberOfChecked(items) !== 0
            }
            disabled={items.length === 0}
            inputProps={{
              'aria-label': 'all items selected',
            }}
          />
        }
        title={title}
        subheader={`${numberOfChecked(items)}/${items.length} selected`}
      />
      <Divider />
      <List
        sx={{
          width: 200,
          height: 230,
          bgcolor: 'background.paper',
          overflow: 'auto',
        }}
        dense
        component="div"
        role="list"
      >
        {items.map((value) => {
          const labelId = `transfer-list-all-item-${value}-label`;

          return (
            <ListItemButton
              key={value}
              role="listitem"
              onClick={handleToggle(value)}
            >
              <ListItemIcon>
                <Checkbox
                  checked={checked.indexOf(value) !== -1}
                  tabIndex={-1}
                  disableRipple
                  inputProps={{
                    'aria-labelledby': labelId,
                  }}
                />
              </ListItemIcon>
              <ListItemText id={labelId} primary={`List item ${value + 1}`} />
            </ListItemButton>
          );
        })}
      </List>
    </Card>
  );

  return (
    <Grid
      container
      spacing={2}
      sx={{ justifyContent: 'center', alignItems: 'center' }}
    >
      <Grid item>{customList('Choices', left)}</Grid>
      <Grid item>
        <Grid container direction="column" sx={{ alignItems: 'center' }}>
          <Button
            sx={{ my: 0.5 }}
            variant="outlined"
            size="small"
            onClick={handleCheckedRight}
            disabled={leftChecked.length === 0}
            aria-label="move selected right"
          >
            &gt;
          </Button>
          <Button
            sx={{ my: 0.5 }}
            variant="outlined"
            size="small"
            onClick={handleCheckedLeft}
            disabled={rightChecked.length === 0}
            aria-label="move selected left"
          >
            &lt;
          </Button>
        </Grid>
      </Grid>
      <Grid item>{customList('Chosen', right)}</Grid>
    </Grid>
  );
}

2. 代码详解

• 状态管理：组件使用了 useState 来管理选中项（checked）、左侧列表（left）和右侧列表（right）的状态。leftChecked 和 rightChecked 分别表示选中项在左侧和右侧列表中的交集。
• 复选框的处理：handleToggle 函数负责处理单个项目的选中状态切换，而 handleToggleAll 函数则用于处理全选/全不选功能。
• 移动项目：handleCheckedRight 和 handleCheckedLeft 分别用于将选中项从左侧列表移动到右侧列表，或者从右侧列表移动到左侧列表。
• 自定义列表渲染：customList 函数用来渲染每个列表的布局和内容，其中包括复选框、标题、选中计数器等。

三、Enhanced Transfer List 的优点

1. 更加直观的用户操作

通过使用“全选/全不选”复选框，用户可以快速选择或取消选择所有项目，而无需手动点击每个项目。这种设计大大提升了操作效率，尤其是在列表项目较多时。

2. 实时计数功能

Enhanced Transfer List 中的计数器可以实时显示选中的项目数，方便用户在进行操作时了解当前的选择情况。这种反馈机制对提升用户体验至关重要，尤其是在处理大量选项时。

3. 灵活的定制性

Material-UI 的组件一贯以其高度的定制性著称，Enhanced Transfer List 也不例外。开发者可以根据项目需求，轻松地调整列表的布局、样式以及交互行为，使其更好地适应实际应用场景。

四、Enhanced Transfer List 的应用场景

1. 配置选项的管理

在一些复杂的配置界面中，Enhanced Transfer List 非常适合用于在不同的配置组之间移动选项。例如，在用户权限管理中，可以使用此组件来分配或移除用户的角色或权限。

2. 大量数据的选择操作

对于需要处理大量数据的场景，例如电子商务中的商品筛选、数据分析中的字段选择等，Enhanced Transfer List 能够提供更加便捷的操作方式，提高用户的工作效率。

3. 数据导入导出工具

在需要将数据从一个系统导入到另一个系统的场景中，Enhanced Transfer List 可以用来选择和移动需要导入或导出的数据项，确保数据处理的灵活性和准确性。

五、总结

Material-UI 的 Enhanced Transfer List 组件为开发者提供了一种更为先进和灵活的列表项管理方式。通过引入“全选/全不选”复选框和计数器，提升了用户的操作体验和效率。无论是在复杂的配置管理中，还是在处理大量数据的场景中，Enhanced Transfer List 都能够很好地满足需求。希望本文的详细介绍能够帮助你更好地理解和使用这一组件，提升你的项目开发效率。

推荐：

• JavaScript
• react
• vue

---