EasyUi datagrid 实现表格分页


Posted in Javascript onFebruary 10, 2015

1.首先引入 easyui的 css 和 js 文件

2.前台 需要写的js

//源数据

function Async(action,args,callback){

  $.ajax({
 url: action ,

 
type:"POST",

 
dataType:"json",

 
timeout: 10000,

 
data: args,

 
success: function(data){

 
  if(callback){

 
 callback(data);

  
}

}

});

}

//绑定数据 并设置分页

function BingData(pid,args,action,callback){

Async(action,args,function(data){

if(data!=null&&data.list!=null){

var _dataCount=data.size;//总条数

var _data=data.list;//数据

if(callback){

callback(_data);

}

$(pid).datagrid('loadData', _data);

$(pid).datagrid('getPager').pagination({

beforePageText: '第',

afterPageText: '页 共 {pages} 页',

displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',

pageSize: args.pageSize,

total: _dataCount,

pageNumber: args.pageIndex,

pageList:args.pageList,

onSelectPage: function (pageNumber, pageSize) {

args.pageIndex = pageNumber;

args.pageSize = pageSize;

BingData(pid, args, action,null);

},

onRefresh: function (pageNumber, pageSize) {

args.pageIndex = pageNumber;

args.pageSize = pageSize;

BingData(pid, args, action,null);

}

});

}

});

}

//表单序列化为对象

$.fn.serializeObject = function(){

var obj = {};

$.each( this.serializeArray(), function(i,o){

var n = o.name, v = o.value;

obj[n] = obj[n] === undefined ? v

: $.isArray( obj[n] ) ? obj[n].concat( v )

: [ obj[n], v ];

});

return JSON.stringify(obj);

};

//宽度

function fixWidth(percent){

return document.body.clientWidth * percent ;

}

//结束编辑

function endEdit(vid){

vid = "#"+vid;

var tb=$(vid);

var rows = tb.datagrid('getRows');

for ( var i = 0; i < rows.length; i++) {

tb.datagrid('endEdit', i);

 }

}

function GetData(obj){

var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';//action路径

var args={};

args.pageIndex=1;//页索引

args.pageSize=10;//页容量

if(obj!=null){  //表单序列化的对象

  args.obj=obj;    

}

BingData("#tab",args,url,null);

}

function getTab(){

GetData();

var tb=$('#tab');

tb.datagrid({

title : '资金退回批次查询结果',

striped : true,

fitColumns: true, //自适应列的大小

rownumbers: true,

nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取

striped : true,

width:fixWidth(0.99),

height:'430',

singleSelect:true,

loadMsg : '数据装载中......',

columns:[[ 

  
 {field:'interfaceInfoCode',title:'资金通道编码',width:fixWidth(0.3),align: "center"}, 

         {field:'retreatBatchCode',title:'资金退回批次号',width:fixWidth(0.2),editor:'text' ,align: "center"}, 

         {field:'total',title:'总笔数',width:fixWidth(0.1),align:'right',editor:'text' ,align: "center"},         

  {field:'totalMoney',title:'总金额',width:fixWidth(0.1),align:'right',editor:'text' ,align: "center"},

          {field:'def2',title:'操作',width:fixWidth(0.3),editor:'text',align:'right' ,align: "center",


formatter:function(value,row,index){


var vcode =row.retreatBatchCode;


var e = '<a href="#" onclick="toDetail('+index+')">详情</a> | ';


var d = '<a href="#" onclick="auditBatch('+index+',0)">审核通过</a> | ';


var f = '<a href="#" onclick="auditBatch('+index+',1)">审核拒绝</a> ';


return e+d+f;


}}

 ]],

onLoadSuccess:function(data){

if (data.total == 0) {

}

},

pagination: true,

pageIndex:1,//页索引

pageSize:10,//页容量

pageList: [10,15,20]

})

}

2 后台

int currentPage = request.getParameter("pageIndex") == null ? 1 : Integer.parseInt(request.getParameter("pageIndex"));

// 每页行数

int showCount = request.getParameter("pageSize") == null ? 10 : Integer.parseInt(request.getParameter("pageSize"));

// 分页实体

String obj = request.getParameter("obj");

if (StringUtils.notBlank(obj)) {

   fundRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class); //表单序列化json对象转为实体

}

out = response.getWriter();

List<FundRetreatVoucher> frvs = fundRetreatVoucherService.findAllFundRetreatVoucher(page, fundRetreatVoucher);

int total = fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), fundRetreatVoucher).size();//数据大小

JSONObject json = new JSONObject();

json.put("list", frvs);//数据,这里的put的key ,一定要为list,如果改了 需要把 BingData中的 数据改一下

json.put("size", total);

out.print(json);
Javascript 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 #Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 #Javascript
JS数组的常见用法实例
Feb 10 #Javascript
bootstrap table 服务器端分页例子分享
Feb 10 #Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 #Javascript
js+css实现导航效果实例
Feb 10 #Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 #Javascript
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Django 实现图片上传和下载功能
2020/12/31 Python
python爬虫如何解决图片验证码
2021/02/14 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
internal修饰符起什么作用
2013/12/16 面试题
农民入党思想汇报
2014/01/03 职场文书
双拥工作宣传标语
2014/06/26 职场文书
捐资助学感谢信
2015/01/21 职场文书
护士先进个人总结
2015/02/13 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技