EasyUi datagrid 實現(xiàn)表格分頁
更新時間:2015年02月10日 10:07:08 投稿:hebedich
這篇文章主要介紹了EasyUi datagrid 實現(xiàn)表格分頁的方法和示例分享,需要的朋友可以參考下
1.首先引入 easyui的 css 和 js 文件
2.前臺 需要寫的js
復制代碼 代碼如下:
//源數(shù)據(jù)
function Async(action,args,callback){
$.ajax({
url: action ,
type:"POST",
dataType:"json",
timeout: 10000,
data: args,
success: function(data){
if(callback){
callback(data);
}
}
});
}
//綁定數(shù)據(jù) 并設(shè)置分頁
function BingData(pid,args,action,callback){
Async(action,args,function(data){
if(data!=null&&data.list!=null){
var _dataCount=data.size;//總條數(shù)
var _data=data.list;//數(shù)據(jù)
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 ;
}
//結(jié)束編輯
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 : '資金退回批次查詢結(jié)果',
striped : true,
fitColumns: true, //自適應(yīng)列的大小
rownumbers: true,
nowrap : true,//設(shè)置為true,當數(shù)據(jù)長度超出列寬時將會自動截取
striped : true,
width:fixWidth(0.99),
height:'430',
singleSelect:true,
loadMsg : '數(shù)據(jù)裝載中......',
columns:[[
{field:'interfaceInfoCode',title:'資金通道編碼',width:fixWidth(0.3),align: "center"},
{field:'retreatBatchCode',title:'資金退回批次號',width:fixWidth(0.2),editor:'text' ,align: "center"},
{field:'total',title:'總筆數(shù)',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"));
// 每頁行數(shù)
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對象轉(zhuǎn)為實體
}
out = response.getWriter();
List<FundRetreatVoucher> frvs = fundRetreatVoucherService.findAllFundRetreatVoucher(page, fundRetreatVoucher);
int total = fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), fundRetreatVoucher).size();//數(shù)據(jù)大小
JSONObject json = new JSONObject();
json.put("list", frvs);//數(shù)據(jù),這里的put的key ,一定要為list,如果改了 需要把 BingData中的 數(shù)據(jù)改一下
json.put("size", total);
out.print(json);
相關(guān)文章
JavaScript?Canvas實現(xiàn)高清繪制效果
在我們?nèi)粘@L制canvas的時候都不可避免的遇到一個問題,那就是canvas繪制出來的東西可能會有模糊,所以本文為大家準備了解決canvas繪制模糊的方法,希望對大家有所幫助2023-06-06通過pjax實現(xiàn)無刷新翻頁(兼容新版jquery)
這篇文章主要介紹了通過pjax實現(xiàn)無刷新翻頁,兼容新版jquery,使用心得方法,需要的朋友可以參考下2014-01-01JS實現(xiàn)點擊生成UUID的方法完整實例【基于jQuery】
這篇文章主要介紹了JS實現(xiàn)點擊生成UUID的方法,結(jié)合完整實例形式分析了基于jQuery實現(xiàn)的隨機字符串生成相關(guān)操作技巧,需要的朋友可以參考下2019-06-06一個超簡單的jQuery回調(diào)函數(shù)例子(分享)
下面小編就為大家?guī)硪黄粋€超簡單的jQuery回調(diào)函數(shù)例子(分享) 。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08