3.3.2.1 组件API
1、获取组件JS对象
在JS代码中如果要访问组件的属性或者调用组件的方法,就必须先获取组件的JS对象。使用this.comp("组件的id属性值")方法获取。
示例:
获取数据集JS对象
this.comp("restData");
2、数据集组件API
小程序的页面是数据驱动的,即通过操作数据展现界面,数据集组件作为数据的载体,通过调用数据集组件的API来操作数据。
在数据集组件中,有两个JS对象需要掌握,一个是数据集组件JS对象,代表数据集组件,另一个是行数据对象,代表一行数据。使用数据集组件的数据查找方法,可以获得行数据对象数组;在遍历数据集组件的回调函数中,也可以获得行数据对象。在数据集组件的取值和赋值等方法中,行数据对象可以作为方法的参数。
l 刷新数据refresh
根据数据集组件中设置的过滤条件、排序条件和分页数据大小,从数据集中查询数据加载到数据集组件中。
示例:
this.comp("restData").refreshData();
l 设置过滤条件setFilter
设置不同的过滤条件,可以得到不同的数据。该方法有2个参数,第一个参数是过滤条件名称。如果两次设置时名称相同,表示覆盖之前设置的过滤条件;如果名称不同,表示两次设置的过滤条件同时起作用。第二个参数是过滤条件JSON数组,JSON中包括列标识、过滤值、运算符和组合方式。运算符目前支持:等于eq、不等neq、大于gt、小于lt、大于等于gte、小于等于lte、字符匹配like、字符匹配(不区分大小写)ilike、包含inn、为空isNull、非空isNotNull。组合方式取值范围:或者or和并且and,默认为and。
示例:
设置“状态”等于“正常”且“商品分类”等于“芍药科”的过滤条件。
let filter = [];
let filterobj = {
name : "fzhuangtai",
value : "正常",
op : "eq"
};
filter.push(filterobj);
filterobj = {
name : "fshangpinfl",
value : "芍药科",
op : "eq"
};
filter.push(filterobj);
this.comp("restData").setFilter("fitler1",filter);
l 数据查找find()
在数据集组件中,根据列和值匹配进行数据查找,可以匹配多列
示例
查找“状态”列等于“正常”的记录
let rows = this.comp("restData").find(["fzhuangtai"],["正常"]);
查找“状态”列等于“正常”且“商品分类”等于“芍药科”的记录
let rows = this.comp("restData").find(["fzhuangtai","fshangpinfl"],["正常","芍药科"]);
l 列取值getValue
2个参数,第1个参数是列标识,第2个参数是行对象,表示获取指定行的指定列的值。如果不提供第2个参数,表示获取数据集组件的当前行的值,
示例
获取数据集组件当前行的“商品名称”列的值,存入变量spName中
let spName = this.comp("restData").getValue("fshangpinmc");
查找“状态”等于“正常”的行,获取找到的第一行的“商品名称”
let rows = this.comp("restData").find(["fzhuangtai"],["正常"]);
this.comp("restData").getValue("fshangpinmc",rows[0]);
l 列赋值setValue
3个参数,第1个参数是列标识,第2个参数是值,第3个参数是行对象,表示给指定行的指定列赋值。如果不提供第三个参数,表示给数据集组件的当前行赋值,
示例
给数据集组件当前行的“商品名称”列赋值“玫瑰”
this.comp("restData").setValue("fshangpinmc","玫瑰");
查找“状态”等于“正常”的行,给找到的第一行的“现价”列赋值199
let rows = this.comp("restData").find(["fzhuangtai"],["正常"]);
this.comp("restData").setValue("fxianjia","199",rows[0]);
l 新增newData(options)
在数据集组件中新增一条空数据,主键已生成
示例:
this.comp("restData").newData();
l 保存saveData
只保存数据集组件当前行数据至数据库
示例:
this.comp("restData").saveData();
l 全部保存saveAllData
将数据集组件中所有新增或修改的行,保存至数据库
示例:
this.comp("restData").saveAllData();
l 删除deleteData
在数据库中删除当前行数据,删除时弹出删除确认对话框
示例:
this.comp("restData").deleteData();
l 遍历数据each
遍历数据集组件中的所有行,each方法的参数是回调函数,系统为每一行触发一次回调函数,其中回调函数的参数名可以自定义,例如options。使用options.row可以获取行对象。
示例:
this.comp("restData").each(function(options){
let spName = options.row.fshangpinmc;//获取“商品名称”列的值
options.row.fxianjia = 99;//给“现价”列赋值
})
l 移动当前行to
改变数据集组件的当前行,改为指定的行
示例:
通过find方法查找“状态”等于“正常”的行,将找到的第二行指定为当前行
let rows = this.comp("restData").find(["fzhuangtai"],["正常"]);
this.comp("restData").to(rows[1]);
l 加载数据loadData(data, append, parent, index)
将由列标识和列值组成的JSON数组加载到数据集组件中。可用于从第三方获取数据,添加到数据集组件中显示。该方法有4个参数,第一个参数是JSON数组,第二个参数表示是追加还是替换,第4个参数表示插入的位置。
JSON数组如图14-3所示,键为列标识,值为列值。
图14-3 加载数据的JSON数组
示例:
this.comp("restData").loadData(json, true);
l 序列化toJSON
将数据集组件中的数据序列化为JSON对象,可用于将数据集组件中的数据导出。
示例:
let json = this.comp("restData").toJSON();