Copy and insert Subforms

1. Use background

Currently, only the functions of deleting and adding a new item are available for subforms. If the functions of "inserting" and "copying" can be added, it will be more convenient to fill in data by using subforms, this document uses the functions of "insert" and "copy" by writing code.

2. Procedure

2.1 Step 1: Add a subform action column

Add a subform and drag the drop-down single-select, single-line text, and numeric components.

In the action column of the subform property, add two action columns named copy and insert ".

Figure 2.1-1 add action column

2.2 Step 2: Operation column binding callback function

Bind to the operation column callback function respectivelyonActionClickAndonActionClick2The callback function.

Copy: click copy to add a row of data to the last row.

Insert function: click insert to insert a row of empty data under the current row.

Figure 2.2-1 bind callback functions

The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier of the component.

//复制
 export function onActionClick({ index, groupId, itemValue, actionKey }) {
   const tabArr = [];
   const tabobj = {};
   const tab = this.$("tableField_kvumefq7").getValue();//获取子表单内全部数据
   for(let i = 0; i < tab.length; i++){
     tabArr.push(tab[i]) //将原始子表单内的数据放入到创建的新数组内
   }
   tabobj.selectField_kvumefqb = itemValue.selectField_kvumefqb; //当前选中复制的下拉单选数据
   tabobj.textField_kvumefq8 = itemValue.textField_kvumefq8; //当前选中复制的单行文本数据
   tabobj.numberField_kvumefqa = itemValue.numberField_kvumefqa; //当前选中复制的数值组件数据
   tabArr.push({ ...tabobj })
   this.$("tableField_kvumefq7").setValue(tabArr);//子表单重新赋值
}

//插入
export function onActionClick2({ index, groupId, itemValue, actionKey }) {
  const tabArr = [];
  const tabobj = {};
  const tab = this.$("tableField_kvumefq7").getValue();//获取全部数据
  for (let i = 0; i < tab.length; i++) {
    tabArr.push(tab[i]) 
    //插入一行空数据
    if (i == index) {
      tabobj.selectField_kvumefqb = "";
      tabobj.textField_kvumefq8 = "";
      tabobj.numberField_kvumefqa = "";
      tabArr.push({ ...tabobj })
    }
  }
  this.$("tableField_kvumefq7").setValue(tabArr);
}

3. Effect demonstration

Click form to view the sub-table effect directly:Click View

Figure 3-1 effect demonstration

YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!

Click this link to fill in the questionnaire

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