office-ui-fabric / fluent-ui分组DetailsList
office-ui-fabric / fluent-ui分组DetailsList
提问于 2020-05-26 13:37:35
今天，我尝试使用fluent-ui的分组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的信息并计数以将我的数组项映射到组中。
这是一个组的定义可能是什么样子：
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。我认为实施这个计划的人都是专业人士。一定有原因。也许这跟表演有关？我可以想象，当涉及到非常大的列表时，它的表现会更好，但我不确定。
有人知道这方面的一些细节并能解释吗？
回答 2
Stack Overflow用户
发布于 2021-01-21 18:58:14
面对同样的问题在这里找到了线索。那就拿出我的解决方案。下面是从按分组列排序的给定项列表中生成组数组的函数：
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
}Stack Overflow用户
发布于 2022-10-05 12:52:57
蒂默斯的回答的类型化和空组名选项变体
function generateGroups(items: any[], fieldName: string, emptyGroupName: string = '-'): IGroup[] {
const groups: IGroup[] = []
const groupNames = [...new Set<string>(items.map(item => item[fieldName]))]
groupNames.forEach(name => {
const groupItemsCount = items.filter(item => item[fieldName] === name).length
const groupStartIndex = items.map(item => item[fieldName]).indexOf(name)
groups.push({
key: name,
level: 0,
name: name ?? emptyGroupName,
count: groupItemsCount,
startIndex: groupStartIndex
})
})
return groups
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62023430
复制相关文章
相似问题
腾讯云开发者
