How to populate BootStrap data into jqGrid layout in gsp page I need to show all static data on my gsp page using BootStrap class and then create webservice accordingly.
I'm using Grails 2.3.8, GGTS 3.5.1, jdk 1.7.
BootStrap.groovy file:
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 = { }
}
Domain class:
class Customer {
String firstName
String lastName
Integer age
String emailAddress
}
Controller Class:
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 file:
<%@ 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>
