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

基本思路

1. 引入EasyUI资源
2. Datagrid组件实现初始化列表分页数据加载
3. 用form将搜索条件收集后转成json对象，向后台发送请求从新加载数据
4. 后台Controller层：定义搜索条件pojo类对请求数据进行封装接收
5. 后台Service层：调用mapper查询数据和总数，封装成结果对象返回
6. 后台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;
};

以上完成前台功能实现！