[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的分页实现结束。
[Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)的更多相关文章
- Ext.grid.Panel表格分页
转载:http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html cshtml @{ Layout = null; } <!D ...
- 【extjs】 ext5 Ext.grid.Panel 分页,搜索
带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...
- Ext.grid.Panel表格分页存储过程
/*首先需要引入两个Extjs插件类 Ext.ux.data.PagingMemoryProxy和Ext.ux.ProgressBarPager这两个类*/ /*下面是控制弹出窗体放大缩小时窗体居中的 ...
- 【extjs】 extjs5 Ext.grid.Panel 搜索示例
先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...
- ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- Ext.grid.Panel 数据动态改变后刷新grid
gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...
- 导出Ext.grid.Panel到excel
1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...
- Extjs——简单的Grid panel小实例
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
随机推荐
- 深入浅出分析MySQL常用存储引擎
MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...
- angular学习笔记(二十二)-$http.post
基本语法: $http.post('url',{},{}).success(function(data,status,headers,config){ }).error(function(data,s ...
- 使用自定义的按钮替换默认的<input type='file'>
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...
- mysql5.7启动slave报错 ERROR 1872 (HY000): Slave failed to initialize relay log info structure from the repository
原因:检查my.cnf,原来没指定relay_log,mysql默认产生的relay_log名被该server上的另一个mysql slave占用了. 解决方法:1.在my.cnf中添加 relay_ ...
- 八、Java的可变参数例子
1.在Java中什么是可变参数 可变参数是在Java1.5中引入的特性.它准许一个方法 public static void main(String[] args) { print("a&q ...
- AngularJS 初始化加载流程
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...
- webstrom中的快捷键
1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件. 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明处 4. ctrl + al ...
- 【GitHub】 README.ME 格式
README =========================== 该文件用来测试和展示书写README的各种markdown语法.GitHub的markdown语法在标准的markdown语法 ...
- 【WPF】C#代码动态改变控件的样式
需求:C#代码生成的一组按钮Button需要设置样式. 如果是在XAML中引入样式: <!-- 引入资源 --> <UserControl.Resources> <Res ...
- 【WPF】XAML实现按钮背景图片的点击切换
原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样.想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色.背景图切换. 需 ...