javascript - 在liferay的aui表单中添加动态元素

Question

我们如何使用 script 或 aui:script 在 liferay 中添加动态 aui 表单元素？如果这不可能，是否有任何替代解决方案。

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

这就是我的表单的结构：

---

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

Answer 1

我们将只能创建 HTML dom 元素。我想创建 aui 元素，如 aui:input、aui:select 等

请理解aui:input，aui:select等是 JSP 标签，这意味着它们是服务器端的，最终由容器呈现为 HTML 元素，这就是您在浏览器中看到的内容。只是这些元素是用一些<div>s & <span>s （它们是 HTML 元素！）呈现的，并且有自己的 css 类。

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

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

1. 使用 Elements 和 Events，您可以向下滚动到Manipulating elements标题。
2. Alloy UI - 使用节点
3. Alloy UI 表单生成器，仅适用于 Liferay 6.2。

Liferay做事方式

在用户和组织模块（Control Panel→ Organization→ Edit→ Identification section→ Addresses）中添加地址和电话号码，您可以检查以下 JSP：

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

---

编辑 _{（根据OP的评论）}

1. Liferay 自动字段教程。
2. 教程的源代码。

---

受上面 LiferaySavvy 链接启发的关于自动字段的简短教程 :-) _{根据 stackoverflow 的政策并为用户提供方便}

解释以代码注释的形式给出。

1. 用于创建动态字段的 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>
   

2. 使用 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>
   

3. 在我们的控制器中获取动态元素值的代码：

   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);
   }
   

希望这可以帮助。

Answer 2

查看aui:auto-fields标签库。让我们在用户帐户的电话管理中查看它的示例。