基本思路
- 引入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;};以上实现前台性能实现！