How do I get the data source to be displayed in a subtable?

1. Usage scenarios

When we need to display multiple pieces of data submitted in other tables or data obtained through other interfaces in sub-tables, we use remote data sources to assign values to sub-tables, then, we may encounter a problem. Our interface can only return up to 100 pieces of data per page at a time. After assignment, only the 100 pieces of data obtained will be displayed in the subtable, so how do we operate when we have more than 100 pieces of data and want them all to be displayed in sub-tables?

2. Procedure

2.1 obtain data

Use a third-party interface to obtain data. Here, create a form and use the page data source interface to obtain data.

(1) add a remote data source to the data source and call the search form instance details List interface based on criteria

Reference documents:YIDA platform interface (page data source can be called directly)

Create a data source

(2) process data and use the callback function didFetch to return a value of content when the request is completed.

Data processing

2.2 assign values to detail components

Drag the subform component to the page to determine whether the returned data exceeds 100;

When the number of data is less than or equal to 100, the returned data is directly processed into the data format of the subform;

When there are more than 100 pieces of data, you need to splice multiple pages of data together and then process the data into the data format of the subform.

(1) load the data source and obtain totalCount of the returned data. totalCount is the total number of returned data.

  
  this.dataSourceMap.getDatas.load().then(res => {
    console.log("res=>", res); 
    if (res.totalCount <= 100) {
      
      //当实例总数不大于100时
      
    } else {
      
      //当实例总数大于100时，循环调用
      
    }

(2) subform data format

In the YIDA Developer Center, you can find the detailed components and the API code. As you can see, we need to process the data into an array format and use this.$('fileid').setValue();Assign values.

Reference documents:https://developers.aliwork.com/docs/components/form/tableField

(3) when less than 100 pieces of returned data are returned, data is processed

Create a new array newArr, use the map method to loop the data value returned by the interface, define the value object, loop the form data into, and use newArr.push(value) to put the object into the array.

export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  this.loopLoad();
}

//async await
export async function loopLoad() {
  //循环调用，适用于请求全量数据（单次数据量大于100）的场景
  let newArr = []; //最终数据集合
  let params = {
    formUuid: "数据源表单formUuid",
    searchFieldJson: JSON.stringify({
      数据源表查询条件组件唯一标识: [window.loginUser.userId] 
    }),
    pageSize: 100
  };
  this.dataSourceMap.数据源名称.load(params).then(res => {
    if (res.totalCount <= 100) {
      //当实例总数不大于100时
      newArr.push(...res.data); //归整数据
      console.log("100以内", newArr);
    } else {
      //当实例总数大于100时
      this.solveData(res.totalCount, newArr);
    };
  });
}

(4) when more than 100 pieces of returned data are returned, multiple pages of data are cycled and all pushed to the array after processing.

When more than 100 pieces of data are returned, multiple pages of data are returned. We use Math.ceil(res.totalCount / 100) return the number of pages. Use the for loop to obtain the data of each page. After processing the data of each page, push it to the array. Here, we need to loop the data sequentially, therefore, we need to add the corresponding delay operation.

  export async function solveData(count, newArr) {
  //数据量大于100时的处理
  for (let i = 0; i < Math.ceil(count / 100); i++) {
    let params = {
      formUuid: "数据源表单formUuid",
      searchFieldJson: JSON.stringify({
        数据源表查询条件组件唯一标识: [window.loginUser.userId] 
      }),
      pageSize: 100,
      currentPage: i + 1
    };
    await this.dataSourceMap.数据源名称.load(params).then(res => {
      newArr.push(...res.data);
    })
  };
  console.log("大于100", newArr);
} 

(5) after processing the data, get the newArr array and assign newArr to the detail component.

this.$('tableField_kqvnua5s').setValue(newArr);

3. Effect demonstration

4. Try it online

• https://www.aliwork.com/bench/coe? tplUuid=TPL_Z0VY8MAI22IJWE1TD6N2

-------------------- Get the latest information YIDA, welcome to follow US--------------------