数据组件方法

编辑方法

新增数据

数据组件提供 newData 方法新增数据，支持新增多行数据。新增方法为异步方法，异步方法的调用参考《页面模型-代码模型》中 ES6 异步方法

  • 对于文本类型的主键，系统会赋值一个 UUID
  • 对于从表数据，系统还会将主表的主键赋值给从表的外键列
方法：
    newData (JSON options)
描述：
    新增数据，支持新增多行数据
参数：
    {
    "parentRow" : {Row | String} - 树形数据的父节点，支持行对象或行 id，非树形不需要设置,
    "index" : {integer} - 新增数据的位置，缺省新增到最后,
    "defaultValues" : {array} - 新增行的默认值数组 ，数组的长度决定新增行数，数组中的对象是列的默认值
            defaultValues 格式：
                  [
                      {列名:默认值,...},
                      {列名:默认值,...},
                      ...
                  ]
    }

新增一条数据

await this.comp('mainData').newData();

新增多条数据

await this.comp('mainData').newData({
     defaultValues : [
        {sName:'a1',sCode:'b1'},
         {sName:'a2',sCode:'b2'}
     ]
});

新增树形数据

let inputData = this.comp("inputData");
let detailData = this.comp("detailData");
await detailData.newData({
    defaultValues: inputData.toJson({ui:false}),
    parentRow: inputData.getValue("parentId")
})

取值

数据组件提供 getValue 和 getValueByID 方法获取某行某列的值，说明如下

方法：
    getValue (String col, Row row)
描述：
    通过列名和行对象获取列的值
参数：
    col：{String} - 列名称
    row：{Row}(可选) - 行，默认为当前行 
返回值：
    Any

方法：
    getValueByID (String col, String rowid)
描述：
    通过列名和行 ID 获取列的值，函数会遍历所有数据，不要在循环中大量使用以免引发性能问题
参数：
    col：{String} - 列名称
    rowid：{String} - 行 ID 
返回值：
    Any

当前行取值

let parentId = this.comp("inputData").getValue("parentId");

指定行取值

let data = this.comp("inputData")
let parentId = data.getValue("parentId",data.getCurrentRow());

或者

let data = this.comp("inputData")
let parentId = data.getValueByID("parentId",data.getCurrentRowID());

赋值

数据组件提供 setValue 和 setValueByID 方法给某行某列赋值，说明如下

方法：
    setValue (String col, Any value, Row row)
描述：
    通过列名和行对象设置列的值
参数：
    col：{String} - 列名称
    value: {Any} - 值
    row：{Row}(可选) - 行对象，默认为当前行

方法：
    setValueByID (String col, Any value, String rowid)
描述：
    通过列名和行 ID 设置列的值，函数会遍历所有数据，不要在循环中大量使用以免引发性能问题
参数：
    col：{String} - 列名称
    value: {Any} - 值
    rowid：{String} - 行 ID

当前行赋值

this.comp("inputData").setValue("showBtn",true);

指定行赋值

let data = this.comp("inputData")
data.setValue("showBtn",true,data.getCurrentRow());

或者

let data = this.comp("inputData")
data.setValueByID("showBtn",true,data.getCurrentRowID());

复制行

数据组件提供 copyRows 方法将行对象复制到另一个数据组件中，说明如下

方法：
    copyRows (Row row, String destDataId)
    copyRows (Array rows, String destDataId)
描述：
    复制行对象到另一个数据组件中，支持复制多行数据
参数：
    row : {Row} - 要复制的行对象
    rows : {array} - 要复制的一组行对象
    destDataId : {String} - 目标数据组件 id

示例代码

let data = this.comp("productData");
data.copyRows(data.getCurrentRow(),"targetData");

移动行

数据组件提供 moveTo 方法移动行。这个方法只调整显示位置，不调整数据，如需配和数据调整，需要自行处理。方法说明如下

方法：
    moveTo (Row | String srcRow, Row | String targetRow, String mode)
描述：
    移动行到目标行的上面、下面；如果目标行有子节点，可以移动到第一个子节点或最后一个子节点
参数：
    srcRow : {Row | String} - 要移动的行对象或行 id
    targetRow : {Row | String} - 目标行对象或行 id
    mode : {String} - 移动方式: BEFORE、AFTER、FIRST_CHILD、LAST_CHILD

将第一行移到第三行的位置，原第二行和第三行上移，成为第一行和第二行。示例代码如下，移动前后效果图如下

    onMoveToBtnClick = (event) => {
        let data = this.comp("productData");
        //获得移动行
        data.first();
        let srcRow = this.comp("productData").getCurrentRow();
        //获得目标行
        data.next();
        data.next();
        let tarRow = this.comp("productData").getCurrentRow();
        //移动
        this.comp("productData").moveTo(srcRow,tarRow,"AFTER");
    }

1721213755232

1721213844083

交换行

数据组件提供 exchangeRow 方法交换两个行的位置。这个方法只调整显示位置，不调整数据，如需配和数据调整，需要自行处理。方法说明如下

方法：
    exchangeRow (Row | String row1, Row | String row2, Row | String parentRow)
描述：
    交换两个行的位置
参数：
    row1 : {Row | String} - 要交换位置的第一行
    row2 : {Row | String} - 要交换位置的第二行
    parentRow : {Row | String} - 父节点，树形数据时必须指定父节点

第一行和第三行交换位置，示例代码如下，交换前后效果图如下

    onExchangeRowBtnClick = (event) => {
        let data = this.comp("productData");
        //获得第一行
        data.first();
        let srcRow = this.comp("productData").getCurrentRow();
        //获得第二行
        data.next();
        data.next();
        let tarRow = this.comp("productData").getCurrentRow();
        //交换
        this.comp("productData").exchangeRow(srcRow,tarRow);
    }

1721213755232 1721213790109

保存数据

数据组件提供 saveData 方法保存一条数据、提供 saveAllData 方法保存全部数据，分别说明如下。保存方法为异步方法，异步方法的调用参考《页面模型-代码模型》中 ES6 异步方法

方法：
    saveData (JSON options)
描述：
    保存当前行数据，除非很明确只保存这一行数据，否则建议使用 saveAllData 来处理，避免没保存上数据
参数：
    options：{JSON} - 保存参数，格式如下 
    {
        "ignoreInvalid" : {boolean} - 保存时不校验规则
    }

方法：
    saveAllData (JSON options)
描述：
    保存数据组件中编辑过的数据，没有编辑则不执行保存
参数：
    options：{JSON} - 保存参数，格式如下 
    {
        "ignoreInvalid" : {boolean} - 保存时不校验规则
    }

保存全部

let data = this.comp("mainData");
data.saveAllData();

保存当前行

let data = this.comp("mainData");
data.saveData();

保存时不校验规则

数据组件上设置的必填、约束等规则，在执行保存时会进行规则校验，设置参数 ignoreInvalid 为 true，实现不校验规则保存数据，示例代码如下：

let data = this.comp("mainData");
data.saveData({"ignoreInvalid":true});

检查数据

数据组件提供 check 方法检查数据是否符合设置的规则，说明如下

方法：
    check (Boolean force)
描述：
    根据数据组件上设置的规则检查数据
参数：
    force：{Boolwan} - 是否强制检查，检查时机设置为保存前时，默认不执行检查数据
返回值：
    {
        "valid" : {boolean} - 数据是否符合规则
        "msg" : {Array} - 不符合规则时，所有不符合项的提示信息
        “invalidRequired" : {Array} - 所有不符合必填的列
        "invalidConstrait" : {Array} - 所有不符合约束的列
    }

保存数据时系统会自动调用检查数据方法，对于在数据组件中设置了必填、约束等规则，但是不使用数据组件的保存数据方法，可以单独调用检查数据方法，示例代码如下

let data = this.comp("productData");
let info = data.check(true);
if(!info.valid){
    message.error(info.msg);
}

数据是否修改

数据组件提供 isChanged 方法判断数据是否有变化，新增、修改、删除后，isChanged 为 true

方法：
    isChanged ()
描述：
    判断数据是否有变化，新增、修改、删除后返回 true
返回值：
    Boolean

示例代码

if(this.comp("mainData).isChanged()){
    message.info("数据已经修改");
}

删除数据

数据组件提供 deleteData 方法删除数据，说明如下

方法：
    deleteData (Any rows, JSON options)
描述：
    删除数据，当 directDeleteMode=true 时直接提交后台删除，当 confirmDelete=true 时会弹出删除确认框
参数：
    rows：{Any}(可选) - 支持5种情况：空、行对象、行对象数组、行 id、行 id 数组，缺省为当前行
    options：{JSON} - 删除参数，格式：
    {
        "confirm" : {boolean} - 删除确认提示，缺省使用属性 confirmDelete
    }

删除当前行

this.comp("mainData").deleteData();

删除指定行

使用行 id 数组删除

let table = this.comp("table2");
let ids = table.getSelectedRowIds();
this.comp("restData0").deleteData(ids);

使用行对象删除

let data = this.comp("mainData");
data.deleteData(data.getCurrentRow());

清除数据

清除数据和删除数据不同，删除数据会发送请求从数据库中删除数据，清除数据只是清除前端数据组件中的数据，不影响数据库

清除指定行

数据组件提供 remove 方法清除指定行的数据，说明如下

方法：
    remove (Any row)
描述：
    移除指定行的数据，只在前端移除不影响数据库
参数：
    row：{Any}(可选) - 支持5种情况：空、行对象、行 id，缺省为当前行

示例代码

let data = this.comp("productData");
data.remove(data.getCurrentRow());

清除全部

数据组件提供 clear 方法清除全部数据，说明如下

方法：
    clear ()
描述：
    清除数据，前端数据清除不影响数据库中数据

示例代码

this.comp("pageData").clear();

刷新方法

刷新数据

数据组件提供 refreshData 方法刷新数据，总是返回第一页数据，说明如下。刷新方法为异步方法，异步方法的调用参考《页面模型-代码模型》中 ES6 异步方法

方法：
    refreshData (JSON options)
描述：
    数据刷新，当 confirmRefresh=true 并且数据是编辑或者新增状态时，刷新数据时显示刷新确认提示框
参数：
    options：{JSON} - 刷新参数，格式如下 
    {
        "append" : {boolean} - 追加模式，true 不清除原有数据，false 清除原有数据。默认：false，
        "confirm" : {boolean} - 刷新提示，缺省使用属性 confirmRefresh
    }

示例代码

let data = this.comp("数据组件 id");
await data.refreshData();

刷新指定页数据

数据组件提供 loadPageData 方法刷新指定页的数据，可用于数据分页显示时，刷新当前页数据，说明如下

方法：
    loadPageData (Integer pageIndex, JSON options)
描述：
    分页模式下加载第 N 页数据 
参数：
    pageIndex：{Integer} - 页索引
    options：{JSON} 刷新参数，格式如下
    {
        "parentRow" : {Row | String} - 树形数据的父节点，支持行对象或行 id，
        "confirm" : {boolean} - 刷新提示，缺省使用属性 confirmRefresh
    }

示例代码

  • 刷新当前页

从数据组件 pageData 中取出当前页号，调用数据组件的 loadPageData 方法

onRefreshPageDataBtnClick = (event) => {
    //获取当前页号
    let currentPage = this.comp("productData").getPageNumber();
    this.comp("productData").loadPageData(currentPage);
}
  • 刷新树形数据中指定父节点下的数据
let data = this.comp("treeData");
data.loadPageData(1,{"parentRow":data.getCurrentRow()});

过滤方法

过滤数据

数据组件提供 setFilter 方法设置过滤条件，再调用刷新数据方法刷新数据，说明如下。

方法：
    setFilter (String name, FilterObj filter)
描述：
    设置指定名称的过滤表达式，一个数据组件可以有多个过滤表达式，所有的过滤表达式将按 and 连接
参数
    name：{String} - 过滤名称
    filter：{FilterObj} - 过滤表达式，支持两种写法：JSON 数组、DbrestFilter 对象

过滤表达式

过滤表达式支持两种写法，一种是 JSON 数组，格式如下；另一种是 DbrestFilter 对象，参考《JS SDK》中使用 DbrestFilter 构造过滤条件

    [{
        name: 列名,
        value: 值,
        op: 运算符,
        kind: 连接符，并且 and、或者 or，默认 and
    }]

运算符目前支持：

  • 等于 eq、不等 neq、大于 gt、小于 lt、大于等于 gte、小于等于 lte、等于(支持空字符串) eqb、不等于(支持空字符串) neqb
  • 字符匹配 like、字符匹配（不区分大小写）ilike、字符不匹配 nlike、字符不匹配（不区分大小写）nilike
  • 包含 inn、不包含 ninn
  • 为空 isNull、非空 isNotNull
  • 左小括号 LBRAC、右小括号 RBRAC

多种过滤方式

  • 过滤字段等于一个值，使用 eq

过滤条件为：name = '张三'，JS 代码如下

let data = this.comp("数据组件 id");
data.setFilter("eqfilter",[{name:"name",value:"张三",op:"eq"}]);
data.refreshData();
  • 过滤字段包含某些值（等同于 sql 中的 in），使用 inn

过滤条件为：name in ('张三','李四')，JS 代码如下

let data = this.comp("数据组件 id");
data.setFilter("infilter",[{name:"name",value:"张三,李四",op:"inn"}]);
data.refreshData();
  • 过滤字段字符匹配用 like，不匹配用 nlike，通配符使用 *

过滤条件为：name like 'abc%'，JS 代码如下

let data = this.comp("数据组件 id");
data.setFilter("likefilter",[{name:"name",value:"abc*",op:"like"}]);
data.refreshData();
  • 过滤值为空，使用 isNull

过滤条件为：name is null，JS 代码如下

let data = this.comp("数据组件 id");
data.setFilter("infilter",[{name:"name",value:null,op:"isNull"}]);
data.refreshData();
  1. 过滤值非空，使用 isNotNull

过滤条件为：name is not null，JS 代码如下

let data = this.comp("数据组件 id");
data.setFilter("infilter",[{name:"name",value:null,op:"isNotNull"}]);
data.refreshData();

多个过滤条件

  • 日期范围过滤，使用 gte 或者 lte

过滤条件为：createDate >= date1 and createDate <= date2，JS 代码如下

let data = this.comp("数据组件 id");
let startDate=new Date();
startDate.setDate(5);
startDate = wx.Date.toString(startDate, wx.Date.STANDART_FORMAT_SHOT);
let endDate = wx.Date.toString(new Date(), wx.Date.STANDART_FORMAT_SHOT);
let filter = [];
filter.push({name:"createDate",value:startDate,op:"gte"});
filter.push({name:"createDate",value:endDate,op:"lte"});
data.setFilter("customfilter",filter);
data.refreshData();
  • 日期时间范围过滤，使用 gte 或者 lte

过滤条件为：createTime >= '2020-04-02 00:00:00' and createTime <= date，JS 代码如下

let data = this.comp("数据组件 id");
let endDate = wx.Date.toString(new Date(), wx.Date.STANDART_FORMAT);
let filter = [];
filter.push({name:"createTime",value:"2020-04-02T00:00:00.000Z",op:"gte"});
filter.push({name:"createTime",value:endDate,op:"lte"});
data.setFilter("customfilter",filter);
data.refreshData();
  • 多个条件使用 and 或者 or 拼接，此时可能会使用左右小括号 LBRAC 和 RBRAC

例如过滤条件为：(name = '张三' and （code = '001' or address = '上海'))，JS 代码如下

let data = this.comp("数据组件 id");
let filter = [];
filter.push({op:"LBRAC"});
filter.push({name:"name",value:"张三",op:"eq"});
filter.push({op:"LBRAC"});
filter.push({name:"code",value:"001",op:"eq"});
filter.push({name:"address",value:"上海",op:"eq",kind:"or"});
filter.push({op:"RBRAC"});
filter.push({op:"RBRAC"});
data.setFilter("customfilter",filter);
data.refreshData();

清空某个过滤条件

setFilter 的第一个参数就是要清空的 filter 的名字，第二个参数为空，示例代码如下

let data = this.comp("数据组件 id");
data.setFilter("customfilter","");
data.refreshData();

获取所有的过滤条件

数据组件提供 buildFilter 方法获取所有的过滤条件，说明如下

方法：
    buildFilter ()
描述：
    生成返回过滤字符串
返回值：
    String

示例代码

let data = this.comp("数据组件 id");
data.buildFilter();//返回的是数组

清除所有的过滤条件

数据组件的 filters 属性提供 clear 方法清除所有过滤条件，示例代码如下：

let data = this.comp("数据组件 id");
data.filters.clear();
data.refreshData();

树形根过滤

数据组件提供 getTreeOption 方法获取树的定义信息，其中 rootFilter 属性表示根过滤条件

  • 为空时，系统使用 父节点 is null 获取根数据
  • 设置后，使用该条件获取根数据

根过滤表达式

根过滤表达式和普通过滤表达式写法不同，根过滤表达式是一个字符串数组，格式如下

["连接符.列名=运算符.值"]

运算符和连接符同过滤表达式中的运算符和连接符

根过滤案例

  • 过滤字段等于一个值，使用 eq

过滤条件为：parent = '1'，JS 代码如下

let data = this.comp("mainData");
data.getTreeOption().rootFilter = ["parent=eq.1"];
data.refreshData();
  • 多个条件使用 and 或者 or 拼接

过滤条件为：parent = '1' or parent = '2'，JS 代码如下

let data = this.comp("mainData");
data.getTreeOption().rootFilter = ["parent=eq.1","or.parent=eq.2"];
data.refreshData();

获取方法

获取行 id

数据组件提供 getCurrentRowID 方法获取当前行主键列的值，提供 getRowID 方法获取指定行主键列的值

获取当前行 id

数据组件提供 getCurrentRowID 方法获取当前行主键列的值，说明如下

方法：
    getCurrentRowID ()
描述
    获取当前行主键列的值
返回值：
    Any 行 ID

示例代码

let rowid = this.comp("selectData").getCurrentRowID();

获取指定行 id

数据组件提供 getRowID 方法获取指定行主键列的值，说明如下

方法：
    getRowID (Row row)
描述：
    获取指定行主键列的值
参数：
    row：{Row} - 行对象
返回值：
    Any 行 ID

示例代码

let selectData = this.comp("selectData");
let dialogData = this.comp("dialogData");
dialogData.each((option)=>{
    let row = option.row;
    let rowid = option.data.getRowID(row);
    if(null!=selectData.getRowByID(rowid)){
        await selectData.newData();
        let newRow = selectData.getCurrentRow();  
        Object.assign(newRow,row);
    }       
});

获取行对象

数据组件提供 getCurrentRow 方法获取当前行，提供 getRowByID 方法获取指定行对象

获取当前行对象

数据组件提供 current 属性和 getCurrentRow 方法获取当前行，分别说明如下

属性：
    current
描述
    获取当前行
返回值：
    Row 行对象

示例代码

let row = this.comp("selectData").current;

方法：
    getCurrentRow ()
描述
    获取当前行
返回值：
    Row 行对象

示例代码

let row = this.comp("selectData").getCurrentRow();

获取指定行对象

数据组件提供 getRowByID 方法根据行 id 获取行对象，说明如下

方法：
    getRowByID (String rowid)
描述：
    根据行 id 获取行对象
参数：
    rowid：{String} - 行 id
返回值：
    Row 行对象

示例代码

let selectData = this.comp("selectData");
let dialogData = this.comp("dialogData");
dialogData.each((option)=>{
    let row = option.row;
    let rowid = option.data.getRowID(row);
    if(null!=selectData.getRowByID(rowid)){
        await selectData.newData();
        let newRow = selectData.getCurrentRow();  
        Object.assign(newRow,row);
    }       
});

获取行状态

数据组件提供 getCurrentRowState 方法获取当前行状态，提供 getRowState 方法获取指定行状态

获取当前行状态

数据组件提供 getCurrentRowState 方法获取当前行状态，说明如下

方法：
    getCurrentRowState ()
描述：
    获取当前行的状态
返回值：
    String，包括：new,edit,delete,none

示例代码

let data = this.comp("treeData");
let state = data.getCurrentRowState();

获取指定行状态

数据组件提供 getRowState 方法获取指定行状态，说明如下

方法：
    getRowState (Row row)
描述：
    获取指定行的状态
参数：
    row：{Row}（必填） - 行对象
返回值：
    String，包括：new,edit,delete,none

示例代码

let data = this.comp("treeData");
let state = data.getRowState(data.getCurrentRow());

获取所有列标识

数据组件提供 getColumnIDs 方法获取所有列标识

方法：
    getColumnIDs ()
描述
    返回所有列标识，使用','分隔
返回值
    String

示例代码

let columnIds = this.comp("treeData").getColumnIDs();

获取所有列定义

数据组件提供 getColumnDefs 方法获取所有列定义

方法：
    getColumnDefs ()
描述
    返回所有列定义，JSON 格式，key 是列标识，value 是 JSON 格式，其中 label 是列名称
返回值
    JSON

方法返回结果，如下图所示

1737613784472

示例代码

let defs = this.comp("productData").getColumnDefs();

获取当前页号

数据组件提供 getPageNumber 方法获取当前页号，说明如下

方法：
    getPageNumber ()
描述：
    获取当前页号，页号从1开始
返回值
    Integer 页号

示例代码

let currentPage = this.comp("productData").getPageNumber();
this.comp("productData").loadPageData(currentPage);

统计方法

获取记录数

数据组件提供 count 方法获取记录数，说明如下

方法：
    count (Function filterCallback)
描述：
    获取记录数，计算的是前端当前已经加载的数据的记录数，不包含分页还没有加载到前端的数据
参数：
    filterCallback：{Function} - 过滤的回调函数，函数需要返回 boolean，返回 true 表示行有效，缺省全部有效
        回调函数给出参数 event，格式为：{'data': data对象，row：行对象}
返回值
    Integer    行数

示例代码

    //统计 mainData 中记录数
    let count = this.comp('mainData').count();
    //统计 mainData 中 fName 列包括“李”的记录数
    let count = this.comp('mainData').count((ev)=>{
        let v = ev.row.fName;
        return v.indexOf('李')==0;
    });

计算某列的和

数据组件提供 sum 方法计算某列的和，说明如下

方法：
    sum(String col, Function filterCallback)
描述：
    计算某列的和，计算的是前端当前已经加载的数据，不包含分页还没有加载到前端的数据
参数：
    col：列标识
    filterCallback：{Function} - 过滤的回调函数，函数需要返回 boolean，返回 true 表示行有效，缺省全部有效
        回调函数给出参数 event，格式为：{'data': data对象，row：行对象}
返回值
    数值

示例代码

    console.log("计算单价合计----" + productData.sum("price"));
    let sum = productData.sum("price", ({row}) => {
        return row.unit == "台";
    });
    console.log("计算单位等于台的商品的单价合计----" + sum);

计算某列的最大值

数据组件提供 max 方法计算某列的最大值，说明如下

方法：
    max(String col, Function filterCallback)
描述：
    计算某列的最大值，计算的是前端当前已经加载的数据，不包含分页还没有加载到前端的数据
参数：
    col：列标识
    filterCallback：{Function} - 过滤的回调函数，函数需要返回 boolean，返回 true 表示行有效，缺省全部有效
        回调函数给出参数 event，格式为：{'data': data对象，row：行对象}
返回值
    数值

示例代码

    console.log("计算单价最大值----" + productData.max("price"));
    let max = productData.max("price", ({row}) => {
        return row.unit == "台";
    });
    console.log("计算单位等于台的商品的单价最大值----" + max);

计算某列的最小值

数据组件提供 min 方法计算某列的最小值，说明如下

方法：
    min(String col, Function filterCallback)
描述：
    计算某列的最小值，计算的是前端当前已经加载的数据，不包含分页还没有加载到前端的数据
参数：
    col：列标识
    filterCallback：{Function} - 过滤的回调函数，函数需要返回 boolean，返回 true 表示行有效，缺省全部有效
        回调函数给出参数 event，格式为：{'data': data对象，row：行对象}
返回值
    数值

示例代码

    console.log("计算单价最小值----" + productData.min("price"));
    let min = productData.min("price", ({row}) => {
        return row.unit == "台";
    });
    console.log("计算单位等于台的商品的单价最小值----" + min);

计算某列的平均值

数据组件提供 avg 方法计算某列的平均值，说明如下

方法：
    avg(String col, Function filterCallback)
描述：
    计算某列的平均值，计算的是前端当前已经加载的数据，不包含分页还没有加载到前端的数据
参数：
    col：列标识
    filterCallback：{Function} - 过滤的回调函数，函数需要返回 boolean，返回 true 表示行有效，缺省全部有效
        回调函数给出参数 event，格式为：{'data': data对象，row：行对象}
返回值
    数值

示例代码

    console.log("计算单价平均值----" + productData.avg("price"));
    let avg = productData.avg("price", ({row}) => {
        return row.unit == "台";
    });
    console.log("计算单位等于台的商品的单价平均值----" + avg);

优化方法

开启批量处理

使用 JS 处理大量数据时，如果用时超过1秒，可以在处理方法的前面，调用数据组件的 requireBatchTransition 方法，开启批量处理，会大大缩短用时，方法说明如下

方法：
    requireBatchTransition ()
描述：
    开启批量处理

示例代码

    this.comp("mainData").requireBatchTransition();

其他方法

数据序列化

数据组件提供 toJson 方法将数据序列化为 JSON 对象，说明如下

方法：
    toJson (JSON option)
描述：
    获取 JSON 格式序列化对象
参数：
    option：{JSON} - 序列化参数 
        {
            ui: {Boolean} - 是否用于界面展现, true 表示用于展现，false 用于往后端传，默认值: false  
            includeState: {Boolean} - 是否包含行状态, 默认值: false
            excludeCalculateCol: {Boolean} - 是否不包含计算列, 默认值: false
            resultType: {String} - 结果类型, 取值为 list 或 tree, 只对树形数据起作用，默认值：tree
            excludeChildren: {Boolean} - 是否排除子节点, 只对树形数据起作用, 默认值: false
        }
返回值：
    Array(JSON)

序列化为适合作为参数的 JSON

无需参数，即可序列化为只有列标识和值的 JSON，代码如下，运行结果如下图所示

console.log(this.comp("productData").toJson());

1721111558263

序列化为用于界面展示的 JSON

使用 ui = true 参数，日期和时间被转换为当前时区的字符串；使用 includeState = true 参数，可以获得 _recordState。代码如下，运行结果如下图所示

console.log(this.comp("productData").toJson({ui:true,includeState:true}));

1721111587813

序列化树形数据为嵌套 JSON

例如有如下图的树形数据

1721111486095

序列化后的 JSON 使用 _syschildren 存储子节点的数据，保留树形数据的层级关系。代码如下，运行结果如下图所示

console.log(this.comp("treeData").toJson());

1721111435123

序列化树形数据为平板 JSON

使用 resultType = list 参数，不保留树形数据的层级关系，转换为平板数据。代码如下，运行结果如下图所示

console.log(this.comp("treeData").toJson({resultType:"list"}));

1721111473408

遍历数据

数据组件提供 each 方法用于遍历数据，使用 return false; 退出遍历，说明如下

方法：
    each (function callback, Row parentRow)
    each (function callback, String parentRow)
描述：
    遍历数据，使用 return false; 退出遍历
    从数据，只遍历和主当前行相关的数据行
    树形数据，只遍历指定 parentRow 下面的数据，不遍历子节点中的数据
参数：
    callback:{function} - 回调函数，参数如下：
        {
            index: {integer} - 行索引,
            row: {Row} - 行对象,
            data: {Data} 数据组件对象,
            parent: {Row | String} 调用时传入的 parentRow 参数，当树形数据时有效
        }
    parentRow：{Row | String} - 树型数据遍历时指定开始遍历的父节点，支持行对象和行 id，缺省从根开始

示例代码

  • 遍历中退出遍历
let names = [];
this.comp("productData").each((param)=>{
    names.push(param.row.name);
    return false;  //退出遍历
});
  • 遍历树形数据的某个父节点下的数据
let names = [];
this.comp("treeData").each((param)=>{
    names.push(param.row.name);
},data.getCurrentRow());

查找数据

数据组件提供 find 方法在数据组件中查找数据

方法：
    find (Array fields, Array values, Boolean first, Boolean caseInsensitive, Boolean partialKey)
描述：
    根据列和值匹配进行数据查找，可以匹配多列
参数：
    fields：{Array} - 列
    values：{Array} - 值
    first：{Boolean} - 返回第一条
    caseInsensitive：{Boolean} - 忽略大小写
    partialKey：{Boolean} - 模糊查询
返回值：
    Array<Row> 行对象数组

查找一列

查找 fName 中包含"李"的第一条数据，代码如下

let rows = this.comp('mainData').find(['fName'],['李'],true,true,true);
if(rows.length==0) message.info('没有符合条件数据');

查找两列

查找 fName="李四" 并且 fAge=18 的数据，代码如下

let rows = this.comp('mainData').find(['fName','fAge'],['李',18]);
if(rows.length==0) message.info('没有符合条件数据');

查找日期

查找日期支持字符串和 Date 类型两种方式

  • 使用 Date 类型查找，示例代码如下
let data = this.comp("productData");
let date = new Date("2024-07-15“);
let rows = data.find(["createDate"], [date]);
  • 使用字符串查询，示例代码如下
let data = this.comp("productData");
let date = new Date();
let date = wx.Date.toString(date,'yyyy-MM-dd');
let rows = data.find(["createDate"], [date]);

查询日期时间

查找日期时间只支持使用 Date 类型查找，示例代码如下

let data = this.comp("productData");
let date = new Date("2024-07-15 17:48:38");
let rows = data.find(["createDateTime"], [date]);

改变当前行

数据组件中可以有多行数据，只有一行是当前行

  • 表单组件展示的就是数据组件当前行的值
  • 刷新数据后，第一行是当前行
  • 新增数据后，新增的数据行是当前行
  • 在表格或列表组件中，点击某行，某行就成为当前行

另外，还支持使用代码改变当前行

移动到指定行

数据组件提供 to 方法移动当前行到指定行，即将指定行变为当前行

方法：
    to (Row | String row) 
描述：
    移动到指定行
参数：
    row：{Row | String} - 行或者行 ID

示例代码

this.comp("detailData").to(row.id);

移动到第一行、最后一行、前一行、后一行

数据组件提供 first、last、pre、next 方法移动当前行到第一行、最后一行、前一行、后一行

加载数据

数据组件提供 loadData 方法加载数据。通常用于将其他方式返回的 json 数据，加载到数据组件中

  • 对比 newData 方法
    • newData 插入的数据，行状态都是 new，isChanged 方法返回 true，执行 saveAllData 这些数据都可以提交
    • loadData 插入的数据，行状态都是 none，isChanged 方法返回 false，执行 saveAllData 没有数据需要提交
  • 需要注意的是，此方法不设置主键的值，需要自行手动设置
  • 默认是覆盖模式，会删除覆盖原来数据，如果要在原来的数据后面追加数据，需要设置 append 参数为 true
  • 加载的数据，即使是 1 条数据，也需要传 json 列表 []，不能传 {}，否则数据加载不进去
  • 此方法只是在前端修改数据组件的内容，不涉及后端提交数据库
方法：
    loadData (Array(JSON) data, JSON options)
描述：
    加载数据
参数：
    data：{Array(JSON)} - 需要加载的数据，格式同序列化格式
    options: {JSON} - 参数，格式如下
    {
        index：{integer} - 加载数据的插入位置，缺省数据插入到末尾
        append：{Boolean} - 是否追加模式
        override：{Boolean} - 是否覆盖，当出现 id 相同的行时，是否进行数据覆盖替换
        parentRow：{Row | String} - 树形数据的父节点，支持行对象或行 id，非树形不需要设置
        loadAll：{Boolean} - 针对树形数据，表示是否已加载所有数据，如果为true，叶子节点不显示展开图标
        buildVirtualNode：{Boolean} - 是否构建虚拟树
        buildTreeData：{Boolean} - 是否构建树结构数据
    }

示例代码

let current = detailData.getCurrentRow();
this.comp("inputData").loadData([current.toJson()],{buildTreeData:true});

设置总记录数

数据组件提供 setTotal 方法设置总记录数，用于给分页组件提供分页依据，说明如下

方法：
    setTotal (Integer count)
描述：
    设置总记录数，包括分页没有加载的记录数
参数：
    count：{Integer} - 总记录数

示例代码

this.comp("inputData").setTotal(100);

判断数据是否存在

数据组件提供 exist 和 existID 方法判断数据是否存在，用于添加数据之前的检查，说明如下

方法：
    exist (Row row)
描述：
    根据行对象判断行是否存在
参数：
    row：{Row} - 数据组件的行对象
返回值：
    Boolean

示例代码

let data = this.comp("selectData");
let row = data.getCurrentRow();
if(data.exist(row)){
    message.info("数据已存在！");
}       
});

方法：
    existID (String rowid)
描述：
    根据行 id 判断行是否存在
参数：
    rowid：{String} - 行 id
返回值：
    Boolean

示例代码

let selectData = this.comp("selectData");
let dialogData = this.comp("dialogData");
dialogData.each((option)=>{
    let row = option.row;
    let rowid = option.data.getRowID(row);
    if(!selectData.existID(rowid)){
        await selectData.newData();
        let newRow = selectData.getCurrentRow();  
        Object.assign(newRow,row);
    }       
});

results matching ""

    No results matching ""