EasyUi datagrid 实现表格分页
2015-02-10 10:07
453 查看
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
= obj
=== undefined ? v
: $.isArray( obj
) ? obj
.concat( v )
: [ obj
, 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);
您可能感兴趣的文章:
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- jQuery EasyUI API 中文文档 - ComboBox组合框
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
- Jquery插件 easyUI属性汇总
- jquery EasyUI的formatter格式化函数代码
- jQuery EasyUI API 中文文档 - Pagination分页
- jQuery EasyUI datagrid实现本地分页的方法
- jQuery EasyUI Pagination实现分页的常用方法
- EasyUI学习之DataGird分页显示数据
相关文章推荐
- EasyUI DataGrid表格分页效果实现—笔记
- EasyUi datagrid 实现表格分页
- 实例:SSh结合Easyui实现Datagrid的分页显示
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
- easyui datagrid 前台分页的实现
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
- [原创]关于easyui下datagrid表格控件分页控制(非url方式)
- schemaeasyui实例:SSh结合Easyui实现Datagrid的分页显示
- SSh结合Easyui实现Datagrid的分页显示
- 转easyui datagrid 前台分页的实现
- SSh结合Easyui实现Datagrid的分页显示
- jQuery EasyUI datagrid实现本地分页的方法
- SSh结合Easyui实现Datagrid的分页显示
- easyUI datagrid 表格 表头添加菜单,实现可选列。
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
- Easyui的datagrid结合hibernate实现数据分页
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
- 如何用easyui+JAVA 实现动态拼凑datagrid表格
- SSh结合Easyui实现Datagrid的分页显示
- 实例:SSh结合Easyui实现Datagrid的分页显示