listTable组件是两个list嵌套显示,如下
listTable

图1

在listTable创建时设置里层的list时要设置关联的data通过哪个关系给外层的list的关联的data形成主从
listTable创建时有设置“默认展开”和“展开图标”的设置,“默认展开”是控制里层的list默认是否展开显示状态如图1的展现,“展开图标”是点击外层list隐藏里层list时外层list的序号列前会显示图标,下面的案例中选择的的是icon-arrow-right-b
icon

需要注意的是,如果在两个data设置了主从关系,那么默认只有第一条主数据会显示子,下面的都不会显示

当把“默认展开”的选项勾掉,显示效果如下
listTable2

listTable的默认实现时在外层的list上点击时会控制里面的list是否显示,并在外层list的序号前显示一个icon-arrow-right-b格式的图标,当里层的list没有数据时会显示标题和箭头图标,如下:

listTable1

如果要控制里层的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调用这个函数,如下图
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');

	};

click