【发布时间】：2014-08-22 10:52:12
【问题描述】：
如何在 gsp 页面中将 BootStrap 数据填充到 jqGrid 布局中 我需要使用 BootStrap 类在我的 gsp 页面上显示所有静态数据，然后相应地创建 web 服务。
我正在使用 Grails 2.3.8、GGTS 3.5.1、jdk 1.7。
BootStrap.groovy 文件：
class BootStrap {
def init = { servletContext ->
// if we have an empty customer database,
// create some test data
if (Customer.count() == 0) {
new Customer(
firstName:'John', lastName:'Smith',
age:27,
emailAddress:'john@somewhere.com'
).save()
// and so on
}
}
def destroy = { }
}
域类：
class Customer {
String firstName
String lastName
Integer age
String emailAddress
}
控制器类：
class CustomerController {
// return JSON list of customers
def jq_customer_list = {
def customers = Customer.list()
def jsonCells = customers.collect {
[cell: [it.firstName,
it.lastName,
it.age,
it.emailAddress
], id: it.id]
}
def jsonData= [rows: jsonCells]
render jsonData as JSON
}
}
gsp 文件：
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="layout" content="main"/>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" />
<link rel="stylesheet" href="${resource(dir:'css/ui-lightness',file:'jquery-ui-1.7.2.custom.css')}" />
<g:javascript src="jquery-1.3.2.min.js"/>
<g:javascript src="jquery-ui-1.7.2.custom.min.js"/>
<g:javascript src="grid.locale-en.js"/>
<g:javascript src="jquery.jqGrid.min.js"/>
<title>Customer list</title>
</head>
<body>
<div class="body">
<h1>Customer List</h1>
<!-- table tag will hold our grid -->
<table id="customer_list" class="scroll jqTable" cellpadding="0" cellspacing="0">
</table>
<!-- pager will hold our paginator -->
<div id="customer_list_pager" class="scroll" style="text-align:center;"></div>
<script type="text/javascript">
/* when the page has finished loading.. execute the follow */
$(document).ready(function () {
jQuery("#customer_list").jqGrid({
url:'jq_customer_list',
datatype: "json",
colNames:['First Name','Last Name','Age','Email Address','id'],
colModel:[
{name:'firstName'},
{name:'lastName'},
{name:'age'},
{name:'email'},
{name:'id'}
],
pager: jQuery('#customer_list_pager'),
viewrecords: true,
gridview: true
});
});
</script>
</div>
</body>
</html>
【问题讨论】：
-
url:'jq_customer_list'似乎我怀疑。您能否验证该操作是否会真正被调用。您可以另外使用 Internet Explorer 或 Google chrome 的开发者工具或使用 Fiddler 来跟踪完整的 HTTP 流量。我建议你添加添加loadError回调（见the answer），loadonce: true选项因为你不使用服务器端分页，添加autoencode: true选项，将pager: jQuery('#customer_list_pager')替换为pager: '#customer_list_pager' -
它对我不起作用。你能解释一下我们为什么要创建这个“url: ...”吗？如果你解释一下，它真的很有趣
-
我不是圣杯开发者，我使用 ASP.NET（主要是 MVC）。 “创建 URL”在我看来是错误的术语，但在 MVC 中，例如 MVC 操作的 URL 将由基本 URL、控制器名称和操作名称构建。我只是怀疑使用 Action 名称作为 URL 的用法。所以我建议使用
loadError并调试服务器代码以验证您是否真的调用了该操作并且JSON响应返回并被正确解析。在 HTTP 流量中，您将看到将使用哪个绝对 URL，并将其与您的操作的真实 URL 进行比较。
标签： jquery grails groovy jqgrid