本教程将向您展示如何在列表中进行多项选择,并使用它们预填充表单中的选择框。
例如,在下图中,我们选择了2行,然后单击“添加到表单”按钮。
这将带我们到页面如下所示的表格。表单中的选择框早先选中了2个选项。
实现这一点的方法只需要两个步骤。一个在列表级别,另一个在表单级别。
第1步:在Datalist Builder中添加超链接操作
打开Datalist Builder中的列表。添加超链接操作并对其进行配置。
在“超链接”中,将其指向一个表单。在下面的示例中,我们指向CRUD菜单中的新表单。
向链接添加新参数并使用“ID”值填充它。
请记住声明的参数名称,因为我们稍后将从表单中读取它。
第2步:在表单生成器中读取并填充选择
打开由于之前列表中的按钮单击而打开的预期表单。
在表单中添加“自定义HTML”元素。
将代码粘贴到自定义HTML元素中。
This tutorial will show you on how to make multiple selections in a list and use them to prepopulate a select box in a form.
For example, in the figure below, we are selecting 2 rows and click on the "Add to Form" button.
This would bring us to the page as shown below with a form. The select box in the form has the 2 options earlier checked.
The way to implement this would require just 2 steps. One at the list level and the other one at the form level.
Step 1: Add Hyperlink Action in Datalist Builder
Open up the list in the Datalist Builder. Add a Hyperlink action to and configure it.
In the "Hyperlink", point it to a form. In the example below, we are pointing to a new form in a CRUD menu.
Add a new parameter to the link and populate it with "ID" value.
Remember the parameter name declared as we are going to read it from the form later on.
Step 2: Read and populate selection in Form Builder
Open the intended form that will open up as a result of the button click in the list earlier.
Add in a "Custom HTML" element into the form.
Paste in the code into the custom HTML element.
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript"> $(function(){ var value = decodeURIComponent("#requestParam.applications#"); //replace with the parameter name you declared in datalist action var values = value.split(';'); $.each( values, function( index, value ){ if(value != ""){ $(FormUtil.getField("applications")).find("option[value='" + value + "']").attr('selected', 'selected'); //replace with the field ID of the select box in your form } }); //$(FormUtil.getField("applications")).trigger("chosen:updated"); //enable this line if you are using Multi Select Box, replace with the field ID of the select box in your form }); </script> |