html 列表页 头部搜索框,EasyUI实现带搜索框的列表页面（一）——前台实现

基本思路引入EasyUI资源

Datagrid组件实现初始化列表分页数据加载

用form将搜索条件收集后转成json对象，向后台发送请求重新加载数据

后台Controller层：定义搜索条件pojo类对请求数据进行封装接收

后台Service层：调用mapper查询数据和总数，封装成结果对象返回

后台Mapper层：根据查询条件对象进行数据查询、查询数据总数

具体实现

前台实现：

1 引入EasyUI资源

HTML代码：

账号状态

正常

禁用

权重排序

升序

降序

星推荐

是

否

折扣

六折

七折

八折

九折

style="margin-left: 30px">查询

导出

id="addZcrBtn">添加主持人

id="changeStatusBtn">账号状态

οnclick="zcrRoleB()">权限批量操作

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;

};

以上完成前台功能实现！