2

我正在尝试将DataTables添加到我的 Groovy/Grails 项目中，以清理我的表并添加额外的功能。

我目前在让它正常工作时遇到问题。我将下载文件夹添加到我的项目插件文件夹中，但是当我尝试将功能添加到我的项目时，它似乎不起作用，仅从此处显示的 cookie 切割器示例开始显示的 cookie 切割器示例开始。由于这不起作用，我必须对如何将附加组件添加到我的文件有问题。我认为这就像获取下载文件并将其移动到项目插件文件夹一样简单，但这似乎不起作用。

关于如何将文件实际添加到项目中的任何建议？它们出现在我的 groovy grails 项目目录中，但它们出现在doc.media. 他们在哪里展示了如何将jsand包含css到html页面......我不确定这是否是路径错误或不是什么。我以前从未真正在这个工具套件中添加过附加组件。它总是给我的。

如果有人能给我一个关于如何实际添加这样的东西的不错的纲要，我将不胜感激。

这是我的表演.gsp

<!doctype html>
<html>
<head>
<style type="text/css" title="currentStyle">
@import "/DataTables/media/css/demo_table.css";
</style>
<g:set var="entityName"
    value="${message(code: 'User.label', default: 'User')}" />
<meta name="layout" content="main">
<g:set var="entityName"
    value="${message(code: 'User.label', default: 'User')}" />
<title><g:message code="default.show.label" args="[entityName]" /></title>
<script>
    $(document).ready(function() {
        $('#table_id').dataTable();
    });
</script>


</head>
    <body>
    <table id="table_id" class ="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>

    </body>
    </html>

这是我的 main.gsp

<!doctype html>
    <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title><g:layoutTitle default="Grails"/></title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
            <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
            <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
            <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
            <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
            <g:layoutHead/>
            <r:layoutResources />
        </head>
        <body>
            <div style ="font-weight:bold; font-size:20px" id="grailsLogo" role="banner"><a href="${createLink(uri: '/')}">Grails</a></div>
            <g:layoutBody/>
            <div class="footer" role="contentinfo"></div>
            <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>
            <g:javascript library="application"/>
            <r:layoutResources />
        </body>
    </html>
4

1 回答 1

2

我认为“插件”这个词会让你失望。这不是一个 Grails 插件——它是一个 jQuery 插件。完全不同。首先确保你有 jQuery 本身安装、活动和工作。

您下载的文件将位于以下位置：

  1. .js 文件在web-app/js
  2. .css 文件在web-app/css
  3. 中的图像文件web-app/images（我很确定这是他们将根据查看 css 文件工作的地方）

然后将它们包含在 gsp 页面中：

在conf/ApplicationResources.groovy

modules = {
    application {
        resource url:'js/application.js'
        resource url:'js/jquery.dataTables.min.js'
    }
}

在普惠制中

<head>
<link rel="stylesheet" href="${resource(dir:'css', file: 'demo_table.css')}" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>

<g:set var="entityName"
value="${message(code: 'User.label', default: 'User')}" />
<meta name="layout" content="main">
<g:set var="entityName"
  value="${message(code: 'User.label', default: 'User')}" />
<title><g:message code="default.show.label" args="[entityName]" /></title>
<script>
$(document).ready(function() {
    alert('I am working'); //remove once you see the alert
    $('#table_id').dataTable();
});
</script>
</head>
....

（这应该会在页面加载时给您一个警报，就像检查以确保 jQuery 工作正常。在您看到警报后，您可以删除该alert行）

我以我使用它的方式包含了 jQuery；从 CDN 获取它，这样我就可以保持最新状态。

然后按照您列出的演示页面上的其余示例进行操作。

于 2013-05-20T19:27:46.953 回答