基本思路引入EasyUI资源
Datagrid组件实现初始化列表分页数据加载
用form将搜索条件收集后转成json对象,向后台发送请求重新加载数据
后台Controller层:定义搜索条件pojo类对请求数据进行封装接收
后台Service层:调用mapper查询数据和总数,封装成结果对象返回
后台Mapper层:根据查询条件对象进行数据查询、查询数据总数
具体实现
前台实现:
1 引入EasyUI资源
HTML代码:
2 初始化加载数据以及带搜索条件查询
利用Datagrid组件实现初始化列表分页数据加载:/************初始化加载表格数据******************/
$(function () {
$('#dg').datagrid({
url: 'hostController/findHostPage',
pagination: true,// 设置分页栏展示
// rownumbers:true,// 设置行号显示
pageSize: 2,// 设置size的初始大小
pageList: [2, 4, 6, 8],// 设置每一页显示条数列表
toolbar: "#tb",// 关联列表页上的操作按钮
columns: [[
{field: 'hid', title: 'hid', checkbox: true, filed: 'hid'},
{field: 'strong', title: '权重', width: 70, align: 'center'},
{field: 'hname', title: '姓名', width: 70, align: 'center'},
{field: 'hphone', title: '手机号', width: 110, align: 'center'},
{field: 'starttime', title: '开通时间', width: 100, align: 'center'},
{
field: 'hpprice', title: '价格', width: 70, align: 'center',
formatter: function (value, row, index) {
return row.hostPower ? row.hostPower.hpprice : "";
}
},
{field: 'num', title: '订单量', width: 70, align: 'center'},
{field: 'hpdiscount', title: '折扣', width: 70, align: 'center',formatter: function (value, row, index) {
return row.hostPower ? row.hostPower.hpdiscount : "";
}
},
{field: 'hpstart', title: '星推荐', width: 70, align: 'center',formatter: function (value, row, index) {
return row.hostPower ? row.hostPower.hpstart : "";
}
},
{field: 'status', title: '账号状态', width: 70, align: 'center'}
]]
});
})
用form表单封装搜索条件进行查询申请,需要将form数据转成json对象/******************搜索数据************************/
$(function () {
$("#searchBtn").click(function () {
const serializeArr = $('#fm1').serializeObject();
$('#dg').datagrid('load', serializeArr);
});
})
/**
* 自动将form表单封装成json对象
*/
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
以上完成前台功能实现!