[英]Adding dynamic elements to aui form in liferay
我们如何通过使用脚本或aui:script来在liferay中添加动态aui表单元素? 如果那是不可能的,是否有任何替代解决方案。
我有一个有两个部分的aui表格。 点击一个按钮,我想通过javascript动态地向表单添加新的部分。 我尝试使用document.createElement(),但通过使用它,我们将只能创建HTML dom元素。 我想创建aui元素,如aui:input,aui:select等
这就是我的表单结构:
假设我在第二部分有一个按钮。 当我点击它时,我想在aui:form中添加一个aui:fieldset元素作为子元素。
我们将只能创建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:
Manipulating elements
标题。 Liferay的做事方式
在用户和组织模块( 控制面板 → 组织 → 编辑 → 标识部分 → 地址 )中添加地址和语音,您可以检查以下JSP:
编辑 (根据OP的评论)
以上LiferaySavvy Link启发的自动字段简短教程:-) 根据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>
使用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
标签lib。 让我们在用户帐户中的电话管理中查看它的示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.