javascript - 在Liferay中向aui表单添加动态元素

我们如何使用脚本或aui:script在liferay中添加动态aui表单元素？如果那不可能，是否有其他解决方法。

我有一个包含两个部分的aui表单。单击按钮后，我想通过javascript动态将新部分添加到表单中。我尝试使用document.createElement()，但是通过使用它，我们将只能创建HTML dom元素。我想创建aui元素，例如aui:input，aui:select等

这是我的表单的结构:

假设我在第二部分有一个按钮。当我单击该按钮时，我想将一个aui:fieldset元素作为一个子元素添加到aui:form中。

最佳答案

请理解aui:input，aui:select等是JSP标记，这意味着它们是服务器端的，并最终通过容器呈现为HTML元素，这就是您在浏览器中看到的内容。只是这些元素是使用<div>和<span>呈现的(它们是HTML元素!)，并且具有自己的css类。

因此，如果您要创建另一个表单元素，则只需单击一个按钮，就不必使用document.createElement或document.innerHTML。 Javascript与服务器端无关，因此它不能生成或呈现aui标记，但是您可以创建HTML元素并添加到样式类似于aui标记的表单中。

以下是一些基本教程，可帮助您开始使用Alloy UI javascript:

Working with Elements and Events，您可以向下滚动到Manipulating elements标题。

Alloy UI - working with Nodes

Alloy UI Form builder，仅适用于Liferay 6.2。

Liferay的工作方式

在“用户和组织”模块(控制面板→组织→编辑→标识部分→地址)中添加地址和电话号码，您可以检查以下JSP:

/portal-web/docroot/html/portlet/users_admin/common/addresses.jsp

/portal-web/docroot/html/portlet/users_admin/common/phone_numbers.jsp

编辑(根据OP的评论)

Tutorial on Liferay Auto-fields。

本教程的

Source code。

上面的LiferaySavvy Link启发的有关自动 Realm 的简短教程:-)
根据stackoverflow的政策并为用户提供便利

说明以代码注释的形式给出。

创建动态字段的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>

JSP或HTML代码可与javascript一起使用:

<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>

用于在 Controller 中获取动态元素值的代码:

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

javascript - 在Liferay中向aui表单添加动态元素