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);