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 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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 Smarty模板生成html文档的方法
2010/04/12 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
js实现小时钟效果
2020/03/25 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
怎样使用Python脚本日志功能
2016/08/14 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python实现元素等待代码实例
2019/11/11 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python如何实现FTP功能
2020/05/28 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
机电一体化专业推荐信
2013/12/03 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
2016年十一促销广告语
2016/01/28 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL