[英]office-ui-fabric / fluent-ui Grouped DetailsList
Today I tried to use the Grouped DetailsList of the fluent-ui.今天尝试使用fluent-ui的Grouped DetailsList 。
What I expected: I need to declare some groups, let's say red, blue, green and then just add to each item, I want to add to the List, a specific property, that maps the Item to the groups.我的预期:我需要声明一些组,比方说红色、蓝色、绿色,然后添加到每个项目,我想添加到列表,一个特定的属性,将项目映射到组。 eg:
例如:
groups: [
{ key: 'red', name: 'Color: "red"'},
{ key: 'green', name: 'Color: "green"'},
{ key: 'blue', name: 'Color: "blue"' },
],
items: [...,
{ key: 'red',anyProp1: "abc", anyProp2: "dfg",...},
...,
]
What I found out I have to do: I need to sort the Array, which contains my items in that way, that all Items belonging to the Group red need to be in one block.我发现我必须做的是:我需要对包含我的项目的数组进行排序,所有属于红色组的项目都需要在一个块中。 eg: [red, red, red, blue, blue, green, green, green].
例如:[红色,红色,红色,蓝色,蓝色,绿色,绿色,绿色]。 Now I needed to provide the information about startIndex and count to map my Array of items to the groups.
现在我需要提供有关 startIndex 的信息,并将我的项目数组计数到 map 到组。
This is what a definition of a group could look like:这就是组的定义:
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 },
],
I can't understand why they have done it this way (For me it's very inconvenient this way).我不明白他们为什么要这样做(对我来说,这样做很不方便)。 So, while I'm more between a beginner and an intermediate in JS.
所以,虽然我在 JS 方面更处于初学者和中级之间。 I think the guys who implemented this are professionals.
我认为实施这个的人是专业人士。 There must be a reason.
必须有一个原因。 Maybe it has something todo with performance?
也许它与性能有关? I could imagine that when it comes to very large lists, it performs better this way, but I'm not sure.
我可以想象,当涉及到非常大的列表时,它以这种方式表现得更好,但我不确定。
Does anybody knows some details about this and can explain?有人知道这方面的一些细节并可以解释吗?
Faced the same issue and got a clue here.面临同样的问题,并在这里得到了线索。 Then bult my solution.
然后破坏我的解决方案。 Following is the function to generate groups array from the given items list sorted by the grouping column:
以下是 function 从按分组列排序的给定项目列表生成组数组:
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
}
Typed and with empty group name option variant of the Timus's answer Timus 答案的类型和空组名称选项变体
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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.