如何在DetailsList控件中设置选中项

Question

我使用office-ui-fabric-react库中的DetailsList组件：

   import {DetailsList} from 'office-ui-fabric-react/lib/DetailsList';
   render () {
      const item = [
        {value: 'one'},
        {value: 'two'}
      ]
      return (
        <DetailsList
            checkboxVisibility={CheckboxVisibility.always}
            items={items}
            selection={selection}
        />
    }

值为` to的项目如何设置勾选？

Answer 1

注意到您向DetailsList传递了一个selection。在selection中有一些方法可以做到这一点，包括：

• setAllSelected(isAllSelected: boolean)
• setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean)
• setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean)

在您的示例中，您可以为每个值指定一个key。然后在某个地方调用setKeySelected (例如，componentDidMount)，告诉DetailsList选择特定的项目。

Answer 2

我到处找都找不到答案。要在页面加载时设置所选项目，请执行以下操作：

<DetailsList
    columns={columns}
    items={getItems()}
    selection={getSelectedItems()}
/>

const getItems = () => {
     const items: any[] = [];

     itemList.map((item: any, i) => {
         items.push({
             key: i.toString(),
             Name: item.Name,
             Description: item.Description
         });
     });

     return [];
};

const getSelectedItems = (): ISelection => {
    const selection: Selection = new Selection();
    const items = getItems();

    selection.setItems(items);
    selectedItemsList.map((selectedItem: 
    any, s) => { 
         selection.setKeySelected(s.toString(), true, false);
    });

    return selection;
};

Answer 3

如果希望默认选择所有列表项，只需在useEffect中调用selection.setAllSelected(true)即可。

const selection = new Selection();
useEffect(() => {
   selection.setAllSelected(true)
}, [selection]);