listTable组件在创建时“默认展开”的设置是勾选上的,就是默认展开所有的子数据
listTable
控制每次只显示一个从表的数据可以把“默认展开”勾选去掉,点击哪个主数据再显示对应的子数据
具体设置如下:
1.在主data上定义一个计算关系,如名字是rowVisible
rowVisible

2.在listTable生成的节点中找有hide样式的tr,bind-visible上设置val(“rowVisible”)==’true’
并且自定义一个属性bind-attr-title值设置为主data的主键值(bizData中的概念别名就是主键)
hide

3.定义一个空的class

1
.rowVisible{}

4.在listTable生成的节点中找有info样式的tr,重写bind-click事件,如下:
info

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");
                 
        })
    }
};