我们如何使用脚本或 aui:script 在 liferay 中添加动态 aui 表单元素?如果那不可能,是否有任何替代解决方案。
我有一个 aui 表单,它有两个部分。单击按钮后,我想通过 javascript 向表单动态添加新部分。我尝试使用 document.createElement(),但通过使用它,我们将能够仅创建 HTML dom 元素。我想创建 aui 元素,如 aui:input、aui:select 等
这是我的表单的结构:
假设我在第二部分有一个按钮。当我单击它时,我想再添加一个 aui:fieldset 元素到 aui:form 作为子元素。
最佳答案
we will be able to create only HTML dom elements. I want to create aui elements like aui:input, aui:select, etc
敬请谅解aui:input
, aui:select
etc 是 JSP 标签,意味着它们是服务器端的,最终由容器呈现为 HTML 元素,这就是您在浏览器中看到的内容。只是这些元素是用一些 <div>
渲染的。 s & <span>
s(它们是 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 做事方式
在用户和组织模块中添加地址和电话号码(控制面板 → 组织 → 编辑 → 标识部分 → Addresses),您可以检查以下 JSP:
- /portal-web/docroot/html/portlet/users_admin/common/addresses.jsp
- /portal-web/docroot/html/portlet/users_admin/common/phone_numbers.jsp
编辑 (根据OP的评论)
受上面 LiferaySavvy 链接启发的关于自动字段的简短教程 :-) 根据 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>
在我们的 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); }
希望这对您有所帮助。
关于javascript - 在liferay中为aui窗体添加动态元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22374537/