首先的是前端的页面如下：
<!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();
}
}
最终的效果如图
857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
