从FormIO表元素中获取列数据和

Question

我试图从FormIO获得表元素中的列数和。现在我用这个脚本做这个:

if(data['personesAtesesNoBinari17'] >= 0 || 
data['personesAtesesNoBinari1631'] >= 0 || 
data['personesAtesesNoBinari3066'] >= 0 || 
data['personesAtesesNoBinari67'] >= 0){

if(data['personesAtesesNoBinari17'] === undefined){
data['personesAtesesNoBinari17'] = 0;
}
if(data['personesAtesesNoBinari1631'] === undefined){
data['personesAtesesNoBinari1631'] = 0;
}
if(data['personesAtesesNoBinari3066'] === undefined){
data['personesAtesesNoBinari3066'] = 0;
}
if(data['personesAtesesNoBinari67'] === undefined){
data['personesAtesesNoBinari67'] = 0;
}
data['personesAtesesNoBinariTotal2'] = 
data['personesAtesesNoBinari17'] +
data['personesAtesesNoBinari1631'] + 
data['personesAtesesNoBinari3066'] + 
data['personesAtesesNoBinari67'];
}else{
data['personesAtesesNoBinariTotal2'] = 0;
}

每个data['']都是一个带数字的单元格，除了输出:data['personesAtesesVoluntariatTotal1']。

正如你所看到的，代码它不干净，但这是我能得到和的唯一方法。我也尝试过这个代码，但它不会在FormIO工作，而在visual studio代码工作得很好:

let result = 0;
for (let i = 1; i < (data['tableName'].rows.length-1); i++)
{
result += parseInt(data['tableName'].rows[i].cells[1]);
}
data['outputName'] = result;

这是来自表的JSON:

{
"label": "Table",
"cellAlignment": "left",
"customClass": "standardTable tableSpacing",
"bordered": true,
"hover": true,
"key": "table22",
"type": "table",
"numRows": 6,
"numCols": 4,
"input": false,
"tableView": false,
"rows": [
[
{
"components": []
},
{
"components": [
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "<div style="text-align:center ; background-color : #900000 ; height: 100%;"><h3 style="color:white;font-weight: bold;">No binari</h3></div>",
"refreshOnChange": false,
"key": "html154",
"type": "htmlelement",
"input": false,
"tableView": false
}
]
}
],
[
{
"components": [
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "<div>Persones de menys de 16 anys</div>",
"refreshOnChange": false,
"key": "html155",
"type": "htmlelement",
"input": false,
"tableView": false
}
]
},
{
"components": [
{
"label": "Number",
"hideLabel": true,
"mask": false,
"tableView": false,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"truncateMultipleSpaces": false,
"key": "personesAtesesNoBinari17",
"type": "number",
"input": true
}
]
}
],
[
{
"components": [
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "<div>Persones entre 16 a 29 anys</div>",
"refreshOnChange": false,
"key": "html156",
"type": "htmlelement",
"input": false,
"tableView": false
}
]
},
{
"components": [
{
"label": "Number",
"hideLabel": true,
"mask": false,
"tableView": false,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"truncateMultipleSpaces": false,
"key": "personesAtesesNoBinari1631",
"type": "number",
"input": true
}
]
}
],
[
{
"components": [
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "<div>Persones entre 30 i 64 anys</div>",
"refreshOnChange": false,
"key": "html157",
"type": "htmlelement",
"input": false,
"tableView": false
}
]
},
{
"components": [
{
"label": "Number",
"hideLabel": true,
"mask": false,
"tableView": false,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"truncateMultipleSpaces": false,
"key": "personesAtesesNoBinari3066",
"type": "number",
"input": true
}
]
}
],
[
{
"components": [
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "<div>Persones de 65 anys o més</div>",
"refreshOnChange": false,
"key": "html158",
"type": "htmlelement",
"input": false,
"tableView": false
}
]
},
{
"components": [
{
"label": "Number",
"hideLabel": true,
"mask": false,
"tableView": false,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"truncateMultipleSpaces": false,
"key": "personesAtesesNoBinari67",
"type": "number",
"input": true
}
]
}
],
[
{
"components": [
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "<div>Total</div>",
"refreshOnChange": false,
"key": "html159",
"type": "htmlelement",
"input": false,
"tableView": false
}
]
},
{
"components": [
{
"label": "Number",
"hideLabel": true,
"mask": false,
"disabled": true,
"tableView": false,
"defaultValue": 0,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"truncateMultipleSpaces": false,
"key": "personesAtesesNoBinariTotal2",
"logic": [
{
"name": "SumatoriPersonesAtesesNoBinariTotal",
"trigger": {
"type": "javascript",
"javascript": "if(data['personesAtesesNoBinari17'] >= 0 || data['personesAtesesNoBinari1631'] >= 0 || data['personesAtesesNoBinari3066'] >= 0 || data['personesAtesesNoBinari67'] >= 0){n  if(data['personesAtesesNoBinari17'] === undefined){n    data['personesAtesesNoBinari17'] = 0;n  }n  if(data['personesAtesesNoBinari1631'] === undefined){n    data['personesAtesesNoBinari1631'] = 0;n  }n  if(data['personesAtesesNoBinari3066'] === undefined){n    data['personesAtesesNoBinari3066'] = 0;n  }n  if(data['personesAtesesNoBinari67'] === undefined){n    data['personesAtesesNoBinari67'] = 0;n  }n  data['personesAtesesNoBinariTotal2'] = data['personesAtesesNoBinari17'] + data['personesAtesesNoBinari1631'] + data['personesAtesesNoBinari3066'] + data['personesAtesesNoBinari67'];n}else{n  data['personesAtesesNoBinariTotal2'] = 0;n}"
},
"actions": [
{
"name": "SumatoriPersonesAtesesNoBinariTotal",
"type": "value",
"value": "value = data['personesAtesesNoBinariTotal2'];"
}
]
}
],
"type": "number",
"personesAtesesNoBinariTotal2": 0,
"personesAtesesNoBinariTotal": 0,
"input": true
}
]
}
]
]
}

Answer 1

1. 这里我不使用自定义逻辑，而是使用计算值字段，这更符合您想要完成的任务。在JSFiddle上查看这个工作示例。

2. 表组件是一个较旧的组件，更多地面向布局问题，并且在进行这样的计算时不太符合人体工程学(正如您从上面的代码中看到的那样，我必须仔细检查personesAtesesNoBinariTotal2键是否被计入总价值)。数据网格组件更适合这类事情，请查看JSFiddle上的这个工作示例。计算该值的代码更符合您期望for循环的工作方式:

   value = data.expenses.reduce(function(total, row) {
   return total + row.amount;
   }, 0);
   

   可以很容易地写成:

   for (let row of data.expenses) {
   value += row.amount;
   }