Custom page select row auto sum

1. Scenario

When displaying data on a custom page, you sometimes need to additive operation the selected multiple rows of data, so how can we quickly calculate the sum of selected row values and display them on the page? Here, we will show you how to realize automatic sum of custom page selection lines.

2. Implementation steps

2.1 Create a page

Basic data table 」:The form page stores basic data, such as titles and values.

Basic data table

Custom page sum 」:Customize the page, use the table component, and put the value component to display the sum data.

Custom page sum

2.2 The remote data source obtains the to-do list and displays it in the table.

2.2.1 Add a remote data source and call the "search form instance details list based on criteria" interface

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

Create a remote data source and configure the API to obtain form data.

2.2.2 process the returned data into a table format

Add a callback function when the request is completed (didFench)

Define the content to be used in the value and configure a unique value for the data primary key of the table. Therefore, "formInstId", that is, the instance ID, is used as the primary key.

The reference code is as follows:

function didFetch(content) {
  // content.b = 1; 修改返回数据结构中的 b 字段为1
  const arr = [];
    const data = content.data.map((item) => {
      let value = {
        name: item.formData.textField_ktwjybnu,
        salary: item.formData.numberField_ktwjybny,
        formInstId: item.formInstId,
       }
      arr.push(value)
    })

  const result = {
    "data": arr,
    "totalCount": content.totalCount,
    "currentPage": content.currentPage,
  }
  return result; // 重要，需返回 content
}

2.2.3 Display processed data in a table

Bind a data source to the table and configure formInstId as the primary key.

Bind a data source and configure a primary key

2.2.4 configure table paging

Add paging action

2.3 enable row selection and sum the obtained data

2.3.1 Open row selector

Open row selector

2.3.2 add select change callback function and sum assignment

(1) add select change callback function

Add select change callback function

(2) obtain row data and sum assignment

When row data is selected, selectedRowKeys and records are returned, of which records is the processed row data. Therefore, you need to loop the selected row data to obtain the values and add the values in sequence. Finally, the added data is assigned to the numeric component.

The reference code is as follows:

export function onSelectChange(selectedRowKeys, records) {
	console.log(selectedRowKeys, records);
	//存储选中行数据
  const arrData = []
  let salarySum = 0;
   records.forEach(item => {
		// 计算总金额
		salarySum = salarySum + item.salary;
  	// 存储选中行数据
  	arrData.push(item);
  });
  console.log("总数", salarySum);
  this.$('numberField_ktwk2hbu').setValue(salarySum)
}

3. Achieve results

4. Try it online

For online experience, please go to the Developer Center.👉Custom page select row auto sum

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

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