目录

列表（ListView）

功能说明

支持数据列表功能的使用，列表可以是固定长度的；也可以是不固定长度的，根据加载数据的多少来展示列表。
对应的数据结构是JSON数组，例如：

json = {
    list:[{
        "name":"常用控件"
    },{
        "name":"列表"
    }]
}

HTML5

<listView id="listviewdefine0" bindfield="list" collapsed="true">
    <div id="panel0">
        <label id="label0" bindfield="name">label</label>
    </div>
</listView>

属性列表

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

事件列表

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

实例

1、列表数据加载功能和选择具体行

<listView id="listviewdefine0" bindfield="controllerlist" onload="onload()"onItemClick="rowclick()>
    <div id="panel0">
        <div id="panel1">
            <label id="label0" bindfield=" "> </label>
            <label id="label1" bindfield="name"> </label>
        </div>
    </div>
</listView>

//组装数据
function onload(sender, args) {
    var json = {
        controllerlist : [{
            "id" : "id_0",
            "name" : "常用控件"
        }, {
            "id" : "id_1",
            "name" : "列表"
        }]
    };
    $ctx.push(json);
}
//点击具体行json
function rowclick(sender, args) {
    var data = $id("listviewdefine0").get("row");
    $alert("当前行号:" + data); //打出当前选中的json字符串
}
//点击具体行行号
function rowclick(sender, args){
    var index = $id("listview0").get("rowindex");
    $alert(index);
}

2、展示列表的页面传值、下翻功能

<listView id="listviewdefine0" bindfield="persons" onuprefersh="onuprefersh()" linedelshow="true" ondownrefersh="ondownrefersh()" onload="onload()" onItemClick="rowclick()" onitemdelete="onitemdelete()">
    <div id="panel0">
        <div id="panel1">
            <label id="label0" bindfield="" onclick="this.label0_onclick()">姓名</label>
            <label id="label2" bindfield="name"/>
            <label id="label1" bindfield="">电话号码</label>
            <label id="label3" bindfield="tel"/>
        </div>
        <div id="panel2"/>
    </div>
</listView>

//加载数据
function onload(sender, args) {
    var mylist = $cache.read("mylist");
    if (!mylist) {
        var json = {
            persons : []
        };
        for (var i = 0,
            len = 100; i < len; i++) {
            var person = {};
            person["id"] = "10" + i.toString();
            person["name"] = "王小宝" + i.toString();
            person["tel"] = 13811220000 + i;
            json.persons.push(person);
        }
        $ctx.push(json);
    } else {
        $ctx.push($stringToJSON(mylist));
    }
}
//页面传值
function rowclick(sender, args) {
    $view.open({
        "viewid" : "com.app122.PersonDetails",
        "isKeep" : "true",
        "data" : $id("listviewdefine0").get("row"),
        "callback" : "mycallback()"
    });
}
function mycallback() {
    var data = $param.getJSONObject("newData");
    var json = $ctx.getJSONObject();
    for (var i = 0,
        len = json.persons.length; i < len; i++) {
        if (json.persons[i].id == data.id) {
            json.persons[i] = data;
            break;
        }
    }
    $ctx.push(json);
}
//向下翻页
function ondownrefersh(sender, args) {
    var oldjson = $ctx.getJSONArray("persons");
    var length = oldjson.length;
    var json = {
        persons : oldjson
    };
    for (var i = length; i < length + 20; i++) {
        var person = {};
        person["id"] = "10" + i.toString();
        person["name"] = "王小宝" + i.toString();
        person["tel"] = 13811220000 + i.toString();
        json.persons.push(person);
    }
    $ctx.push(json);
}

3、列表左滑时出现的button个数和样式

说明
可以随意定义左滑时出现的button个数和样式，imagebutton支持的属性创建button时都支持设计器上进行如下操作：

<listView id="listviewdefine0" bindfield="source420" linedelshow="true" onload="this.onload()">
    <div id="panel0">
        <div id="panel1">
            <label id="label0" bindfield="row420">label</label>
        </div>
        <div id="panel2"/>
    </div>
</listView>

functioncom$requirements$SlidingitemController$onload(sender, args) {
    var rightflipper = [{
        "halign" : "center",
        "text-align" : "right",
        "width" : "70",
        "icon-width" : "12",
        "istogglebutton" : "false",
        "font-pressed-color" : "#ffffff",
        "icon-height" : "12",
        "height" : "59", //与列表行高度相同即可
        "color" : "#ffffff",
        "layout-type" : "linear",
        "background" : "#FF615A",
        "font-size" : "12",
        "icon-background-image" : "audit_refuse.png",
        "value" : "拒绝",
        "icon-pressed-image" : "audit_refuse.png",
        "font-family" : "default",
        "valign" : "center",
        "checked" : "false",
        "icon-text-spacing" : "8",
        "onclick" : "a()"//点击事件
    }, {
        "halign" : "center",
        "text-align" : "right",
        "width" : "70",
        "icon-width" : "12",
        "istogglebutton" : "false",
        "font-pressed-color" : "#ffffff",
        "icon-height" : "12",
        "height" : "59", //与列表行高度相同即可
        "color" : "#ffffff",
        "layout-type" : "linear",
        "background" : "#15AD64",
        "font-size" : "12",
        "icon-background-image" : "audit_agree.png",
        "value" : "同意",
        "icon-pressed-image" : "audit_agree.png",
        "font-family" : "default",
        "valign" : "center",
        "checked" : "false",
        "icon-text-spacing" : "8",
        "onclick" : "b()"//点击事件
    }];
    $id("listviewdefine0").set("slidingitems", rightflipper);
    var json = {
        source420 : [{
            row420 : "支持操纵列表cell"
        }, {
            row420 : "分组按字母排序"
        }, {
            row420 : "laber支持html"
        }, {
            row420 : "获取本地联系人所有信息"
        }, {
            row420 : "列表左滑用户能自行设置"
        }]
    };
    $ctx.push(json);
}
function a() {
    $alert("审核通过");
}
function b() {
    $alert("审核不通过");
}

效果如下

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、创建列表时动态修改列表里控件的信息(Android7.0系统不推荐使用)

此方法已过时，不推荐使用，请使用多模板列表代替（示例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 myRowCreate(sender, args) {
    var args = {
        "event" : {
            "childindex" : 1,
            "groupindex" : 2,
            "row" : [{}, {}]//数组，每一数组项是一个JSON,包含了控件，如：{"controlid":"label0","color":"#0000FF","value":"绿"}
        }
    }
}

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

说明
onitemcreate事件中，对itemsource赋值时
修改指定行内控件（普通行列表改行）

$id("listviewdefine0").initListChildItem({
    "childindex" : 1,//当前的child行的索引号，从0开始
    "row" : [{
        "controlid" : "label0",
        "visible" : "false",
        "color" : "#e3e3e3"
        //还可以增加类似上述的其他dsl属性key-value值
    }]
})

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

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