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

【问题标题】：using 3 layouts on same gsp page在同一个 gsp 页面上使用 3 个布局
【发布时间】：2012-03-26 14:44:58
【问题描述】：

这是我的问题的编辑，首先是如何在同一个 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 个布局？

感谢你们的帮助...

【问题讨论】：

标签： grails layout

【解决方案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>

【讨论】：

anju 我编辑了我的问题....基本上你说的效果很好。比我尝试使用相同的逻辑来应用 3 个布局但它失败了。我想知道你能不能再把我修好。提前致谢！
@user511875：您可以在同一页面上使用任意数量的布局。我在您发布的代码中看到的唯一问题是您提到的文件名中的拼写错误（它写成 mainTabPanle 而不是 mainTabPanel）。我已经测试了您发布的代码，它工作正常
真的吗？！？！？！你测试了我的代码并且它工作正常？？？如果是这样的话，它的好消息......不幸的是，我现在不得不把它放在一边，太多的事情要在工作中首先实现。但从之前的情况来看，我几乎可以肯定你说的是真的，非常感谢 anju 的帮助以及你花时间帮助我。一旦我有空闲时间继续这个项目，我会发布另一个回复说它正在工作:) 非常感谢队友

【解决方案2】：

首先感谢您的回复 Anuj ！

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

我找到了我需要的东西，那就是使用模板！例如，我有一个名为“_mainHeader.gsp”的文件，如下所示：

<!-- 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.模板文件名带有'_'字符 2.“page1.gsp”中的关闭body标签是关闭从“_mainHeader.gsp”文件开始的body标签。

所以基本上这个 tempaltes 的东西是 gsp 页面部分的复制粘贴，它工作得很好！非常感谢您的回复！

【讨论】：

嗯，您提供的解决方案无疑会起作用，但它并不像您希望的那样干净。在早期的解决方案中你得到奇怪的 html 的原因是 applyLayout 标签没有关闭。请查看我的编辑。