我们如何使用 script 或 aui:script 在 liferay 中添加动态的 aui 表单元素？如果这不可能，是否有任何替代解决方案。
我有一个包含两个部分的 aui 表单。单击按钮时，我想通过 javascript 向表单动态添加新部分。我尝试使用 document.createElement()，但通过使用它，我们将只能创建 HTML dom 元素。我想创建 aui 元素，例如 aui:input、aui:select 等
这就是我的表单的结构：
假设我在第二部分有一个按钮。当我单击它时，我想在 aui:form 中再添加一个 aui:fieldset 元素作为子元素。
【问题讨论】：
标签： javascript forms liferay alloy-ui liferay-aui
我们将只能创建 HTML dom 元素。我想创建 aui 元素，如 aui:input、aui:select 等
请理解aui:input、aui:select 等是 JSP 标签，这意味着它们是服务器端的，最终由容器呈现为 HTML 元素，这就是您在浏览器中看到的内容。只是这些元素是用一些 <div>s 和 <span>s（它们是 HTML 元素！）呈现的，并且有自己的 css-class。
因此，如果您想创建另一个表单元素，则只需单击一个按钮，就必须使用document.createElement 或document.innerHTML。 Javascript 与服务器端无关，因此它无法生成或呈现 aui 标签，但您可以创建 HTML 元素并添加到样式类似于 aui 标签的表单中。
这里有一些基本教程可帮助您开始使用 Alloy UI javascript：
Manipulating elements 标题。Liferay 做事方式
在用户和组织模块中添加地址和电话号码（控制面板 → 组织 → 编辑 → 标识部分 → Addresses)，可以查看以下JSP：
编辑 （根据OP的评论）
受上面 LiferaySavvy 链接启发的关于自动字段的简短教程 :-) 根据stackoverflow的政策，为了方便用户
解释以代码 cmets 给出。
创建动态字段的Javascript代码：
<aui:script use="liferay-auto-fields">
new Liferay.AutoFields(
{
contentBox: '#phone-fields', // this is the container within which the fields would be added dynamically
fieldIndexes: '<portlet:namespace />phonesIndexes' // this is the field which will store the values of the
}
).render();
</aui:script>
使用 javascript 的 JSP 或 HTML 代码：
<aui:form action="<%=editArticleActionURL%>" method="post" name="LiferayAutoFieldForm">
<div id="phone-fields">
<div class="lfr-form-row lfr-form-row-inline">
<div class="row-fields">
<!--
Notice the zero at the end of the name & id of the input element "phoneNumber0".
When you add dynamic fields this would be incremented.
-->
<aui:input fieldParam='phoneNumber0' id='phoneNumber0' name="phoneNumber0" label="Phone Number" />
<aui:select id="phoneTypeId0" name="phoneTypeId0" label="Type">
<aui:option value="11006" label="Business"></aui:option>
<aui:option value="11007" label="Business Fax"></aui:option>
<aui:option value="11008" label="Mobile Phone"></aui:option>
<aui:option value="11009" label="Other"></aui:option>
<aui:option value="11011" label="Personal"></aui:option>
</aui:select>
</div>
</div>
</div>
.... <!-- other input fields and submit buttons etc -->
</aui:form>
在我们的控制器中获取动态元素值的代码：
String phonesIndexesString = actionRequest.getParameter("phonesIndexes"); // do you remember: fieldIndexes: '<portlet:namespace />phonesIndexes'? :-)
int[] phonesIndexes = StringUtil.split(phonesIndexesString, 0);
for (int phonesIndex : phonesIndexes) {
String number = ParamUtil.getString(actionRequest, "phoneNumber" + phonesIndex);
int typeId = ParamUtil.getInteger(actionRequest, "phoneTypeId" + phonesIndex);
}
希望这会有所帮助。
【讨论】：
查看aui:auto-fields 标签库。
让我们在用户帐户的电话管理中查看它的示例。
【讨论】：