aui-datatable 中的动态 renderURL
Dynamic renderURL within aui-datatable
我正在使用 Liferay 6.2-ce-ga4,试图在 aui-datatable 列中嵌入自定义 renderURL。以下代码有效,除非我尝试从列格式化程序函数中调用以下代码行:
var renderURL = Liferay.PortletURL.createRenderURL();
调用此代码时,Eclipse 控制台中没有生成错误代码(因为我是从 Eclispe 中启动 Liferay)。我能告诉你的是,当我注释掉上面的行时,我得到了一个正确生成的 DataTable,但是在取消注释该行之后,DataTable 根本不呈现。
整页代码如下
<%@ page import="org.json.simple.JSONArray"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<script src="http://cdn.alloyui.com/2.0.0/aui/aui.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<portlet:defineObjects />
<%
JSONArray involvedParties = (JSONArray) renderRequest.getAttribute("involvedPartyDetails");
%>
<aui:script>
YUI().use('aui-datatable', 'datatable-sort', 'liferay-portlet-url', function(Y) {
var columns = [ {
label : 'Involved Party Name',
key : 'name',
formatter : function(o) {
// var renderURL = Liferay.PortletURL.createRenderURL();
return '<a href="http://www.cnn.com/">' + o.data.name + '</a>';
},
allowHTML : true,
sortable : true
} ];
var data = <%=involvedParties%>
var dataTable = new Y.DataTable({
columns : columns,
data : data,
scrollable : "y",
height : "500px"
}).render('#myDataTable');
});
</aui:script>
<div id="myDataTable"></div>
我的liferay-portlet.xml给出如下:
<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_2_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>involved-party-list</portlet-name>
<icon>/icon.png</icon>
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>
/js/main.js
</footer-portlet-javascript>
<css-class-wrapper>
involved-party-list-portlet
</css-class-wrapper>
<add-default-resource>true</add-default-resource>
</portlet>
<role-mapper>
<role-name>administrator</role-name>
<role-link>Administrator</role-link>
</role-mapper>
<role-mapper>
<role-name>guest</role-name>
<role-link>Guest</role-link>
</role-mapper>
<role-mapper>
<role-name>power-user</role-name>
<role-link>Power User</role-link>
</role-mapper>
<role-mapper>
<role-name>user</role-name>
<role-link>User</role-link>
</role-mapper>
</liferay-portlet-app>
如有任何关于如何为数据中的每一行构建动态 renderURL 的建议 table,我们将不胜感激。
附带说明一下,我尝试用 AUI() 替换 YUI(),但这也会导致数据 table 不会在浏览器中生成。对于使用 AUI 与 YUI 的好处的评论也将不胜感激。
我使用 Chrome 的 "Developer Tools Console" 查看输出,并收到以下错误消息:
yui: NOT loaded: liferay-portlet-url
看来我必须使用 AUI() 而不是 YUI() 来利用 Liferay 扩展。
您自己给出了部分答案 - 然而,还有更多内容:<aui:script>
已经使 AUI 可用。你可以只替换你的行
<aui:script>
YUI().use('aui-datatable', 'datatable-sort', 'liferay-portlet-url', function(Y) {
和
<aui:script use="aui-datatable,datatable-sort,liferay-portlet-url">
并在这打开的块中使用 AUI 作为 A。无需在此标签内添加额外的 YUI 或 AUI 块。
我正在使用 Liferay 6.2-ce-ga4,试图在 aui-datatable 列中嵌入自定义 renderURL。以下代码有效,除非我尝试从列格式化程序函数中调用以下代码行:
var renderURL = Liferay.PortletURL.createRenderURL();
调用此代码时,Eclipse 控制台中没有生成错误代码(因为我是从 Eclispe 中启动 Liferay)。我能告诉你的是,当我注释掉上面的行时,我得到了一个正确生成的 DataTable,但是在取消注释该行之后,DataTable 根本不呈现。
整页代码如下
<%@ page import="org.json.simple.JSONArray"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<script src="http://cdn.alloyui.com/2.0.0/aui/aui.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<portlet:defineObjects />
<%
JSONArray involvedParties = (JSONArray) renderRequest.getAttribute("involvedPartyDetails");
%>
<aui:script>
YUI().use('aui-datatable', 'datatable-sort', 'liferay-portlet-url', function(Y) {
var columns = [ {
label : 'Involved Party Name',
key : 'name',
formatter : function(o) {
// var renderURL = Liferay.PortletURL.createRenderURL();
return '<a href="http://www.cnn.com/">' + o.data.name + '</a>';
},
allowHTML : true,
sortable : true
} ];
var data = <%=involvedParties%>
var dataTable = new Y.DataTable({
columns : columns,
data : data,
scrollable : "y",
height : "500px"
}).render('#myDataTable');
});
</aui:script>
<div id="myDataTable"></div>
我的liferay-portlet.xml给出如下:
<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_2_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>involved-party-list</portlet-name>
<icon>/icon.png</icon>
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>
/js/main.js
</footer-portlet-javascript>
<css-class-wrapper>
involved-party-list-portlet
</css-class-wrapper>
<add-default-resource>true</add-default-resource>
</portlet>
<role-mapper>
<role-name>administrator</role-name>
<role-link>Administrator</role-link>
</role-mapper>
<role-mapper>
<role-name>guest</role-name>
<role-link>Guest</role-link>
</role-mapper>
<role-mapper>
<role-name>power-user</role-name>
<role-link>Power User</role-link>
</role-mapper>
<role-mapper>
<role-name>user</role-name>
<role-link>User</role-link>
</role-mapper>
</liferay-portlet-app>
如有任何关于如何为数据中的每一行构建动态 renderURL 的建议 table,我们将不胜感激。
附带说明一下,我尝试用 AUI() 替换 YUI(),但这也会导致数据 table 不会在浏览器中生成。对于使用 AUI 与 YUI 的好处的评论也将不胜感激。
我使用 Chrome 的 "Developer Tools Console" 查看输出,并收到以下错误消息:
yui: NOT loaded: liferay-portlet-url
看来我必须使用 AUI() 而不是 YUI() 来利用 Liferay 扩展。
您自己给出了部分答案 - 然而,还有更多内容:<aui:script>
已经使 AUI 可用。你可以只替换你的行
<aui:script>
YUI().use('aui-datatable', 'datatable-sort', 'liferay-portlet-url', function(Y) {
和
<aui:script use="aui-datatable,datatable-sort,liferay-portlet-url">
并在这打开的块中使用 AUI 作为 A。无需在此标签内添加额外的 YUI 或 AUI 块。