EXT 3.x 使用详解之Ext.grid.GridPanel(三)

最新推荐文章于 2017-11-25 15:21:27 发布

iteye_3535

最新推荐文章于 2017-11-25 15:21:27 发布

阅读量99

点赞数

文章标签： json 数据库 java

本文介绍了一个网格组件的实现，包括Ajax功能和分页标签功能。通过简单的代码示例，展示了如何在不使用数据库的情况下创建对象，并利用Ext.js库来实现网格的动态加载、分页和排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇主要介绍了grid的ajax功能以及分页标签功能，具体看代码吧，注释很全面，感慨一下组件还是比较实用和漂亮的！

为介绍方便简洁，这里没有使用数据库，而直接创建了一些对象，参考者可以自己改成数据库即可。

JSP页面部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page pageEncoding="UTF-8"%> <html> <head> <style type="text/css"> html,body{ margin:0px; height:100%; } #content{ height:100%; width:100%; } </style> </head> <body style="height:100%"> <script type="text/javascript"> //本例加入了grid组件的ajax以及分页的功能 var grid; var cm; var ds; //分页标签栏 var bbar; //全局高度设定，用来调整整个grid的高度 var h; //性别详细 function renderSex(value) { if (value == 'male') { return "<span style='color:red;font-weight:bold;'>男</span>"; } else { return "<span style='color:green;font-weight:bold;'>女</span>"; } } //描述详细 function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){ var str = (rowIndex+1)+"行|"+(columnIndex+1)+"列"; return str; } Ext.onReady(function() { //对列的定义 cm = new Ext.grid.ColumnModel([ {header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/5,sortable:true,dataIndex:'id'},//sortable 可排序，具体体现在有排序选项卡 {header:'<font color="blue">日期</font>',width: Ext.get("content").getWidth()/5,dataIndex:'time',renderer:Ext.util.Format.dateRenderer('Y-m-d h:i:s')}, {header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/5,dataIndex:'sex',renderer:renderSex}, {header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/5,dataIndex:'name'}, {header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/5,dataIndex:'descn',renderer:renderDescn} ]); //ajax代理 var proxyParam={ url:'http://localhost:8080/MyTest/search.do?method=SearchAjax', method:'GET' }; //对ajax返回的json数据进行解析, var jsonReaderMeta={ root: 'grids',//Json对象的root名称,与SearchVO的属性相对应 totalProperty: 'totalCount', //数据的总行数 ,与SearchVO的属性相对应 id: 'id' //数据的主键,与GridVO的属性相对应 }; //解析Json数据的类型 var recordType=[ {name: 'id', mapping: 'id'}, //日期类型如果是String也可以表明为date型，不过需要标明pattern,具体pattern可查api中date类 {name: 'time', mapping: 'time',type : 'date',dateFormat : 'Y-m-d h:i:s' }, {name: 'sex', mapping: 'sex'}, {name: 'name', mapping: 'name'}, {name: 'desc', mapping: 'desc'} ]; //定义dataStore ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy(proxyParam), reader: new Ext.data.JsonReader(jsonReaderMeta,recordType), remoteSort:true //允许到后台进行排序 }); //定义分页标签 bbar = new Ext.PagingToolbar({ pageSize: 3, store: ds, displayInfo: true, displayMsg: '第{0} 到 {1} 条数据共{2}条', emptyMsg: "没有数据" }); //创建grid对象 grid = new Ext.grid.GridPanel({ renderTo: 'content', width: Ext.get("content").getWidth(), store: ds, cm: cm, loadMask: true, bbar: bbar //如果需要每列自动填满Grid，可以使用viewConfig配置中的foreceFit //viewConfig:{forceFit:true} }); //加载dataStore，此时可以带一些必要的参数提交到后台 ds.load({params:{start:0, limit:3}}); //在dataStore加载的时候进行高度的自动调整 ds.on('load', function(){ h = $('.x-panel-bbar').height()+$('.x-grid3-body').height()+$('.x-grid3-header').height()+20; grid.setHeight(h); }); }); //自动适应浏览器窗口调整 window.onresize=function(){ cm = new Ext.grid.ColumnModel([ {header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/5,sortable:true,dataIndex:'id'}, {header:'<font color="blue">日期</font>',width: Ext.get("content").getWidth()/5,dataIndex:'time',renderer:Ext.util.Format.dateRenderer('Y年m月d日h时m分s秒')}, {header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/5,dataIndex:'sex',renderer:renderSex}, {header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/5,dataIndex:'name'}, {header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/5,dataIndex:'descn',renderer:renderDescn} ]); if(grid){ grid.setWidth(Ext.get("content").getWidth()); //重新载入dataStore和cm,此时会根据数据以及新设定的cm自动调整宽和高 grid.reconfigure(ds,cm); } }; </script> <div id="content"> <div> </body> </html>

下面是后台search.do部分(注意实用了json数据类型，请加入json相关的包):

public ActionForward SearchAjax(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { Integer start = Integer.valueOf(request.getParameter("start")); Integer limit = Integer.valueOf(request.getParameter("limit")); System.out.println("start:" + start + "|limit:" + limit); String sort = request.getParameter("sort"); String dir = request.getParameter("dir"); if (StringUtils.isBlank(sort)) { sort = "id"; } if (StringUtils.isBlank(dir)) { dir = "ASC"; } System.out.println("sort:" + sort + "|" + dir); List<GridVO> lists = new ArrayList<GridVO>(); GridVO vo = new GridVO(); vo.setId(1); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name1"); vo.setDesc("descn1"); lists.add(vo); vo = new GridVO(); vo.setId(2); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name2"); vo.setDesc("descn2"); lists.add(vo); vo = new GridVO(); vo.setId(3); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name3"); vo.setDesc("descn3"); lists.add(vo); vo = new GridVO(); vo.setId(4); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name4"); vo.setDesc("descn4"); lists.add(vo); vo = new GridVO(); vo.setId(5); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name5"); vo.setDesc("descn5"); lists.add(vo); vo = new GridVO(); vo.setId(6); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name6"); vo.setDesc("descn6"); lists.add(vo); vo = new GridVO(); vo.setId(7); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name7"); vo.setDesc("descn7"); lists.add(vo); vo = new GridVO(); vo.setId(8); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name8"); vo.setDesc("descn8"); lists.add(vo); vo = new GridVO(); vo.setId(9); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name9"); vo.setDesc("descn9"); lists.add(vo); vo = new GridVO(); vo.setId(10); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name10"); vo.setDesc("descn10"); lists.add(vo); vo = new GridVO(); vo.setId(11); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name11"); vo.setDesc("descn11"); lists.add(vo); vo = new GridVO(); vo.setId(12); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name12"); vo.setDesc("descn12"); lists.add(vo); vo = new GridVO(); vo.setId(13); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name13"); vo.setDesc("descn13"); lists.add(vo); vo = new GridVO(); vo.setId(14); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name14"); vo.setDesc("descn14"); lists.add(vo); vo = new GridVO(); vo.setId(15); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name15"); vo.setDesc("descn15"); lists.add(vo); vo = new GridVO(); vo.setId(16); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name16"); vo.setDesc("descn16"); lists.add(vo); vo = new GridVO(); vo.setId(17); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name17"); vo.setDesc("descn17"); lists.add(vo); vo = new GridVO(); vo.setId(18); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name18"); vo.setDesc("descn18"); lists.add(vo); vo = new GridVO(); vo.setId(19); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name19"); vo.setDesc("descn19"); lists.add(vo); vo = new GridVO(); vo.setId(20); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name20"); vo.setDesc("descn20"); lists.add(vo); vo = new GridVO(); vo.setId(21); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name21"); vo.setDesc("descn21"); lists.add(vo); vo = new GridVO(); vo.setId(22); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name22"); vo.setDesc("descn22"); lists.add(vo); vo = new GridVO(); vo.setId(23); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name23"); vo.setDesc("descn23"); lists.add(vo); vo = new GridVO(); vo.setId(24); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name24"); vo.setDesc("descn24"); lists.add(vo); vo = new GridVO(); vo.setId(25); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name25"); vo.setDesc("descn25"); lists.add(vo); vo = new GridVO(); vo.setId(26); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name26"); vo.setDesc("descn26"); lists.add(vo); vo = new GridVO(); vo.setId(27); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name27"); vo.setDesc("descn27"); lists.add(vo); vo = new GridVO(); vo.setId(28); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name28"); vo.setDesc("descn28"); lists.add(vo); vo = new GridVO(); vo.setId(29); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name29"); vo.setDesc("descn29"); lists.add(vo); vo = new GridVO(); vo.setId(30); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name30"); vo.setDesc("descn30"); lists.add(vo); vo = new GridVO(); vo.setId(31); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name31"); vo.setDesc("descn31"); lists.add(vo); vo = new GridVO(); vo.setId(32); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name32"); vo.setDesc("descn32"); lists.add(vo); vo = new GridVO(); vo.setId(33); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name33"); vo.setDesc("descn33"); lists.add(vo); vo = new GridVO(); vo.setId(34); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name34"); vo.setDesc("descn34"); lists.add(vo); vo = new GridVO(); vo.setId(35); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name35"); vo.setDesc("descn35"); lists.add(vo); vo = new GridVO(); vo.setId(36); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name36"); vo.setDesc("descn36"); lists.add(vo); vo = new GridVO(); vo.setId(37); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name37"); vo.setDesc("descn37"); lists.add(vo); vo = new GridVO(); vo.setId(38); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name38"); vo.setDesc("descn38"); lists.add(vo); vo = new GridVO(); vo.setId(39); vo.setTime(dateFormat()); vo.setSex("male"); vo.setName("name39"); vo.setDesc("descn39"); lists.add(vo); vo = new GridVO(); vo.setId(40); vo.setTime(dateFormat()); vo.setSex("female"); vo.setName("name40"); vo.setDesc("descn40"); lists.add(vo); // 排序 lists = sortObj(lists, sort, dir); SearchVO searchVO = new SearchVO(); searchVO.setTotalCount(lists.size()); lists = findCurrentPageObj(lists, start, limit); searchVO.setGrids(lists); JSONObject obj = JSONObject.fromObject(searchVO); System.out.println(obj.toString()); response.setContentType("text/xml;charset=utf-8"); response.getWriter().print(obj.toString()); return null; } private List<GridVO> sortObj(List<GridVO> list, String sort, String dir) { Set<ResultTokenDelegate> someSet = new TreeSet<ResultTokenDelegate>(); List<GridVO> result = new ArrayList<GridVO>(); for (GridVO res : list) { ResultTokenDelegate delegate = new ResultTokenDelegate(res, sort, dir); someSet.add(delegate); } Iterator iterator = someSet.iterator(); while (iterator.hasNext()) { ResultTokenDelegate delegate = (ResultTokenDelegate) iterator .next(); result.add(delegate.getResult()); } return result; } List<GridVO> findCurrentPageObj(List<GridVO> list, int start, int limit) { List<GridVO> vos = new ArrayList<GridVO>(); for (int i = 0; i < list.size(); i++) { if (i >= start && i < (start + limit)) { vos.add(list.get(i)); } } return vos; } String dateFormat() { SimpleDateFormat smf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); Date date = new Date(System.currentTimeMillis()); return smf.format(date); }

ResultTokenDelegate类的代码，用来为list对象排序的：

package com.xuyi.util.sort; import com.xuyi.vo.GridVO; public class ResultTokenDelegate implements Comparable { private GridVO result; private String sort; private String dir; public ResultTokenDelegate() { } public ResultTokenDelegate(GridVO result, String sort, String dir) { this.result = result; this.sort=sort; this.dir=dir; } public GridVO getResult() { return result; } public void setResult(GridVO result) { this.result = result; } public String getDir() { return dir; } public void setDir(String dir) { this.dir = dir; } public String getSort() { return sort; } public void setSort(String sort) { this.sort = sort; } public int compareTo(Object o) { ResultTokenDelegate ntd = (ResultTokenDelegate) o; if ("id".equals("id")) { if ("ASC".equals(dir)) { if (this.getResult().getId() < ntd.getResult().getId()) { return -1; } else if (this.getResult().getId() == ntd.getResult().getId()) { return 1; } else { return 1; } }else{ if (this.getResult().getId() < ntd.getResult().getId()) { return 1; } else if (this.getResult().getId() == ntd.getResult().getId()) { return 1; } else { return -1; } } }else{ return 1; } } }

GridVO类的代码:

package com.xuyi.vo; public class GridVO { int id; String sex; String name; String desc; String time; public String getTime() { return time; } public void setTime(String time) { this.time = time; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } }

SearchVO的代码:

package com.xuyi.vo; import java.util.ArrayList; import java.util.List; public class SearchVO { int totalCount; List<GridVO> grids = new ArrayList<GridVO>(); public List<GridVO> getGrids() { return grids; } public void setGrids(List<GridVO> grids) { this.grids = grids; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } }