今天,我尝试使用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",...},
...,
]
我发现必须做的事情:我需要对包含我的物品的Array进行排序,属于红色组的所有物品都必须在一个块中。例如:[红色,红色,红色,蓝色,蓝色,绿色,绿色,绿色]。现在,我需要提供有关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的初学者和中级。我认为实现此目标的人是专业人士。一定是有原因的。也许它与性能有关?我可以想象,当涉及到非常大的列表时,它的这种方式效果更好,但我不确定。
有人知道这方面的一些细节并且可以解释吗?
答案 0 :(得分:0)
遇到了同样的问题并在这里得到了线索。然后我的解决方案。 以下是根据分组列排序的给定项目列表生成组数组的函数:
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
}