在liferay中將動態元素添加到aui表單中

Question

我們如何通過使用腳本或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> （它們是HTML元素！）來呈現這些元素，並擁有自己的css類。

因此，如果您想要創建另一個表單元素而不是必須使用document.createElement或document.innerHTML則單擊一個按鈕。 Javascript與服務器端無關，因此它無法生成或呈現aui標記，但您可以創建HTML元素並添加到與aui標記類似的表單中。

這里有一些基本的教程，可以幫助您開始使用Alloy UI javascript：

1. 使用元素和事件 ，您可以向下滾動到Manipulating elements標題。
2. Alloy UI - 使用節點
3. Alloy UI Form構建器 ，僅適用於Liferay 6.2。

Liferay的做事方式

在用戶和組織模塊（ 控制面板 → 組織 → 編輯 → 標識部分 → 地址 ）中添加地址和語音，您可以檢查以下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 Link啟發的自動字段簡短教程:-) _{根據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標簽lib。 讓我們在用戶帳戶中的電話管理中查看它的示例。