03 October 2015

Groovy and Grails Application with JTable

1) we  need to create Controller in Grails application

package com.netjets

class AirportController {
  def airportService
    def index() { }
def list() {

String list=airportService.list()
render(text:list,contentType:'application/json')
 
}
def create() {
log.info "params.alternateAirport: ${params.alternateAirport},params.notes: ${params.notes}"
String list=airportService.create(params.alternateAirport,params.notes)
render(text:list,contentType:'application/json')
}
def delete() {
String list=airportService.delete(params.id.toInteger())
render(text:list, contentType:'application/json')
}
def update() {
String list=airportService.update(params.id.toInteger(),params.alternateAirport,params.notes)
render(text:list,contentType:'application/json')
}
}

2) we need to define service layer in service folder

package com.netjets

import grails.transaction.Transactional
import com.netjets.Airport
import java.util.List
import java.util.ArrayList
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.reflect.TypeToken;

@Transactional
class AirportService {

    String list() {
Gson gson = new Gson();
List<Airport> lstUser=new ArrayList<Airport>();
 
String listData="";
try{
lstUser=Airport.list()
JsonElement element = gson.toJsonTree(lstUser, new TypeToken<List<Airport>>() {}.getType());
JsonArray jsonArray = element.getAsJsonArray();
listData=jsonArray.toString();
listData="{\"Result\":\"OK\",\"Records\":"+listData+"}";
}catch(Exception ex){
listData="{\"Result\":\"ERROR\",\"Message\":"+ex.getMessage()+"}"

ex.printStackTrace()

}
return listData
    }
String create(String altAirport,String notes)
{
Gson gson = new Gson();
String listData=""
try{
 Airport airport=new Airport()
 airport.alternateAirport=altAirport
 airport.notes=notes
 airport.save()
 log.info "altAirport: ${altAirport},notes: ${notes}"

def json="{\"id\":${airport.id},\"alternateAirport\":\"${airport.alternateAirport}\",\"notes\":\"${airport.notes}\"}"

log.info "json: ${json}"
  listData="{\"Result\":\"OK\",\"Record\":"+json+"}";
   log.info "listData: ${listData}"
}catch(Exception e)
{
listData="{\"Result\":\"ERROR\",\"Message\":"+e.getStackTrace().toString()+"}";
e.printStackTrace()
}
return listData
}

String update( int id, String altAirport,String notes)
{

String listData=""
try{
 Airport airport= Airport.get(id)
 airport.alternateAirport=altAirport
 airport.notes=notes
 airport.save()

  listData="{\"Result\":\"OK\"}"
}catch(Exception e)
{
listData="{\"Result\":\"ERROR\",\"Message\":"+e.getStackTrace().toString()+"}";
e.printStackTrace()
}
return listData
}

String delete( int id)
{
String listData=""
try{
 Airport airport= Airport.get(id)
   airport.delete()

  listData="{\"Result\":\"OK\"}"
}catch(Exception e)
{
listData="{\"Result\":\"ERROR\",\"Message\":"+ex.getStackTrace().toString()+"}";
e.printStackTrace()
}
return listData
}
}

3) finally we need to define view for our application where we render the view.gsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>index</title>


<link rel="stylesheet" href="${resource(dir: 'css/metro/crimson', file: 'jtable.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery-ui-1.10.3.custom.css')}" type="text/css">
<script src="${resource(dir: 'js', file: 'jquery-1.8.2.js')}" type="text/javascript"></script>
<script src="${resource(dir: 'js', file: 'jquery-ui-1.10.3.custom.js')}" type="text/javascript"></script>
<script src="${resource(dir: 'js', file: 'jquery.jtable.js')}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of Airport',
            actions: {
                listAction: '${createLink(controller:'airport',action:'list')}',
                createAction:'${createLink(controller:'airport',action:'create')}',
                updateAction: '${createLink(controller:'airport',action:'update')}',
                deleteAction: '${createLink(controller:'airport',action:'delete')}'
            },
            fields: {
                id: {
               
                    key: true,
                    list: false,
                    create:false
                },
                alternateAirport: {
                    title: 'Alternate Airport',
                    width: '30%',
                    edit:true
                },
                notes: {
                    title: 'notes',
                    width: '30%',
                    edit:true
                }            
            }
        });
        $('#PersonTableContainer').jtable('load');
    });
</script>


</head>
<body>
<div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">

<div id="PersonTableContainer"></div>
</div>
</body>
</html>

You can find the code github repository https://github.com/sricanth/Sri-src/tree/master/ajax

No comments: