首先的是前端的页面如下:
<!DOCTYPE html> <head> <title>账单列表</title> <link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"> <link rel="stylesheet" href="/static/bootstrap.min.css/"> <link rel="stylesheet" href="/static/bootstrap-table.css/"> <script src="/static/js/jquery-2.1.1.min.js"></script> <script src="/static/js/jquery.datetimepicker.js"></script> <script src="/static/js/bootstrap.min.js"></script> <script src="/static/js/bootstrap-table.js"></script> <script src="/static/js/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript"> var id = 0; $(function () { //初始化数据 $("#datetimepicker1").datetimepicker({format: 'Y-m-d', timepicker: false}); $("#datetimepicker2").datetimepicker({format: 'Y-m-d', timepicker: false}); }); $(document).ready(function () {//初始化数据 tableInit(); }); function add() { location.href = "/bill/add"; } function deleteOne(id) { $.ajax({ url: "http://localhost:9090/bill/delete", type: "post", data: { id: id }, dataType: "json", //contentType: "application/json; charset=utf-8" success: function (data) { if (data.result == "success") { alert("操作成功"); location.reload(); } else alert("操作失败"); } }) } function searchMonth() { //月查询 location.href="/bill/search1"; } function editOne(id) { location.href = "http://localhost:9090/bill/update?id=" + id; } function addUser() { location.href = "http://localhost:9090/bill/add"; } function tableInit() { $('#mytab').bootstrapTable({ method: 'get', url: "/bill/list",//请求路径 striped: true, //是否显示行间隔色 //contentType: 'application/x-www-form-urlencoded', //当为post请求的时候 请求格式要为这个 pageNumber: 1, //初始化加载第一页 pagination: true,//是否分页 sidePagination: 'server',//server:服务器端分页|client:前端分页 pageSize: 5,//单页记录数 pageList: [5, 10, 20, 30],//可选择单页记录数 //showRefresh: true,//刷新按钮 uniqueId: "id", queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber queryParams: function (params) {//上传服务器的参数 var temp = { //rows: params.limit, // 每页大小 //page: (params.offset / params.limit) + 1, //当前页码 pageNumber: params.pageNumber, pageSize: params.pageSize, sort: "id", // 排序列名 sortOrder: "desc", //排位命令(desc,asc) id: $('#search_id').val(), billName: $('#bill_name').val(), customerName: $('#customer_name').val(), beginTime: $('#datetimepicker1').val(), endTime: $('#datetimepicker2').val(), }; return temp; }, columns: [ { title: 'id', field: 'id', sortable: true }, { title: '账单名', field: 'bill_name', sortable: true }, { title: '客户名', field: 'customerName', sortable: true }, { title: '操作类型', field: 'operate_type', formatter : formatOperate //对返回的数据进行处理再显示 }, { title: '单价', field: 'single_price' //formatter : formatSex,//对返回的数据进行处理再显示 }, { title: '数量', field: 'account' }, { title: '金额', field: 'amount' }, { title: '时间', field: 'addtime' }, { title: '备注', field: 'remark' }, { title: '操作', field: 'id', formatter: operation,//对资源进行操作 },], onLoadSuccess: function () { }, /* onLoadError: function () { //showTips("数据加载失败!"); },*/ onDblClickRow: function (row, $element) { /*var id = row.ID; EditViewById(id, 'view');*/ }, }) } //value代表该列的值,row代表当前对象 /* function formatSex(value, row, index) { return value == 1 ? "男" : "女"; //或者 return row.sex == 1 ? "男" : "女"; }*/ function formatOperate(value, row, index) { return value == 1 ? "采购" : "销售"; } //删除、编辑操作 function operation(value, row, index) { var htm = "<button type='button' οnclick='editOne(" + value + ")' >编辑</button><button type='button' οnclick='deleteOne(" + value + ")'>删除</button>" return htm; } //查询按钮事件 function search() { $('#mytab').bootstrapTable('refresh', { url: '/bill/list' }); } </script> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> <button class="btn btn-default" οnclick="add()" id="search_btn">新增</button> <button class="btn btn-default" οnclick="searchMonth()" id="search_btn">查询</button> </div> <div class="panel-body form-group" style="margin-bottom:0px;"> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">id:</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="search_id"/> </div> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">账单名:</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="bill_name"/> </div> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">客户名:</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="customer_name"/> </div> <div class="form-group"> <label class="col-sm-1 control-label" >开始时间:</label> <div class='col-sm-2'> <input type='text' id="datetimepicker1" class="form-control"/> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label" >结束时间:</label> <div class="col-sm-2"> <input type="text" id="datetimepicker2" class="form-control"/> </div> </div> <div class="col-sm-1 col-sm-offset-1"> <button class="btn btn-primary" οnclick="search()" id="search_btn">查询</button> </div> </div> </div> <table id="mytab" class="table table-bordered"> </table> </body> </html>
然后通过java实现的的后台代码分别如下:
controller层代码为:
@RequestMapping("/list") @ResponseBody public String getList(BootstrapData data, String id, String billName, String customerName, String beginTime, String endTime) { User user = getUser(); if(user ==null) return "/a404"; Bill bill = new Bill(); if (id != null && !id.equals("")) bill.setId(Integer.parseInt(id)); bill.setBill_name(billName); bill.setBeginTime(beginTime); bill.setEndTime(endTime); bill.setCustomerName(customerName); PageInfo<Bill> pageInfo = service.getList(bill, data.getPageNumber(), data.getPageSize()); long count = pageInfo.getTotal(); Map<String, Object> map = new HashMap<>(); map.put("total", count); map.put("rows", pageInfo.getList()); String str = JSON.toJSONString(map); return str; }
service层的代码如下:
/** * 分页数据 * @param record * @param pageNum * @param pageSize * @return */ public PageInfo<Bill> getList(Bill record, int pageNum, int pageSize){ PageHelper.startPage(pageNum,pageSize); List<Bill> allUsers = mapper.getList(record); PageInfo<Bill> pageInfo=new PageInfo<>(allUsers); return pageInfo; }
mapper层代码如下
public List<Bill> getList(Bill record);
<!--得到所有的信息--> <select id="getList" parameterType="com.ext.texs.entity.Bill" resultMap="BaseResultMap"> SELECT b.*,c.name customerName from bill b LEFT JOIN customer c ON b.customer_id =c.id WHERE 1>0 <if test="id !=null and id != ''">and b.id = #{id}</if> <if test="customerName !=null and customerName !=''">and c.name =#{customerName}</if> <if test="bill_name !=null and bill_name != ''">and b.bill_name = #{bill_name}</if> <if test="beginTime !=null and beginTime !=''">and b.addtime >= #{beginTime}</if> <if test="endTime !=null and endTime !=''">and b.addtime <= #{endTime}</if> ORDER by b.id DESC </select>
实体类
package com.ext.texs.entity; import java.io.Serializable; public class BootstrapData implements Serializable { private int pageNumber; private int pageSize; public int getPageNumber() { return pageNumber; } public void setPageNumber(int pageNumber) { this.pageNumber = pageNumber; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } }
package com.ext.texs.entity; import java.io.Serializable; public class Bill implements Serializable { private Integer id; private String bill_name; private String customer_id; private String customer_type; private String addtime; private String operate_type; private Float single_price; private Float account; private Float amount; private String remark; private String customerName; //客户名称 新加 private String beginTime; //开始时间 private String endTime; //结束时间 public String getBeginTime() { return beginTime; } public void setBeginTime(String beginTime) { this.beginTime = beginTime; } public String getEndTime() { return endTime; } public void setEndTime(String endTime) { this.endTime = endTime; } public String getCustomerName() { return customerName; } public void setCustomerName(String customerName) { this.customerName = customerName; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBill_name() { return bill_name; } public void setBill_name(String bill_name) { this.bill_name = bill_name == null ? null : bill_name.trim(); } public String getCustomer_id() { return customer_id; } public void setCustomer_id(String customer_id) { this.customer_id = customer_id == null ? null : customer_id.trim(); } public String getCustomer_type() { return customer_type; } public void setCustomer_type(String customer_type) { this.customer_type = customer_type == null ? null : customer_type.trim(); } public String getAddtime() { return addtime; } public void setAddtime(String addtime) { this.addtime = addtime == null ? null : addtime.trim(); } public String getOperate_type() { return operate_type; } public void setOperate_type(String operate_type) { this.operate_type = operate_type == null ? null : operate_type.trim(); } public Float getSingle_price() { return single_price; } public void setSingle_price(Float single_price) { this.single_price = single_price; } public Float getAccount() { return account; } public void setAccount(Float account) { this.account = account; } public Float getAmount() { return amount; } public void setAmount(Float amount) { this.amount = amount; } public String getRemark() { return remark; } public void setRemark(String remark) { this.remark = remark == null ? null : remark.trim(); } }
最终的效果如图