读书人

jqGrid的施用例子-servlet

发布时间: 2012-11-20 09:55:43 作者: rapoo

jqGrid的使用例子-servlet

1.jsp页面需要引入的文件

?

?

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

<script type="text/javascript" src="js/grid.locale-cn.js"></script>

<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript" src="js/mygrid.js"></script>

<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /> ??

<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

?

2.mygrid.js内容

?

function gettypes(){

//动态生成select内容

var str="";

$.ajax({

type:"post",

async:false,

url:"checkpersontype",

success:function(data){

if (data != null) {

? ? ? ?var jsonobj=eval(data);

? ? ? ?var length=jsonobj.length;

? ? ? ?for(var i=0;i<length;i++){

? ? ? ? ? ?if(i!=length-1){

? ? ? ? ? ?str+=jsonobj[i].personType+":"+jsonobj[i].personType+";";

? ? ? ? ? ?}else{

? ? ? ? ? ? ?str+=jsonobj[i].personType+":"+jsonobj[i].personType;

? ? ? ? ? ?}

? ? ? ? } ??

? ? ? ? ? ? ? ?//$.each(jsonobj, function(i){

? ? ? ? ? ? ? ?//str+="personType:"+jsonobj[i].personType+";"

? ? ? //$("<option value='" + jsonobj[i].personType + "'>" + jsonobj[i].personType+ "</option>").appendTo(typeselect);

? ? //});

? ? }

? ? ? ? ? ?alert(str);

}

});

return str;

? ? }

$("#list").jqGrid({

caption:"个人信息",

url:"getAllPersonInfo",

mtype: 'POST',

datatype:"json",

colNames:['编号','姓名','类别','性别','年龄','手机','email'],

colModel:[

{name:'id',index:'id',align:'center',width:60, sortable:false},

{name:"pName",index:"pName",width:80,align:"center",sorttype:"string",editable:true,edittype:'text'},

{name:"type",index:"type",width:80,align:"center",sorttype:"string",editable:true,edittype:'select',editoptions:{value:gettypes()}},

{name:"pSex",index:"pSex",width:80,align:"center",sorttype:"string",editable:true,edittype:'select',editoptions:{value:"m:男;f:女"}},

{name:"pAge",index:"pAge",width:80,align:"center", sorttype:"int",editable:true,edittype:'text'},

{name:"pMobileNo",index:"pMobileNo",width:80,align:"center",sortable:false,editable:true,edittype:'text'},

{name:"email",index:"email",width:80,align:"center",sortable:false,editable:true,edittype:'text'} //sortable:false

],

rowNum:10,

rowList:[10,20,30],

pager:"#pager",

sortname:"pName",

autowidth:true,

//height:280,

height: '100%',

viewrecords: true,?

? ?multiselect: true,?

? ?multiselectWidth: 25,?

? ?sortable:true,?

? ?sortorder: "asc",

? ?//editurl:"addpersoninfo",

jsonReader:{ ?

? ? ? ? ? ? repeatitems : false ?

? ? ? ? }

}).navGrid('#pager',{edit:true,add:true,del:false});

$("#add").click(function(){

jQuery("#list").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false,drag: true,url:"addpersoninfo"});

});

?

3.服务器getAllPersonInfo端servlet主要内容

?

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

String page = request.getParameter("page"); // 取得当前页数,注意这是jqgrid自身的参数 ?

? ? ? ? String rows = request.getParameter("rows"); // 取得每页显示行数,,注意这是jqgrid自身的参数 ?

? ? ? ? String sidx = request.getParameter("sidx"); //取得排序字段

? ? ? ? String sord ?= request.getParameter("sord");//排序方式asc、desc?

PrintWriter out = response.getWriter();

List Alllist=PersonInfoDao.getInstance().getAllPersonInfo();

List list=PersonInfoDao.getInstance().getPersonInfo(Integer.parseInt(page),Integer.parseInt(rows),sidx,sord);

int records=Alllist.size();

// 定义返回的数据类型:json,使用了json-lib ?

? ? ? ? JSONObject jsonObj = new JSONObject(); ?

?

? ? ? ? // 根据jqGrid对JSON的数据格式要求给jsonObj赋值 ?

? ? ? ? jsonObj.put("page", page); ? ? // 当前页 ?

? ? ? ? int total=(records%Integer.valueOf(rows)==0)?records/Integer.valueOf(rows):(records/Integer.valueOf(rows)+1);

? ? ? ? jsonObj.put("total", total); ? ?// 总页数 ?

? ? ? ? jsonObj.put("records", records); ?// 总记录数 ?

int i=0;

// 定义rows,存放数据 ?

? ? ? ? JSONArray json = new JSONArray(); ?

Iterator it=list.iterator();

while(it.hasNext()){

PersonInfo p=(PersonInfo) it.next();

// 存放一条记录的对象 ?

? ? ? ? ? ? JSONObject cell = new JSONObject(); ?

? ? ? ? ? ? cell.put("id", ((Integer.parseInt(page)-1)*Integer.parseInt(rows)+i));

? ? ? ? ? ? cell.put("pName", p.getpName());

? ? ? ? ? ? cell.put("type", p.getType().getPersonType());

? ? ? ? ? ? if(p.getpSex().equals("m")){

? ? ? ? ? ? cell.put("pSex","男");

? ? ? ? ? ? }else{

? ? ? ? ? ? cell.put("pSex","女");

? ? ? ? ? ? }

? ? ? ? ? ? cell.put("pAge", p.getpAge());

? ? ? ? ? ? cell.put("pMobileNo", p.getpMobileNo());

? ? ? ? ? ? cell.put("email", p.getEmail());

? ? ? ? ? ? i++;

? ? ? ? ? ? if(i==10){

? ? ? ? ? ? i=0;

? ? ? ? ? ? }

? ? ? ? ?// 将该记录放入rows中 ?

? ? ? ? ? ? json.add(cell);

}

// 将rows放入json对象中 ?

jsonObj.put("rows", json);

//System.out.println(list);

//JSONArray json=JSONArray.fromObject(list.toArray());

//System.out.println(json.toString());

out.print(jsonObj);

?

4.服务器addpersoninfo端servlet主要内容

?

?

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

User user=(User) request.getSession().getAttribute("enterUser");

String name=request.getParameter("pName");

String sex=request.getParameter("pSex");

String age=request.getParameter("pAge");

int iage=0;

if(age!=null&&!age.equals("")){

iage=Integer.valueOf(age);

}

String mobile=request.getParameter("pMobileNo");

String type=request.getParameter("type");

System.out.println(type);

PersonType ptype=PersonTypeDao.getInstance().selectPersonTypeByname(type);

String email=request.getParameter("email");

String address=request.getParameter("address");

PersonInfo personinfo=new PersonInfo();

personinfo.setUser(user);

personinfo.setpName(name);

personinfo.setpSex(sex);

personinfo.setpAge(iage);

personinfo.setpMobileNo(mobile);

personinfo.setType(ptype);

personinfo.setEmail(email);

personinfo.setAddress(address);

boolean res=PersonInfoDao.getInstance().savePersonInfo(personinfo);

out.print(res);

读书人网 >Web前端

热点推荐