5

ポートレットに JavaScript と CSS を使用する必要があります。並べ替えとインタラクティブな表示にデータ可能な jQuery を使用していますが、機能していません。

私が間違いを犯している場所に誰かが私を導くことができますか?

これは、私の JS と CSS が保持されている docroot のディレクトリ構造です。

ここに画像の説明を入力

データを動的に入力する view.jsp ファイルを次に示します。

<%@page import="com.video.util.VideoActionUtil"%>
<%@page import="com.video.database.model.Video"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"
    import="com.video.database.model.Video.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Applying JQuery DataTables plugin in the Java Server application</title>

     <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">
        <link href="docroot/css/demo_page.css" rel="stylesheet" type="text/css" />
        <link href="docroot/css/demo_table.css" rel="stylesheet" type="text/css" />
        <link href="docroot/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
        <link href="docroot/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
        <link href="docroot/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
        <script src="docroot/js/query.js" type="text/javascript"></script>
        <script src="docroot/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            $("#companies").dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true
            });
        });
        </script>
    </head>
    <body id="dt_example">
        <div id="container">

            <div id="demo_jui">
                <table id="companies" class="display">
                    <thead>
                        <tr>
                            <th>Company name</th>
                            <th>Address</th>
                            <th>Town</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% 
                        long l=10154;
                        for(Video c: VideoActionUtil.getAllVideo(l)){ %>
                          <tr>
                            <td><%=c.getTitle()%></td>
                            <td><%=c.getDescription()%></td>
                            <td><%=c.getTypeId()%></td>
                          </tr>
                        <% } %>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

CSS と JavaScript が見つからないのではないでしょうか? 私はパスを試しました href=/css/[filename] が、これもうまくいかないので、docroot/css/ [filename].

ありがとう、よろしくバビク・カマ

@ バーマー氏

 <script src="../js/jquery-1.2.6.min.js" type="text/javascript"></script>
        <link href="../css/demo_page.css" rel="stylesheet" type="text/css" />
        <link href="../css/demo_table.css" rel="stylesheet" type="text/css" />
        <link href="../css/demo_table_jui.css" rel="stylesheet" type="text/css" />
        <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
        <link href="../css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
        <script src="../js/query.js" type="text/javascript"></script>
        <script src="../js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script type="text/javascript">
4

4 に答える 4

4

を使用する代わりに<link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">、次を使用できます。

<link href="/js/jquery-1.2.6.min.js" type="text/javascript">

これはファイルの絶対パスであり/、フォルダを意味しdocrootます。ところで、liferayは次のdocroot\WEB-INF\liferay-portlet.xmlように定義されているデフォルトのロードcssおよびjsファイルを使用します:

<portlet>
    <portlet-name>Your portlet name</portlet-name>
    <icon>/icon.png</icon>
    <indexer-class>Your portlet class</indexer-class>
    <instanceable>false</instanceable>
    <header-portlet-css>/css/main.css - link to your header css</header-portlet-css>
    <footer-portlet-javascript>/js/main.js - link to your header js</footer-portlet-javascript>
    <css-class-wrapper>DongBat-SLL-DT-portlet</css-class-wrapper>
</portlet>

したがって、これらのファイルからjsまたはcssを変更またはインクルードして、ヘッダーにロードすることができます。

于 2012-10-13T07:00:43.410 に答える
3

@tairiもできますが、次のように特定のjsまたはcssへのパスを指定しただけのソリューションが得られました

<script src="<%=request.getContextPath()%>/js/jquery-1.2.6.min.js" type="text/javascript"></script>

このような問題を抱えている他の人のために、あなたのcss/jsファイルを<%=request.getContextPath()%>

あなたのおかげで、どうにかしてこれを達成することができました。

于 2012-10-13T07:26:12.097 に答える
2

@Taikiが示すように、liferayには、ポートレットで使用されるcssとjavascriptをポータルヘッダーまたはフッターのいずれかに設定できるxml記述子ファイルがあります。

liferay-portlet.xml

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 5.2.0//EN"
        "http://www.liferay.com/dtd/liferay-portlet-app_5_2_0.dtd">
<liferay-portlet-app>
    <portlet>
        <portlet-name>PortletName</portlet-name>
        <header-portlet-css>/css/your.css</header-portlet-css>
        <header-portlet-javascript>/js/jquery.js</header-portlet-javascript>
       <footer-portlet-javascript>/js/your.js</footer-portlet-javascript>
    </portlet>

</liferay-portlet-app>

これをWEB-INFに配置する場合は、それに応じてパスを調整すると、ビュー内のファイルを参照する必要がなくなります。

于 2012-10-14T10:04:07.373 に答える
1

で始まらないURLは/、それらを参照するURL内のディレクトリに関連して解釈されます。したがって、URLhttp://domain.com/docroot/jsps/view.jspアクセスのあるページはdocroot/css/something.css、を検索しhttp://domain.com/docroot/jsps/docroot/css/something.cssます。

../css/[filename].cssやのようなパスを使用してみてください../js/[filename].js../ディレクトリ階層の1つ上のレベルに上がることを意味します。

于 2012-10-13T06:51:18.567 に答える