easyui datagrid java_java_easyui体系之DataGrid（1）[转]

一：简介

以表格的形式展示数据、项目中式很常见的一个使用、table展示数据、牵扯到分页、上一页下一页、首页、尾页、翻页、选中展示的记录用于操作、总记录数等等、使用DataGrid很容易实现这一点。

二：页面源码

各个字段在页面中都有详细的说明

datagrid.jsp

My JSP 'original.jsp' starting page

内嵌页面datagridtaps.html：

dategridtaps.html

$('#datagrid').datagrid({

url:'login_getJson.action',//title: 'ssss',

iconCls:'icon-save',

pagination:true,

pageSize:10,

pageList:[10,20,30,40,50,60,70,80,90,100],

fit:true,//使表格自适应

fitColumns:true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用

nowrap:false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试

border:false,

idFeild:'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键

sortName:'id',//设置默认排序时的 字段(必须是field中的一个字段)

sortOrder:'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序

columns:[ [{

title:'编号',

field:'id',

width:100,//必须要给//sortable:true,//指定按照这个排序

},{

title:'姓名',

field:'userName',

width:100,//必须要给

},{

title:'密码',

field:'passWord',

width:100,//必须要给

}] ]

});

});

三：后台源码

这里没有和数据库进行交互、仅在方法中手动构造一个UserDTO的List

public String getJson() throws IOException{

List userList = new ArrayList();

userList.add(new UserDTO("1","chy","123"));

userList.add(new UserDTO("2","mxx","123"));

userList.add(new UserDTO("3","chk","123"));//当与后台交互时、可以根据前台回传的页号与每页记录数查询数据

//List userList = userService.getUsers(page, rows); 这样就可以动态获取每页记录数、前台动态展示。

//但是现在前台的总页数却变成每页的记录数、这样就要求还要有个service查询总记录数、然后重新构造Json传回到前台

//int count = userService.getUersCount();

/** 想要按照某个列进行排序的时候、就使用前台传过来的关于排序的字段和排序方式 sort、order

* List userList = userService.getUsers(page, rows, sort, order)*/System.out.println("sort" + sort + " order" +order);

Map m = new HashMap();

m.put("total", 12);

m.put("rows", userList);

System.out.println(getJson(m));

PrintWriter pw=ServletActionContext.getResponse().getWriter();

pw.write(getJson(m));

pw.flush();

pw.close();return null;

}

注意对Json的处理：前台需要的是一个含有total、rows对象的Json、所以使用Map包装了一下、同时这里使用的是JackJson、速度比较块。

private String getJson(Object o) throws IOException,

JsonGenerationException, JsonMappingException {

ObjectMapper om= newObjectMapper();

StringWriter sw= newStringWriter();

JsonGenerator jg= newJsonFactory().createJsonGenerator(sw);

om.writeValue(jg, o);

jg.close();returnsw.toString();

}

四：补充说明

1、 内嵌html页面、html页面中有class=”easyui-tabs”的div

2、 在内嵌html页面的那个panel中要添加一个style=”overflow:hidden;”属性、针对谷歌浏览器的滚动条。

3、 Datagrid 有分页属性pagination：他的子选项pageSize——每页显示的记录数 pageList——供于选择的每页的数量。

4、 每次请求后台都会向后台传递两个默认的参数、page(当前页号)、rows(每页总记录数)、当我们使用排序时、指定排序的字段和规则时、就会多传两个参数：sort(排序的字段)、order(排序方式：asc、desc)。我们可以根据这些参数来查询记录、

5、 传入的前台的Json格式的字符串要进行特殊处理、否则会错误的显示总记录数。具体处理看后台代码中关于Json的处理。