listTable组件在创建时“默认展开”的设置是勾选上的,就是默认展开所有的子数据
控制每次只显示一个从表的数据可以把“默认展开”勾选去掉,点击哪个主数据再显示对应的子数据
具体设置如下:
1.在主data上定义一个计算关系,如名字是rowVisible
2.在listTable生成的节点中找有hide样式的tr,bind-visible上设置val(“rowVisible”)==’true’
并且自定义一个属性bind-attr-title值设置为主data的主键值(bizData中的概念别名就是主键)
3.定义一个空的class
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"); }) } };
评一波