easyui下的datagrid后台数据加载和分页

Datagrid的创建需要做以下几件事情，

 

第一步，我们需要引入以下几个个包，少一个都不可以，否则你会发现你无论做的再怎么对结果都会出错，

 

 

 

第二步，引入了这些包之后，我们需要创建一个javabeans，就像是建表一样，照着填上去就可以了，

public class Library{

这些写你要的属性，然后点击右键获得get和set方法

private  类型  属性名;

public String toString() {

return "toString类型名 [类型名=" +类型名+"]";

}

public Library() {

}

public Library(String类型名){

super();

this.类型名=类型名;

}

}

 

 

好了这个bean就做好了。

 

 

第三步，在后台dao层建立个方法，把bean的信息放进去

public List<bean的名字> daoShoworg(Stringsql) {

    List<bean的名字>list = new ArrayList<bean的名字>();

try {

conn = this.getConn();

pstmt = conn.prepareStatement(sql);

rs = pstmt.executeQuery();

while (rs.next()) {

Library 实例名=new bean的名字(

                  //一个个放进去

Rs.get类型(1),

);

list.add(lib);

}

} catch (Exceptione) {

e.printStackTrace();

} finally {

this.closeAll(conn,pstmt, rs);

}

return list;

}

 

这个后台代码就创建好了。

 

 

第四步，建立一个servlet，获得到dao里面的方法，然后往前台送，easyui会根据url=servlet获得数据，

String sql = “select你需要的项目 from  表名”

//注意这里sql找到的要与你的后台的相对应，不能说select了一name，age，然后后台只toString了一个

   List<Library>list = a.daoShoworg(sql);

    int total =a.getTotal();

    JSONArray Js = JSONArray.fromObject(list);

    JSONObject jsonObject =new JSONObject();

    jsonObject.put("total",list.size());

    jsonObject.put("rows",Js.toString());

    PrintWriter out=response.getWriter();

    out.print(jsonObject.toString());

 

 

第五步，后台代码都弄好了，现在就是要在前台添加一个datagrid了，首先在body底下添加一个div

<div>

          <table id="dg">

     </table>

  </div>

然后这里介绍的使用js来渲染这个table，

在上面的js代码中写到

             $(function(){

$('#dg').datagrid({

title:'',

                   //下面三列是分页所需待会会讲到

pagination:true,

pageSize: 8 ,

pageList:[8,16,24,32,40] ,

rownumbers:true,

height:505 ,

url:'你的json数据打包的后台',

fitColumns:true,  

striped: true ,

frozenColumns:[[//冻结列特性 ,不要与fitColumns 特性一起使用

//这个checkbox在后面使用删除和修改需要用到，

{

field:'ck',

width:10 ,

checkbox: true,

}

]],

//给你的数据放列名，这里如果你后台需要与之相对应，否则会出现交错或者空出的情况

columns:[[

{  

field:'libname',//切记要和你的对象名一致，不然不会出来。

title:'列名',

width:20 ,

},

 

 

在对datagrid成功创建并且建立了数据之后之后就是对数据进行操作了，

A.分页

前端：

pagination:true,

pageSize: 8 ,

pageList:[8,16,24,32,40] ,

rownumbers:true,

在创建datagrid的时候写入这些，然后就交给后台了；

 

后台：

1.

int currentPage = Integer.parseInt(request.getParameter("page"));//1

int pageSize    = Integer.parseInt(request.getParameter("rows"));//5

接受在前台传输过来的page和rows值，这个是easyui自带的，只要写了前端后台就可以接受到

2.

分页需要在原先的datagrid拼接json的后台servlet中的sql语句后面加个限制

limit  "+ (currentPage-1)*pageSize +" , "+ pageSize+"

 

3.在后台dao里面写个方法

public int getTotal(){

int count = 0;

String sql =" select count(*) from 表  ";

try{

conn = this.getConn();

pstmt = conn.prepareStatement(sql);

rs = pstmt.executeQuery();

if(rs.next()){

count = rs.getInt(1);

}

}

catch (Exceptione) {

e.printStackTrace();

} finally {

this.closeAll(conn,pstmt, rs);

}

return count;

}

}

然后在servlet用一个int来接受它

将这个int放进

 jsonObject.put("total",这个int);

 

 

好了现在这个datagrid就有了分页的效果

各位照套这个就可以了