标签(空格分隔): 未分类
你可以在构造函数中针对section标题和行数据提供自定义的提取方法和hasChanged
比对方法。如果不提供,则会使用默认的defaultGetRowData
和defaultGetSectionHeaderData
方法来提取行数据和section
标题。
{ sectionID_1: { rowID_1: rowData1, ... }, ... }
或者:
{ sectionID_1: [ rowData1, rowData2, ... ], ... }
或者:
[ [ rowData1, rowData2, ... ], ... ]
构造函数可以接受下列四种参数(都是可选):
- getRowData(dataBlob, sectionID, rowID);
- getSectionHeaderData(dataBlob, sectionID);
- rowHasChanged(prevRowData, nextRowData);
- sectionHeaderHasChanged(prevSectionData, nextSectionData);
使用默认数据提取策略代码示例
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
自定义dataBlob提取数据策略
代码示例
const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
getSectionData,
getRowData,
});
介绍方法api
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
cloneWithRows(dataBlob, rowIdentities)
比如说你的数据结构是
{ s1: [ a1:value1, a2:value2, ... ], s2: [ b1:value1, b2:value2, ... ], ... }
rowIdentities是一个二维数组,包含了行数据对应的id标识符,例如[['a1', 'a2'], ['b1', 'b2', 'b3'], ...]。
sectionIdentities 。如果你不需要section,则直接使用cloneWithRows即可。
sectionIdentities同理是包含了section标识符的数组。例如['s1', 's2', ...]。
- 确定你的数据结构
"results": [
{
"id": 12348124,
"users": [
{
"user": {
"gender": "female",
"name": {
"title": "miss",
"first": "marga",
"last": "seegers"
},
},
},
]
},
{
"id": 12348124,
"users": [
{
"user": {
"gender": "female",
"name": {
"title": "miss",
"first": "marga",
"last": "seegers"
},
},
},
]
},
]
假设上述json为数据返回 我们需要分组展示到ListView上 result数组里每一个元素展示为一个section 每个section里有users数组展示为rows
首先解析json构造我们的数据结构
var organizations = responseData.results,
length = organizations.length,
dataBlob = {},
sectionIDs = [],
rowIDs = [],
organization,
users,
userLength,
user,
i,
j;
for (i = 0; i < length; i++) {
organization = organizations[i];
// Add Section to Section ID Array
sectionIDs.push(organization.id);
// Set Value for Section ID that will be retrieved by getSectionData
dataBlob[organization.id] = id;
users = organization.users;
userLength = users.length;
// Initialize Empty RowID Array for Section Index
rowIDs[i] = [];
for(j = 0; j < userLength; j++) {
user = users[j].user;
// Add Unique Row ID to RowID Array for Section
rowIDs[i].push(user.md5);
// Set Value for unique Section+Row Identifier that will be retrieved by getRowData
dataBlob[organization.id + ':' + user.md5] = user;
}
}
- 实现方法
getSectionData
和getRowData
var getSectionData = (dataBlob, sectionID) => {
return dataBlob[sectionID];
}
var getRowData = (dataBlob, sectionID, rowID) => {
return dataBlob[sectionID + ':' + rowID];
}
这两个方法主要是取得你自定义的数据结构里的值.
- 生成DataSource
this.setState({
dataSource : this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
});
网友评论