在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:selectJSP等标签意味着它们是服务器端,最终由容器呈现为HTML元素,这就是您在浏览器中看到的内容.它只是用一些<div>s&<span>s(它们是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的做事方式

添加地址和PHONENUMBERS在用户和组织模块(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 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);
   }
   

希望这可以帮助.