图1
在listTable创建时设置里层的list时要设置关联的data通过哪个关系给外层的list的关联的data形成主从
listTable创建时有设置“默认展开”和“展开图标”的设置,“默认展开”是控制里层的list默认是否展开显示状态如图1的展现,“展开图标”是点击外层list隐藏里层list时外层list的序号列前会显示图标,下面的案例中选择的的是icon-arrow-right-b
需要注意的是,如果在两个data设置了主从关系,那么默认只有第一条主数据会显示子,下面的都不会显示
listTable的默认实现时在外层的list上点击时会控制里面的list是否显示,并在外层list的序号前显示一个icon-arrow-right-b格式的图标,当里层的list没有数据时会显示标题和箭头图标,如下:
如果要控制里层的list没有数据是不显示标题和图标,可以如下控制:
1.控制标题不显示:定义一个js函数
Model.prototype.rowVisible = function(event) { var rowid = event.getID(); var cData2 = this.comp("bizData2");//里层嵌套list关联的data var rows = cData2.find([ "fZB" ], [ rowid ]);//通过外层rowid查找里层的data上是否有相关的子数据 if (rows.length > 0) { return true; } else return false; }
在外层list下生成的两个tr的第二个tr上设置bind-visible调用这个函数,如下图
2.控制图标不显示,修改如下图第一个tr上bind-click,直接到js代码中如下实现:
Model.prototype.tr7Click = function(event) { var $e = $(event.currentTarget); var rowid = event.bindingContext.$object.getID(); var cData = this.comp("bizData2");//里层嵌套list关联的data var rows = cData.find([ "fZB" ], [ rowid ]);//通过外层rowid查找里层的data上是否有相关的子数据 if (rows.length > 0) { $('>td>i.x-expand-i', $e).toggleClass('icon-arrow-right-b'); } $e.next().toggleClass('hide'); };
评一波