aui-datatable

时间:2015-11-15 00:41:16

标签: javascript datatable liferay

我正在使用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的任何建议都表示赞赏。

作为旁注,我尝试用AUI()替换YUI(),但这也导致数据表不在浏览器中生成。关于使用AUI和YUI的好处的评论也将受到赞赏。

2 个答案:

答案 0 :(得分:1)

我使用Chrome的“开发人员工具控制台”来查看输出,并收到以下错误消息:

yui: NOT loaded: liferay-portlet-url

似乎我必须使用AUI()而不是YUI()来利用Liferay扩展。

答案 1 :(得分:1)

您自己也会给出部分答案 - 但是,还有更多内容:<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块。