网站首页 >> 牛刀云小程序开发 >> 第2篇 开发模式 >> 页面开发 >> 常用API介绍

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();