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;
};

以上完成前臺功能實現！