案例参考请点击下载案例

原因:很多用户在做list嵌套的时候,由于一些细节配置的原因不明白,导致运行不成功!下面我说下list嵌套中需要注意的点
解决方案:
1.条件设置:
第二层的list组件需要设置filter属性,表示根据第一次list当前行数据过滤出符合条件要显示的数据,比如: $row.val(‘id’)==$object.val(‘ID’),其中
$row.val(‘id’)表示的是第二个list绑定的data的字段
$object.val(‘ID’)表示的是第一个list组件(父)绑定的data字段!
意思就是根据第一个list组件中当前行的ID过滤出第二个list组件中 id=ID 的数据
(理解一下含义!
$row 是list 上层的当前行!
$object是 list 里层对应当前行
分界线就是class属性 x-list-template 上层dom节点用$row ,下层的就是$object
所以 第二个list 的 filter属性 $row 表示里层list的当前行,,$object表示外层list的当前行!
里层list中获取父层的当前行对象可以使用$parent

2.数据请求:
第二层list对应的data组件数据应该一次性加载到data组件中(为了全部显示,保证第一层的子数据全部存在,或者设置过滤条件!根据第一层已经加载的数据的ID去查下第二层数据),所以 data组件autoLoad 设置为true,limit设置为-1,第二层list的limit属性设置为-1

如果第二层的list, 想根据条件,只查询父存在,所关联的子数据(保证请求数据最少)
第二个data组件的autoLoad 也 设置为false 第二层list的autoLoad也设置为false
等待第一个data组件加载外数据后!(可以在onAfterRefresh事件中)
data.each 循环获取 获取所有数据的id的值!
第二个data组件设置过滤条件就是
where parentID in (所有data1 中 id 的集合!)

var data=this.comp('dataXid');
data.setFilter('filter1',"parentID  in '所有data1 中 id 的集合!'");
data.refreshData()

3.分页加载:
如果有scrollView组件配合使用,第二层的list组件的 disableInfiniteLoad 和 disablePullToRefresh 都设置为true,这个属性表示禁止上下拉触发刷新数据,只对外层list组件起作用就行了!

4.优化方法:
list嵌套一般两层就够了!如果有三层list嵌套,页面加载会特别慢的,因为3层嵌套循环,非常耗时的,两层list嵌套,在数据量特别大的情况下,也是非常耗时的!所以数据量比较大的时候,不建议使用list嵌套实现!应该是通过主从表的格式现实页面!效率会快很多的 http://docs.wex5.com/wex5-ui-question-list-2072