JSP
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jqGrid Example</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var data = [[48803, "DSK1", "", "02200220", "OPEN1"], [48769, "APPR", "", "77733337", "ENTERED1"]];
$("#grid").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"},
{
name: 'thingy',
index: 'thingy',
width: 90,
sorttype: "date"},
{
name: 'blank',
index: 'blank',
width: 30},
{
name: 'number',
index: 'number',
width: 80,
sorttype: "float"},
{
name: 'status',
index: 'status',
width: 80,
sorttype: "float"}
],
caption: "Static Data Example",
// ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].length; j++) {
mydata[i][names[j]] = data[i][j];
}
}
for (var i = 0; i <= mydata.length; i++) {
$("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
});//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery("#projectTable").jqGrid({
url: "LoadJsonDataServlet?type=BS21 7RH",
datatype: "json",
jsonReader: {repeatitems: false, id: "ref"},
colNames:['First Name','Last Name', 'Address'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'address',index:'address', width:500}
],
rowNum:20,
rowList:[20,60,100],
height:460,
pager: "#pagingDiv",
viewrecords: true,
caption: "Json Example"
});
$("#pcSelect").change(function(){
alert("cambio");
var postcode = $("#pcSelect").val();
alert("seect -> "+postcode);
jQuery("#projectTable").jqGrid(
"setGridParam",{
url:"LoadJsonDataServlet?type="+ postcode,
page:1})
.trigger("reloadGrid");
});
});
</script>
</head>
<body>
<table id="grid"></table>
<hr>
<div>
<div class="borderBottom" style="height:5em;">
<div class="floatLeftDiv borderRight">
<div class="padding">
<label>Postcode:</label>
<select id="pcSelect">
<option>BS21 7RH</option>
<option>BS1 8QT</option>
</select>
</div>
</div>
</div>
<div>
<div style="float: left;">
<table id="projectTable"></table>
<div id="pagingDiv"></div>
</div>
</div>
</div>
</body>
</html>
Clase DATA
Código PHP:
public class Data {
private static Map<String, List<Person>> data = new HashMap<String, List<Person>>();
static{
populateBS217RHData();
populateBS18QTData();
}
public List<Person> getData(String postcode){
return data.get(postcode.toUpperCase());
}
private static void populateBS217RHData(){
List<Person> personList = new ArrayList<Person>();
personList.add(new Person("Adam", "Davies", "18 Knowles Road Clevedon"));
personList.add(new Person("David", "Smith", "185 Old Kent Road, Clevedon"));
personList.add(new Person("Jane", "Adams", "216 Park Road, Clevedon"));
personList.add(new Person("Sue", "Green", "207 Old Stree, Clevedon"));
data.put("BS21 7RH", personList);
}
private static void populateBS18QTData(){
List<Person> personList = new ArrayList<Person>();
personList.add(new Person("Sarah", "Jones", "1354 Ashley Road, Bristol"));
personList.add(new Person("Jayne", "Peters", "254 ALma Vale Road, Bristol"));
personList.add(new Person("Peter", "Richards", "Flat 4, 567 Clifton Road, Bristol"));
personList.add(new Person("Andrew", "Love", "324 Regent Street, Bristol"));
data.put("BS1 8QT", personList);
}
}
Código PHP:
public class JqGridData<T> {
/** Total number of pages */
private int total;
/** The current page number */
private int page;
/** Total number of records */
private int records;
/** The actual data */
private List<T> rows;
public JqGridData(int total, int page, int records, List<T> rows) {
this.total = total;
this.page = page;
this.records = records;
this.rows = rows;
}
public int getTotal() {
return total;
}
public int getPage() {
return page;
}
public int getRecords() {
return records;
}
public List<T> getRows() {
return rows;
}
public String getJsonString(){
Map<String, Object> map = new HashMap<String, Object>();
map.put("page", page);
map.put("total", total);
map.put("records", records);
map.put("rows", rows);
return JSONValue.toJSONString(map);
}
}
CLASE LoadJsonDataServlet
Código PHP:
public class LoadJsonDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public LoadJsonDataServlet() {
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("xcvbkljhgdfsdstryt34235627832476573256238");
String postcode = request.getParameter("type");
if (postcode == null || postcode.trim().length() == 0) {
postcode = "BS21 7RH";
}
System.out.println("Type: " + postcode);
List<Person> personList = new Data().getData(postcode);
int totalNumberOfPages = 1;
int currentPageNumber = 1;
int totalNumberOfRecords = 8; // All in there are 8 records in our dummy data object
JqGridData<Person> gridData = new JqGridData<Person>(totalNumberOfPages, currentPageNumber, totalNumberOfRecords, personList);
System.out.println("Grid Data: " + gridData.getJsonString());
response.getWriter().write(gridData.getJsonString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
CLASS PERSON
Código PHP:
public class Person {
private String firstName;
private String lastName;
private String address;
public Person(String firstName, String lastName, String address) {
this.firstName = firstName;
this.lastName = lastName;
this.address = address;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String toString() {
return "{\"firstName\":\"" + firstName + "\", \"lastName\":\"" + lastName + "\", \"address\":\""
+ address + "\"}";
}
}
