EasyUi datagrid 实现表格分页

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);

(0)

相关推荐

  • Jquery插件 easyUI属性汇总

    此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)modal:是否生成模态窗口.true[是] false[否]                   2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel    

  • jQuery EasyUI API 中文文档 - ComboBox组合框

    扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

  • jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt').datagrid({ title:'Formatting Columns', width:550, height:250, url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'p

  • jQuery EasyUI Pagination实现分页的常用方法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一.使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Convert.ToInt32(Request["rows"]); int pageN

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &

  • Jquery EasyUI的添加,修改,删除,查询等基本操作介绍

    初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新增页面 3.修改页面 把jquery easyui下载好之后,一般引用下页几

  • EasyUI学习之DataGird分页显示数据

    本文实例为大家分享了EasyUI DataGird的使用方法,供大家参考,具体内容如下 1. html代码 <table id="grid" style="width: 940px" title="用户操作" data-options="iconCls:'icon-view'"> </table> 2.显示 3.js代码 // 页面加载后显示表数据 $(function() { var queryDat

  • jQuery EasyUI API 中文文档 - Pagination分页

    用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n

随机推荐