listTable组件在创建时“默认展开”的设置是勾选上的,就是默认展开所有的子数据
控制每次只显示一个从表的数据可以把“默认展开”勾选去掉,点击哪个主数据再显示对应的子数据
具体设置如下:
1.在主data上定义一个计算关系,如名字是rowVisible
2.在listTable生成的节点中找有hide样式的tr,bind-visible上设置val(“rowVisible”)==’true’
并且自定义一个属性bind-attr-title值设置为主data的主键值(bizData中的概念别名就是主键)
3.定义一个空的class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | Model.prototype.tr2Click = function (event) { var $oldRow = $( this .getElementByXid( "listTable1" )).find( ".rowVisible" ); //获取有自定义rowVisible样式tr var $e = $(event.currentTarget); //获取当前点击的tr //判断展开主没有点击收缩直接切换到其他行时设置为收缩状态 if ($oldRow.length>0){ for ( var i = 0;i<$oldRow.length;i++){ if ($oldRow[i].title !=$e.next()[0].title && !$oldRow.hasClass( "hide" )){ $oldRow.removeClass( "rowVisible" ); $oldRow.addClass( 'hide' ); } } } //控制展开或收缩 $( '>td>i.x-expand-i' , $e).toggleClass( '' ); $e.next().toggleClass( 'hide' ); $e.next().addClass( "rowVisible" ); //跟计算关系rowVisible赋值,控制bind-visible var data = this .comp( "bizData1" ); var row = event.bindingContext.$object; var rowID = event.bindingContext.$object.getID(); if (!$e.next().hasClass( 'hide' )) { data.each( function (param) { if (param.row.getID() == rowID) { param.row.val( "rowVisible" , "true" ); } else param.row.val( "rowVisible" , "false" ); }) } }; |
评一波