Question

这是我的问题的编辑，首先是如何在同一个gsp页面中应用2个布局，但现在我遇到了3个布局的问题:)：

我对所有css和布局的东西都很新，而且我使用的是grails 2.0版本我的问题中有以下模块：
1. main.gsp布局，基本上有一个很好的标题，所有页面都有公司徽标。
2. mainTabPanle.gsp布局基本上包含所有页面应该具有的一些主要选项卡 3. reportTab.gsp布局，它基本上包含很好的报告选项卡和简短的javascript代码，用于处理所有报告gsp页面应该具有的选定选项卡颜色。

我要做的是在gsp页面的所有报告中使用此reportTab布局。

所以这就是我到目前为止所得到的：

main.gsp：

<!doctype html>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"type="text/css">
<g:layoutHead/>
<r:layoutResources />
</head>
<body style="height:100%">
<div>some nice header in here </div>
<g:layoutBody/>
<r:layoutResources />
</body>
</html>

mainTabPanle.gsp（也位于布局文件夹中）

<g:applyLayout name="main">    
<!doctype html> 
<html> 
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div>some main tabs here </div> 
<g:layoutBody/>
</body>
<script type="text/javascript">
//script to manipulate main tabs    
</script>
<r:layoutResources />
</body>
</html>
</g:applyLayout>

reportTabPanel.gsp：

<g:applyLayout name="mainTabPanel">    
<!doctype html> 
<html> 
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div>some reports tab panel </div>  
<g:layoutBody/>
</body>
<script type="text/javascript">
//some script to manipulate report tab item
</script>
<r:layoutResources />
</body>
</html>
</g:applyLayout>

现在我在moneyreport.gsp标题中使用以下行：

<meta name="layout" content="reportTabPanel" />

我想看到的是漂亮的标题和maintabsPanel以及reportTabPanel，但我看到的只是moneyreport.gsp的主体

奇怪的是，如果我使用它：

<meta name="layout" content="mainTabPanel" />

在moneyreport.gsp里面，我看到了mainTab和moneyreport.gsp的正文。

我在做错了什么？我不能在同一页面上使用3个布局？

感谢你的帮助......

Answer 1

您可以在同一页面上应用2个布局。要在布局文件中应用不同的布局，您需要使用applyLayout标记。您的reportTab应该是这样的：

<g:applyLayout name="main">    
<!doctype html>  
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div> some nice tabs here </div>
<g:layoutBody/>
</body>
<script type="text/javascript">
few line script handling chosen tab color in here
</script>
<r:layoutResources />
</body>
</html>
</g:applyLayout>

Answer 2

首先感谢你的答复Anuj！

它有点工作但是以错误的方式因为我得到了奇怪的html源：我得到2个标题和2个身体标签所以基本上grails只是复制粘贴所有布局一起，即使浏览器显示正确，这也不是一个好的html页面！

我找到了我需要的东西，那就是使用模板！例如，我有一个名为＆＃34; _mainHeader.gsp＆＃34;看起来像这样：

<!-- this is my main header for all gsp pages -->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IntentIQ Management System</title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"type="text/css">
<link rel="shortcut icon" href="${resource(dir:'images/myImg',file:'favicon.ico')}" type="image/x-icon">

从所有页面我可以使用这些行，例如page1.gsp：

<g:render template="/templates/mainHeader" />
</head>
<body>
<h1> this is page1 with header from mainHeader.gsp template </h1>
</body>
</html>

关注谁读过这篇文章： 1.temmplate文件名是＆＃39; _＆＃39;字符 2.＆＃34; page1.gsp＆＃34;中的关闭身体标签正在关闭从＆＃34; _mainHeader.gsp＆＃34;开始的body标签。文件。

所以基本上这个tempaltes的东西是gsp页面部分的复制粘贴，它的工作很棒！谢谢你的回复永远不会少！

在同一个gsp页面上使用3个布局

2 个答案: