1. First introduce easyi's css and js files
2. The js that need to be written in the front desk
The code copy is as follows:
//Source data
function Async(action,args,callback){
$.ajax({
url: action ,
type:"POST",
dataType:"json",
timeout: 10000,
data: args,
success: function(data){
if(callback){
callback(data);
}
}
});
}
//Bind data and set paging
function BingData(pid,args,action,callback){
Async(action,args,function(data){
if(data!=null&&data.list!=null){
var _dataCount=data.size;//Total number of entries
var _data=data.list;//Data
if(callback){
callback(_data);
}
$(pid).datagrid('loadData', _data);
$(pid).datagrid('getPager').pagination({
beforePageText: 'Things',
afterPageText: 'Pages in total {pages} pages',
displayMsg: 'Currently displayed {from} - {to} records in total {total} records',
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);
}
});
}
});
}
//Serialize the form into an object
$.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);
};
//width
function fixWidth(percent){
return document.body.clientWidth * percent;
}
//End Edit
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 path
var args={};
args.pageIndex=1;//page index
args.pageSize=10;//page capacity
if(obj!=null){ //The object of form serialization
args.obj=obj;
}
BingData("#tab",args,url,null);
}
function getTab(){
GetData();
var tb=$('#tab');
tb.datagrid({
title: 'Fund return batch query results',
striped : true,
fitColumns: true, //Adaptive column size
rownumbers: true,
nowrap : true, //Set to true, it will automatically intercept when the data length exceeds the column width.
striped : true,
width:fixWidth(0.99),
height:'430',
singleSelect:true,
loadMsg: 'Data loading...',
columns:[[
{field:'interfaceInfoCode', title:'Fund Channel Encoding',width:fixWidth(0.3),align: "center"},
{field:'retreatBatchCode', title:'Fund return batch number',width:fixWidth(0.2),editor:'text',align: "center"},
{field:'total',title:'total number of strokes',width:fixWidth(0.1),align:'right',editor:'text',align: "center"},
{field:'totalMoney',title:'total amount',width:fixWidth(0.1),align:'right',editor:'text',align: "center"},
{field:'def2',title:'operation',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+')">Details</a> | ';
var d = '<a href="#" onclick="auditBatch('+index+',0)">AuditBatch</a> | ';
var f = '<a href="#" onclick="auditBatch('+index+',1)">Audit rejection</a> ';
return e+d+f;
}}
]],
onLoadSuccess:function(data){
if (data.total == 0) {
}
},
pagination: true,
pageIndex:1,//Page Index
pageSize:10,//page capacity
pageList: [10,15,20]
})
}
2 Backstage
The code copy is as follows:
int currentPage = request.getParameter("pageIndex") == null ? 1 : Integer.parseInt(request.getParameter("pageIndex"));
// Number of rows per page
int showCount = request.getParameter("pageSize") == null ? 10 : Integer.parseInt(request.getParameter("pageSize"));
// Pagination entity
String obj = request.getParameter("obj");
if (StringUtils.notBlank(obj)) {
fundRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class); //Form serialization json object is converted to entity
}
out = response.getWriter();
List<FundRetreatVoucher> frvs = fundRetreatVoucherService.findAllFundRetreatVoucher(page, fundRetreatVoucher);
int total = fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), fundRetreatVoucher).size();//Data size
JSONObject json = new JSONObject();
json.put("list", frvs);//Data, the put key here must be list. If it is changed, you need to change the data in BingData.
json.put("size", total);
out.print(json);