[Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)
先看图:
页面js代码:
var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'email', 'phone','regIp','regTime'], proxy: { type: 'ajax', url:'${pageContext.request.contextPath}/back/user/userList.do', reader: { // 設置 json樣式 type: 'json', rootProperty:"rows", totalProperty:"total" } }, autoLoad: true, pageSize:10 //每页记录数默认25 }); userStore.load({ params: { start: 0, limit: 10 } }); var ckm=Ext.create("Ext.selection.CheckboxModel"); Ext.onReady(function(){ Ext.create('Ext.grid.Panel', { title: '用户信息', id:'userGridPanel', selModel:ckm, store:userStore,// Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { text: '用户ID', dataIndex: 'uid',align: 'center',hidden:true,sortable:false }, { text: '用户名', dataIndex: 'uname',align: 'center', sortable:false }, { text: '邮箱', dataIndex: 'email',align: 'center',sortable:false }, { text: '电话', dataIndex: 'phone',align: 'center',sortable:false }, { text: '注册IP', dataIndex: 'regIp',align: 'center',sortable:false }, { text: '注册时间', dataIndex: 'regTime',align: 'center',scope:this,renderer:function(value){ var val=longToString(value,'Y-m-d H:m:s') //console.info('获取的值为:{}'+value+' , '+val); return val; } } ], forceFit:true,//强制列表宽度自适应 autoLoad:true, tbar: Ext.create('Ext.toolbar.Toolbar',{ //width : 500, items: [{ text: '删除', xtype: 'button', iconCls: 'delete', id: 'user_delete', handler: userInfoDel },{ text:'添加', xtype:'button', iconCls:'add', id:'user_add', handler:userInfoAdd },{ text:'修改', xtype:'button', iconCls:'update', id:'user_update', handler:userInfoUpdate }] }), renderTo: Ext.getBody(), //分页 bbar: Ext.create('Ext.toolbar.Paging',{ beforePageText:'当前第', afterPageText:'页', refreshText:'刷新', store:userStore, displayInfo:true, displayMsg:'显示:{0}-{1}条,总共:{2}条', emptyMsg:'当前查询无记录' }) }); }); //删除用户信息 function userInfoDel(){ var uid=''; var selectionModel = Ext.getCmp('userGridPanel').getSelectionModel(); var selection = selectionModel.getSelection(); if(selection.length==0){ Ext.Msg.alert("提示","请选择要删除的记录!"); return ; }else{ Ext.Msg.confirm("提示","确定删除?",function(button, text){ console.info(button+","+text); if(button=="yes"){ for(var i=0;i<selection.length;i++){ uid = uid+selection[i].get('uid')+","; } Ext.Ajax.request({ url: '${pageContext.request.contextPath}/back/user/delete.do', params:{uid:uid}, /** *Object {request: Object, requestId: 3, status: 200, statusText: "OK", * responseText: "{"restMsg":"用户删除成功!","success":true}"…} * @param response * @param opts */ success: function(response, opts) { Ext.Msg.alert("信息提示",response.responseText.restMsg); Ext.getCmp('userGridPanel').getStore().reload(); }, failure: function(response, opts) { Ext.Msg.alert("信息提示",response.responseText.restMsg); } }); } }); } } //修改用户信息 function userInfoUpdate(){ var selectionModel = Ext.getCmp('userGridPanel').getSelectionModel(); var selection = selectionModel.getSelection(); if(selection.length==0){ Ext.Msg.alert("提示","请选择要修改的记录!"); return ; } if(selection.length>1){ Ext.Msg.alert("提示","只能修改一条记录!"); return ; } //获取选择的记录 var record =selectionModel.getLastSelected(); console.info(record.get("email")+","+record.get("phone")); }
看分页后台实现:
1.在mybatis配置文件中添加配置:
<plugins> <plugin interceptor="com.github.pagehelper.PageHelper"> <!-- 4.0.0以后版本可以不设置该参数 --> <!--<property name="dialect" value="mysql"/>--> <!-- 该参数默认为false --> <!-- 设置为true时,会将RowBounds第一个参数offset当成pageNum页码使用 --> <!-- 和startPage中的pageNum效果一样--> <property name="offsetAsPageNum" value="true"/> <!-- 该参数默认为false --> <!-- 设置为true时,使用RowBounds分页会进行count查询 --> <property name="rowBoundsWithCount" value="true"/> <!-- 设置为true时,如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 --> <!-- (相当于没有执行分页查询,但是返回结果仍然是Page类型)--> <property name="pageSizeZero" value="true"/> <!-- 3.3.0版本可用 - 分页参数合理化,默认false禁用 --> <!-- 启用合理化时,如果pageNum<1会查询第一页,如果pageNum>pages会查询最后一页 --> <!-- 禁用合理化时,如果pageNum<1或pageNum>pages会返回空数据 --> <property name="reasonable" value="true"/> <!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 --> <!-- 增加了一个`params`参数来配置参数映射,用于从Map或ServletRequest中取值 --> <!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默认值 --> <!-- 不理解该含义的前提下,不要随便复制该配置 --> <property name="params" value="pageNum=start;pageSize=limit;"/> <!-- 支持通过Mapper接口参数来传递分页参数 --> <property name="supportMethodsArguments" value="true"/> <!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page --> <property name="returnPageInfo" value="check"/> </plugin> </plugins>
或者在spring的配置文件中添加配置:
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> <property name="mapperLocations"> <array> <value>classpath:config/mapper/*.xml</value> </array> </property> <property name="typeAliasesPackage" value="com.test.pojo"/> <property name="plugins"> <array> <bean class="com.github.pagehelper.PageHelper"> <property name="properties"> <value> dialect=mysql </value> </property> </bean> </array> </property> </bean>
2. dao 文件:
public interface UserDao extends BaseDao { List<User> queryForUsers(Map<String, Object> map); @Override int delete(int id) throws Exception; }
service层对应文件:
/** * @author zhangtb * @date 2015年12月20日13:26:50 */ @Service public class UserService { @Autowired private UserDao userDao; public List<User> queryForUsers(Map<String, Object> map){ return userDao.queryForUsers(map); } }
3.controller中分页实现:
/** * 用户列表信息 */ @RequestMapping("/userList") @ResponseBody public void userList(HttpServletRequest request,Writer writer){ String name = request.getParameter("name"); Page page = PageUtil.getPage(request); Map<String, Object> map = new HashMap<String,Object>(); map.put("name",name); map.put("page",page.getPage()); map.put("limit",page.getLimit()); PageHelper.startPage((Integer) map.get("page"),(Integer)map.get("limit")); List<User> userList=userService.queryForUsers(map); PageInfo<User> pageInfo=new PageInfo<>(userList); List<User> users=pageInfo.getList(); long total = pageInfo.getTotal(); JSONObject row=new JSONObject(); JSONArray ary = new JSONArray(); for(User user :users){ ary.add(user); } row.put("rows",ary); row.put("total",total); try { writer.write(row.toJSONString()); } catch (IOException e) { e.printStackTrace(); } }
返回数据为:
{"total":12,"rows":[{"email":"233434@163.com","phone":"17890123421","regIp":"127.0.0.1","regTime":1454883085000,"uid":1,"uname":"admin"},{"email":"434234234234","phone":"3242432423","regIp":"127.0.0.1","regTime":1456997965000,"uid":2,"uname":"我看"},{"email":"233434@163.com","phone":"17890123421","regIp":"","regTime":1456394760000,"uid":4,"uname":"Test_001"},{"email":"233434@163.com","phone":"17890123421","regIp":"172.189.12.32","regTime":1456394760000,"uid":5,"uname":"TEST_002"},{"email":"233434@163.com","phone":"18910121322","regIp":"localhost","regTime":1454926128000,"uid":6,"uname":"TEST_003"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969111000,"uid":7,"uname":"Test_0023"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969389000,"uid":8,"uname":"Test_0024"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969390000,"uid":9,"uname":"Test_0025"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969390000,"uid":10,"uname":"Test_0026"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969390000,"uid":11,"uname":"Test_0027"}]}
至此,mybatis的分页实现结束。