乐趣区

关于前端:EasyUI实现带搜索框的列表页面一前台实现

jiezi

基本思路

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

以上实现前台性能实现！

退出移动版