【发布时间】：2021-09-13 23:01:21
【问题描述】：
我正在尝试基于 json 数据创建动态表单
const input_def = {
"model_class":"Conditional",
"name":"SelPlotting",
"type":"conditional",
"cases":[
{
"model_class":"ConditionalWhen",
"value":"HeatMap",
"inputs":[
{
"model_class":"DataToolParameter",
"name":"InFile",
"argument":"--InFile",
"type":"data",
"label":"Input file",
"help":"Tabular data file",
"refresh_on_change":true,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"None",
"extensions":[
"tabular"
],
"edam":{
"edam_formats":[
"format_3475"
],
"edam_data":[
"data_0006"
]
},
"multiple":false,
"options":{
"hda":[
],
"hdca":[
]
}
},
{
"model_class":"TextToolParameter",
"name":"IndexColumn",
"argument":"--IndexColumn",
"type":"text",
"label":"Index Column",
"help":"Column name that contains index as row/sample names ",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"Index",
"area":false,
"datalist":[
]
},
{
"model_class":"TextToolParameter",
"name":"x_label",
"argument":"--x_label",
"type":"text",
"label":"Label for x-axis",
"help":"A label that describes x axis",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"x-axis",
"area":false,
"datalist":[
]
},
{
"model_class":"TextToolParameter",
"name":"y_label",
"argument":"--y_label",
"type":"text",
"label":"Label for y-axis",
"help":"A label that describes y axis",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"y-axis",
"area":false,
"datalist":[
]
}
]
},
{
"model_class":"ConditionalWhen",
"value":"BoxPlot",
"inputs":[
{
"model_class":"DataToolParameter",
"name":"InFile",
"argument":"--InFile",
"type":"data",
"label":"Input file",
"help":"Tabular data file",
"refresh_on_change":true,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"None",
"extensions":[
"tabular"
],
"edam":{
"edam_formats":[
"format_3475"
],
"edam_data":[
"data_0006"
]
},
"multiple":false,
"options":{
"hda":[
],
"hdca":[
]
}
},
{
"model_class":"TextToolParameter",
"name":"Feature",
"argument":"--Features",
"type":"text",
"label":"Feature name",
"help":"Name of the feature (column name)",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"Feature",
"area":false,
"datalist":[
]
},
{
"model_class":"TextToolParameter",
"name":"Label",
"argument":"--Label",
"type":"text",
"label":"Class label column",
"help":"Name of the column that contains class label",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"class label",
"area":false,
"datalist":[
]
}
]
},
{
"model_class":"ConditionalWhen",
"value":"ScatterPlot",
"inputs":[
{
"model_class":"DataToolParameter",
"name":"InFile",
"argument":"--InFile",
"type":"data",
"label":"Input file",
"help":"Tabular data file",
"refresh_on_change":true,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"None",
"extensions":[
"tabular"
],
"edam":{
"edam_formats":[
"format_3475"
],
"edam_data":[
"data_0006"
]
},
"multiple":false,
"options":{
"hda":[
],
"hdca":[
]
}
},
{
"model_class":"Conditional",
"name":"PlotType",
"type":"conditional",
"cases":[
{
"model_class":"ConditionalWhen",
"value":"2D",
"inputs":[
{
"model_class":"TextToolParameter",
"name":"Features1",
"argument":"--RotationX",
"type":"text",
"label":"First feature",
"help":"Feature column name",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"feature1",
"area":false,
"datalist":[
]
},
{
"model_class":"TextToolParameter",
"name":"Features2",
"argument":"--RotationY",
"type":"text",
"label":"Second feature",
"help":"Feature column name",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"feature2",
"area":false,
"datalist":[
]
}
]
},
{
"model_class":"ConditionalWhen",
"value":"3D",
"inputs":[
{
"model_class":"TextToolParameter",
"name":"Features1",
"argument":"--RotationX",
"type":"text",
"label":"First feature",
"help":"Feature column name",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"feature1",
"area":false,
"datalist":[
]
},
{
"model_class":"TextToolParameter",
"name":"Features2",
"argument":"--RotationY",
"type":"text",
"label":"Second feature",
"help":"Feature column name",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"feature2",
"area":false,
"datalist":[
]
},
{
"model_class":"TextToolParameter",
"name":"Features3",
"argument":"--FigHight",
"type":"text",
"label":"Third feature",
"help":"Feature column name",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"feature3",
"area":false,
"datalist":[
]
}
]
}
],
"test_param":{
"model_class":"SelectToolParameter",
"name":"SelectPlot",
"argument":"",
"type":"select",
"label":"Scatter Plot type",
"help":"Scatter Plot type 2D or 3D.",
"refresh_on_change":true,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"2D",
"options":[
[
"2D",
"2D",
false
],
[
"3D",
"3D",
false
]
],
"display":"None",
"multiple":false,
"textable":false
}
},
{
"model_class":"TextToolParameter",
"name":"Label",
"argument":"--Label",
"type":"text",
"label":"Class label column",
"help":"Name of the column that contains class label",
"refresh_on_change":false,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"class label",
"area":false,
"datalist":[
]
}
]
},
{
"model_class":"ConditionalWhen",
"value":"WordCloud",
"inputs":[
{
"model_class":"DataToolParameter",
"name":"InFile",
"argument":"--InFile",
"type":"data",
"label":"Input file",
"help":"Fasta file with peptides",
"refresh_on_change":true,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"None",
"extensions":[
"fasta"
],
"edam":{
"edam_formats":[
"format_1929"
],
"edam_data":[
"data_2044"
]
},
"multiple":false,
"options":{
"hda":[
],
"hdca":[
]
}
},
{
"model_class":"IntegerToolParameter",
"name":"d",
"argument":"--FragSize",
"type":"integer",
"label":"Size of ngrams",
"help":"Size of ngrams",
"refresh_on_change":false,
"min":"None",
"max":"None",
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"4",
"area":false,
"datalist":[
]
}
]
}
],
"test_param":{
"model_class":"SelectToolParameter",
"name":"Plot",
"argument":"",
"type":"select",
"label":"Data plotting method",
"help":"Data plotting method",
"refresh_on_change":true,
"optional":false,
"hidden":false,
"is_dynamic":false,
"value":"HeatMap",
"options":[
[
"Heat Map",
"HeatMap",
false
],
[
"Box Plot",
"BoxPlot",
false
],
[
"Scatter Plot",
"ScatterPlot",
false
],
[
"Word Cloud",
"WordCloud",
false
]
],
"display":"None",
"multiple":false,
"textable":false
}
}
我使用这个函数来动态生成 HTML 部分
AddConditoinalSection2 (input_def ) {
input_def.id = this.uid()
var ConditionalDiv
for (var i in input_def.cases) {
ConditionalDiv = document.createElement('div')
ConditionalDiv.className = 'ui-form-element section-row pl-2'
ConditionalDiv.id = `${input_def.id}-section-${i}`
for (var j in input_def.cases[i].inputs ) {
if (input_def.cases[i].inputs[j].type !== 'conditional') {
input_def.cases[i].inputs[j].id = this.uid()
const SimpleRow = document.createElement('div')
SimpleRow.className = 'ui-form-element section-row'
SimpleRow.id = input_def.cases[i].inputs[j].id
ConditionalDiv.append(SimpleRow)
}
else{
input_def.cases[i].inputs[j].id = this.uid()
this.AddConditoinalSection2(input_def.cases[i].inputs[j])
}
}
this.element.querySelector('.Dynamic-form').append(ConditionalDiv)
}
}
还有一个生成唯一 ID 的小函数。
uid () {
top.__utils__uid__ = top.__utils__uid__ || 0;
return `uid-${top.__utils__uid__++}`;
}
这些函数生成这样的部分
<form class="Dynamic-form">
<div class="ui-form-element section-row pl-2" id="uid-0-section-0">
<div class="ui-form-element section-row" id="uid-1"></div>
<div class="ui-form-element section-row" id="uid-2"></div>
<div class="ui-form-element section-row" id="uid-3"></div>
<div class="ui-form-element section-row" id="uid-4"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-0-section-1">
<div class="ui-form-element section-row" id="uid-5"></div>
<div class="ui-form-element section-row" id="uid-6"></div>
<div class="ui-form-element section-row" id="uid-7"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-10-section-0">
<div class="ui-form-element section-row" id="uid-11"></div>
<div class="ui-form-element section-row" id="uid-12"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-10-section-1">
<div class="ui-form-element section-row" id="uid-13"></div>
<div class="ui-form-element section-row" id="uid-14"></div>
<div class="ui-form-element section-row" id="uid-15"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-0-section-2">
<div class="ui-form-element section-row" id="uid-8"></div>
<div class="ui-form-element section-row" id="uid-16"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-0-section-3">
<div class="ui-form-element section-row" id="uid-17"></div>
<div class="ui-form-element section-row" id="uid-18"></div>
</div>
</form>
我的问题是，每当遇到输入 (input_def.cases[i].inputs[j].type === 'conditional') 中的条件块时，我都想附加递归部分
<div class="ui-form-element section-row pl-2" id="uid-0-section-1">
<div class="ui-form-element section-row" id="uid-5"></div>
<div class="ui-form-element section-row" id="uid-6"></div>
<div class="ui-form-element section-row" id="uid-7"></div>
<div class="ui-form-element section-row pl-2" id="uid-10-section-0">
<div class="ui-form-element section-row" id="uid-11"></div>
<div class="ui-form-element section-row" id="uid-12"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-10-section-1">
<div class="ui-form-element section-row" id="uid-13"></div>
<div class="ui-form-element section-row" id="uid-14"></div>
<div class="ui-form-element section-row" id="uid-15"></div>
</div>
</div>
我应该对此代码进行哪些更改才能获得此结果？
我想要的最终结果
<form class="Dynamic-form">
<div class="ui-form-element section-row pl-2" id="uid-0-section-0">
<div class="ui-form-element section-row" id="uid-1"></div>
<div class="ui-form-element section-row" id="uid-2"></div>
<div class="ui-form-element section-row" id="uid-3"></div>
<div class="ui-form-element section-row" id="uid-4"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-0-section-1">
<div class="ui-form-element section-row" id="uid-5"></div>
<div class="ui-form-element section-row" id="uid-6"></div>
<div class="ui-form-element section-row" id="uid-7"></div>
<div class="ui-form-element section-row pl-2" id="uid-10-section-0">
<div class="ui-form-element section-row" id="uid-11"></div>
<div class="ui-form-element section-row" id="uid-12"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-10-section-1">
<div class="ui-form-element section-row" id="uid-13"></div>
<div class="ui-form-element section-row" id="uid-14"></div>
<div class="ui-form-element section-row" id="uid-15"></div>
</div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-0-section-2">
<div class="ui-form-element section-row" id="uid-8"></div>
<div class="ui-form-element section-row" id="uid-16"></div>
</div>
<div class="ui-form-element section-row pl-2" id="uid-0-section-3">
<div class="ui-form-element section-row" id="uid-17"></div>
<div class="ui-form-element section-row" id="uid-18"></div>
</div>
</form>
【问题讨论】：
标签： javascript html forms recursion dom