目录

分组列表（ListView list-type=”group”）

功能说明

列表分组展示，支持列表分组功能，数组内嵌数组。
对应的数据结构是JSON数组，例如：

json = {
    source:[{
        group:"服务类",
        row : [{
            id : "id_view",
            class : "页面服务"
        }]
    }]
}

HTML5

<listView id="listviewdefine0" bindfield="source,row" list-type="group" collapsed="true">
    <div id="panel0">
        <label id="label0" bindfield="group">label</label>
    </div>
    <div id="panel1">
        <label id="label1" bindfield="id">label</label>
        <label id="label2" bindfield="class">label</label>
    </div>
</listView>

属性列表

支持公共属性
参见公共属性说明

事件列表

支持公共事件
参见公共事件说明

实例

1、实现分组列表功能

function com$yyuap$demo$ControllerGroupListViewController$listviewdefine0_onload(sender, args) {
    var json = {
        "source" : [{
            "group" : "服务类",
            "row" : [{
                "id" : "id_view",
                "class" : "页面服务"
            }, {
                "id" : "id_network",
                "class" : "文件服务"
            }]
        }, {
            "group" : "控件类",
            "row" : [{
                "title" : "音乐控件"
            }, {
                "title" : "视频控件"
            }]
        }]
    }
    $ctx.push(json);
}
//点击具体行信息
function com$yyuap$demo$HomeWithListviewController$rowclick() {
    var data = $id("listviewdefine0").get("row");
    $alert("当前行号:" + data); //打出当前选中的json字符串
}
//点击行索引
function rowclick(sender, args) {
    var index1 = args.groupindex//点击的分组索引
    var index2 = args.childindex//点击所在组的行索引
    var index3 = $id("listviewdefine0").get("rowindex"); //兼容以前的rowindex含义，表示二维数组变为一维数组后的绝对行索引号
}

分组列表数据结构如下：

{
    groups : [{
        "gname" : "A",
        "rows" : [{
            "x" : 1
        }, {
            "x" : 2
        }, {
            "x" : 3
        }]
    }, {
        "gname" : "B",
        "rows" : [{
            "x" : 4
        }, {
            "x" : 5
        }, {
            "x" : 6
        }]
    }]
}

当groupindex=1，childindex=2时，rowidnex =7，即x:6这一行

2、实现分组列表快速定位

在加载列表的onload事件里加上如下代码：

var indexdatasource = ["A","B","C","D","E","F"];//这里可以任意写索引，按这里写的顺序显示，逻辑是第一个字母指向第一个分组，第二个字母指向第二个分组，以此类推
indexdatasource = $jsonToString(indexdatasource);
$id("listviewdefine0").set("indexdatasource", indexdatasource);

效果如下：

3、创建列表时动态修改列表里控件的信息

此方法已过时，不推荐使用，请使用多模板列表代替（示例4）

增加onitemcreate事件（此事件效率较低，谨慎使用）

//列表行创建事件
<listView id="listviewdefine0" bindfield="cell" onitemcreate="myRowCreate()">
    <div id="panel0">
        <div id="panel1">
            <label id="label0">label</label>
        </div>
        <div id="panel2"/>
    </div>
</listView>

args结构如下：

function functionmyRowCreate(sender, args) {
    var args = {
        "event" : {
            "childindex" : 1,
            "groupindex" : 2,
            "row" : [{}, {}]//数组，每一数组项是一个JSON,包含了控件，如：{"controlid":"label0","color":"#0000FF","value":"绿"}
        }
    }
}

在onitemcreate事件中对itemsource属性赋值，实现对行内控件赋值
onitemcreate事件中，对itemsource赋值

//1、修改指定组的指定行内控件(分组列表改行)
params = {
    "id" : "listviewdefine0",
    "itemtype" : "child", //修改行
    "groupindex" : "3", //修改指定分组索引号
    "childindex" : "2", //修改指定行索引号
    row : [{
        "controlid" : "label0",
        "color" : "#0000FF",
        "value" : "绿"
    }, {
        "controlid" : "label1",
        "color" : "#0000ee",
        "value" : "xxxx"
    }]
}
$id("listviewdefine0").set("itemsource", jsonToString(params));
//2、修改指定组内控件(分组列表改组)
params = {
    "id" : "listviewdefine0",
    "itemtype" : "group", //修改组
    "groupindex" : "3", //修改指定分组索引号
    "row" : [{
        "controlid" : "label0",
        "color" : "#0000FF",
        "value" : "绿"
    }]
}
$id("listviewdefine0").set("itemsource", jsonToString(params));
//3、修改指定行内控件(普通行列表改行)
params = {
    "id" : "listviewdefine0",
    "itemtype" : "child", //修改行
    //单列表无需指定groupindex，即使写也不起作用
    "childindex" : 2,
    "row" : [{
        "controlid" : "label0",
        "color" : "#0000FF",
        "value" : "绿"
    }, {
        "controlid" : "label1",
        "color" : "#0000ee",
        "value" : "xxxx"
    }]
}
$id("listviewdefine0").set("itemsource", jsonToString(params));

示例

<div id="viewPage0" onload="this.onload()">
    <listView id="listviewdefine0" bindfield="cell" onitemcreate="create()">
        <div id="panel0">
            <div id="panel1">
                <label id="label0" bindfield="">label</label>
            </div>
            <div id="panel2"/>
        </div>
    </listView>
    <input id="button0" value="返回" onclick="this.button0_onclick()" type="button"/>
</div>

functioncom$requirements$List4201cellController$onload(sender, args) {
    varjson = {
        cell : [{
        }, {
        }]
    };
    $ctx.push(json);
}
functioncreate(sender, args) {
    varparams = {};
    $alert(args);
    args.event = $stringToJSON(args.event)
    if (args.event.childindex == 0) {
        params = {
            id : "listviewdefine0",
            itemtype : "child",
            groupindex : "0", //第几组，普通列表可以没有这个参数
            childindex : "0",
            row : [{
                controlid : "label0",
                color : "#FF0000",
                value : "红"//未绑定字段则生效
            }]
        }
    }
    if (args.event.childindex == 1) {
        params = {
            id : "listviewdefine0",
            itemtype : "child",
            groupindex : "0",
            childindex : "1",
            row : [{
                controlid : "label0",
                color : "#0000FF",
                value : "绿"//未绑定字段则生效
            }]
        }
    }
    $id("listviewdefine0").set("itemsource", jsonToString(params));
}

4、列表多模板实现不同行展现

在DSL的listView标签下有多个div，每个div就是一个行模板，数据在渲染时会根据JSON中的ListViewSelector字段判断使用哪个行模板展示，0表示第一个、1表示第二个、依次类推。

列表DSL：

<listView id="listviewdefine0" bindfield="list" onload="this.loadOpinionDetail()">
    <div id="panel0">
        <div id="panel1">
            <label id="label2" bindfield="opinionDesc" type="multiline">我：内容</label>
            <label id="label3" bindfield="opinionTime">2015-05月-29 15:31:00</label> 
        </div> 
    </div>
    <div id="panel2">
        <div id="panel3">
            <label id="label4" bindfield="opinionDesc" type="multiline">客服：内容</label>
            <label id="label5" bindfield="opinionTime">2015-05月-29 15:31:00</label> 
        </div> 
    </div> 
</listView>

JS代码：

var json = {
    list : [{
        opinionDesc : "我：这个应用不错！",
        opinionTime : "2015-05月-29 15:31:00",
        ListViewSelector : "0"
    }, {
        opinionDesc : "客服：当然您在功能上有什么好的想法也可以反馈给我们哦！",
        opinionTime : "2015-05月-29 15:31:00",
        ListViewSelector : "1"
    }, {
        opinionDesc : "我：移动互联网化的又一个先例。",
        opinionTime : "2015-05月-29 15:31:00",
        ListViewSelector : "0"
    }]
}
$ctx.push(json);

5、实现列表外层容器滚动

参考《常见问题-DSL框架-实现列表外层容器滚动》