使用的元件是jqGrid。這是jqGrid的Demo，裡面有許多使用範例，有興趣的可以去看一下，這邊只會用到以下這些簡單的功能。
1. 使用AJAX 的方式，向Server取得 JSON 格式的資料
2. 支援常見的分頁方式
3. 編輯時使用 inline editor 的方式
檔案位置：
檔案要放對位置
*.css 放在 N:\PlayFramework\play-1.1\members\public\stylesheets
css中用到的圖檔放在 N:\PlayFramework\play-1.1\members\public\stylesheets\images
*.js 放在 N:\PlayFramework\play-1.1\members\public\javascripts
View
View 的部份要將相關的js 檔include進來。我決定直接加在main.html
N:\PlayFramework\play-1.1\members\app\views\main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>#{get 'title' /}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery-ui-1.8.12.custom.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/ui.jqgrid.css'}">
#{get 'moreStyles' /}
<link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
<script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/jquery-ui-1.7.2.custom.min.js'}" type="text/javascript"></script>
<script src="@{'/public/javascripts/grid.locale-cn.js'}" type="text/javascript"></script>
<script src="@{'/public/javascripts/jquery.jqGrid.min.js'}" type="text/javascript"></script>
#{get 'moreScripts' /}
</head>
<body>
#{if flash.error}
<p class="error">${flash.error}</p>
#{/if}
#{if flash.success}
<p class="success">${flash.success}</p>
#{/if}
<div id="main">
#{doLayout /}
</div>
</body>
</html>
和controller對應的View要加入jqGrid元件N:\PlayFramework\play-1.1\members\app\views\EnhanceMemberOperation\index.html
#{extends 'main.html' /}
#{set title:'Home' /}
Member Data
<table id="scroll37"></table>
<div id="pscroll37" ></div>
<script type="text/javascript">
jQuery.fn.log = function(msg) {
if (typeof console != "undefined")
console.log("%s: %o", msg, this);
return this;
};
var lastsel2
jQuery("#scroll37").jqGrid({
url:'@{memberList()}',
datatype: "json",
height: 400,
width: 800,
editable: true,
colNames:['ID','firstName', 'lastName','gender', 'email'],
colModel:[
{
name:'memberid',
index:'memberid',
align : "right",
width : 50,
required : true,
hidden: true,
editable: false,
editrules: { edithidden: false }, hidedlg: true
},{
name:'firstName',
index:'firstName',
width:100,
editable : true,
required : true,
editrules:{required:true}
},{
name:'lastName',
index:'lastName',
width:100,
editable : true,
required : true
},{
name:'gender',
index:'gender',
width:50,
editable : true,
edittype : 'select',
editoptions:{value:"1:男;2:女"},
formatter:function(cellvalue, options, row){
if(cellvalue==1 || cellvalue=="男" ){
return "男";
}else{
return "女";
}
},
required : true
},{
name:'email',
index:'email',
width:150,
editable : true,
required : true
}
],
rowNum:20,
rowTotal: 100,
rowList : [20,30,50],
//scroll:2,
headertitles: false,
loadonce:false,
mtype: "GET",
editurl: '@{memberEdit()}',
rownumbers: true,
rownumWidth: 40,
gridview: true,
pager: '#pscroll37',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "Member Data",
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#scroll37').saveRow(lastsel2);
$("#scroll37").jqGrid('setGridParam', {editurl:'@{memberEdit()}?memberId='+$('#scroll37').jqGrid('getCell',id, 1)})
jQuery('#scroll37').editRow(id,true);
lastsel2=id;
}
}
});
jQuery("#scroll37").jqGrid('navGrid','#pscroll37',{del:true,add:true,edit:true});
</script>
Controller由於新增了ajax的功能，所以controller 的部份要使用 renderJSON() 作輸出
N:\PlayFramework\play-1.1\members\app\controllers\EnhanceMemberOperation.java
package controllers;
import java.util.ArrayList;
import java.util.Hashtable;
import java.util.List;
import models.Member;
import models.MemberCard;
import play.data.validation.Required;
import play.mvc.Controller;
public class EnhanceMemberOperation extends Controller {
public static void index() {
render();
}
public static void memberEdit(@Required String oper, long memberId,String firstName,String lastName ,Integer gender, String email) {
if(validation.hasErrors()) {
params.flash(); // add http parameters to the flash scope
validation.keep(); // keep the errors for the next request
System.out.println("ERROR: "+ validation.errors());
index();
}
if (oper.equalsIgnoreCase("add")){
new Member(firstName,lastName,gender,email).insert();
}else if (oper.equalsIgnoreCase("del")){
Member member = Member.findById(memberId);
member.delete();
}else if (oper.equalsIgnoreCase("edit")){
Member member = Member.findById(memberId);
member.firstName = firstName;
member.lastName = lastName;
member.gender = gender;
member.email = email;
member.update();
}
index();
}
public static void memberList(int page, int rows ,int sidx ,int sord ) {
System.out.println("進入memberList表單" + params.get("page")+":" + params.get("rows"));
int totalRecords= Member.all().count();
int totalPage = (int) java.lang.Math.ceil(new Double(totalRecords) / new Double(rows));
System.out.println("totalPage=" + totalPage +" totalRecords=" + totalRecords);
Hashtable ht = new Hashtable();
ArrayList al = new ArrayList();
int start = (page - 1) * rows;
List<Member> members = Member.all().fetch(rows,start);
for (int i=0;i<members.size();i++){
Hashtable rowdata = new Hashtable();
ArrayList columns = new ArrayList();
columns.add(members.get(i).id);
columns.add(members.get(i).firstName);
columns.add(members.get(i).lastName);
columns.add(members.get(i).gender);
columns.add(members.get(i).email);
rowdata.put("id",i);
rowdata.put("cell",columns);
al.add(rowdata);
}
ht.put("page",page);
ht.put("total",totalPage);
ht.put("records",totalRecords);
ht.put("rows",al);
renderJSON(ht);
}
public static void memberDelete(Long id) {
Member member = Member.findById(id);
notFoundIfNull(member);
member.delete();
flash.success("The member %s has been deleted", member.firstName );
index();
}
}
執行結果如下圖:
