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 继承的实现
Jul 09 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
jQuery-App输入框实现实时搜索
Nov 19 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音乐采集(部分代码)
2007/02/14 PHP
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JS跨域问题详解
2014/11/25 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
安装dbus-python的简要教程
2015/05/05 Python
python类的继承实例详解
2017/03/30 Python
详解Python_shutil模块
2019/03/15 Python
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
简历的自荐信
2013/12/19 职场文书
培训主管岗位职责
2014/02/01 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
大学计划书范文800字
2014/08/14 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python