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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
详解Node中导入模块require和import的区别
Aug 11 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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关闭warning问题的解决方法
2016/05/17 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
获取body标签的两种方法
2011/10/13 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
django最快程序开发流程详解
2019/07/19 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python中threading开启关闭线程操作
2020/05/02 Python
python 下载文件的多种方法汇总
2020/11/17 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
高分子材料个人求职信范文
2013/09/25 职场文书
自我评价范文
2013/12/22 职场文书
经典婚礼主持词
2014/03/13 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
运动会通讯稿100字
2015/07/20 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书