基本思路
- 引入EasyUI资源
- Datagrid组件实现初始化列表分页数据加载
- 用form将搜索条件收集后转成json对象,向后台发送请求重新加载数据
- 后台Controller层:定义搜索条件pojo类对请求数据进行封装接收
- 后台Service层:调用mapper查询数据和总数,封装成结果对象返回
- 后台Mapper层:根据查询条件对象进行数据查询、查询数据总数
具体实现
前台实现:
1 引入EasyUI资源
<link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/themes/icon.css">
<link rel="stylesheet" type="text/css" href="static/css/demo.css">
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.easyui.min.js"></script>
HTML代码:
<%--顶部搜索框--%>
<div style="width: 95%;height: 40px;border: 0px solid red;margin: 0px auto;margin-top: 30px">
<form id="fm1">
<input class="easyui-textbox" name="hname" data-options="prompt:'姓名'" style="width:100px">
<select id="cc" class="easyui-combobox" name="status" style="width:110px;">
<option value="">账号状态</option>
<option value="正常">正常</option>
<option value="禁用">禁用</option>
</select>
<select id="cc2" class="easyui-combobox" name="strong" style="width:110px;">
<option value="">权重排序</option>
<option value="asc">升序</option>
<option value="desc">降序</option>
</select>
<select id="cc3" class="easyui-combobox" name="hpstart" style="width:110px;">
<option value="">星推荐</option>
<option value="是">是</option>
<option value="否">否</option>
</select>
<select id="cc4" class="easyui-combobox" name="hpdiscount" style="width:110px;">
<option value="0">折扣</option>
<option value="6">六折</option>
<option value="7">七折</option>
<option value="8">八折</option>
<option value="9">九折</option>
</select>
<a id="searchBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
style="margin-left: 30px">查询</a>
<a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">导出</a>
</form>
</div>
<%--底部信息展示位置--%>
<div style="width: 95%;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">
<table id="dg" style="width: 750px;height: 400px"></table>
<%--工具栏设置--%>
<div id="tb">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
id="addZcrBtn">添加主持人</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
id="changeStatusBtn">账号状态</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
onclick="zcrRoleB()">权限批量操作</a>
</div>
</div>
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;
};
以上完成前台功能实现!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。