office-ui-fabric / fluent-ui Grouped DetailsList答案

【问题标题】：office-ui-fabric / fluent-ui Grouped DetailsListoffice-ui-fabric / fluent-ui Grouped DetailsList
【发布时间】：2020-09-13 07:58:21
【问题描述】：

今天尝试使用fluent-ui的Grouped DetailsList。

我的预期：我需要声明一些组，比如说红色、蓝色、绿色，然后添加到每个项目，我想添加到列表中，一个特定的属性，映射项目到组。例如：

groups: [
            { key: 'red', name: 'Color: "red"'},
            { key: 'green', name: 'Color: "green"'},
            { key: 'blue', name: 'Color: "blue"' },
          ],

items: [...,
        { key: 'red',anyProp1: "abc", anyProp2: "dfg",...},
       ...,
      ]

我发现我必须做的事情：我需要以这种方式对包含我的项目的数组进行排序，即所有属于红色组的项目都需要放在一个块中。例如：[红、红、红、蓝、蓝、绿、绿、绿]。现在我需要提供有关 startIndex 和 count 的信息，以将我的项目数组映射到组。

组的定义可能如下所示：

 groups: [
        { key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2, level: 0 },
        { key: 'groupgreen2', name: 'Color: "green"', startIndex: 2, count: 0, level: 0 },
        { key: 'groupblue2', name: 'Color: "blue"', startIndex: 2, count: 3, level: 0 },
      ],

我不明白他们为什么要这样做（对我来说这样很不方便）。所以，虽然我更多地介于 JS 的初学者和中级之间。我认为执行此操作的人是专业人士。一定是有原因的。也许它与性能有关？我可以想象，当涉及到非常大的列表时，这种方式会表现得更好，但我不确定。

有人知道这方面的一些细节并能解释一下吗？

【问题讨论】：

我发现同样的事情令人沮丧，等到您尝试访问组属性以执行诸如切换组的折叠状态之类的操作。即使 DetailsList 使用 GroupList 来维护其组，我也无法在 DetailsList 和 GroupList 之间找到此接口的路径。
完全同意。这很荒谬。

标签： javascript office-ui-fabric office-ui-fabric-react fluent-ui

【解决方案1】：

面临同样的问题，并在这里得到了线索。然后破坏我的解决方案。以下是根据分组列排序的给定项目列表生成组数组的函数：

function groupsGenerator(itemsList, fieldName) {
    // Array of group objects
    const groupObjArr =[]

    // Get the group names from the items list
    const groupNames = [...new Set(itemsList.map(item => item[fieldName]))]

    // Iterate through each group name to build proper group object
    groupNames.forEach(gn => {
        // Count group items
        const groupLength = itemsList.filter(item => item[fieldName] === gn).length
        
        // Find the first group index
        const groupIndex = itemsList.map(item => item[fieldName]).indexOf(gn)

        // Generate a group object
        groupObjArr.push({
            key: gn, name: gn, level: 0, count: groupLength, startIndex: groupIndex
        })
    })

    // The final groups array returned
    return groupObjArr
}

【讨论】：