1.項目整體效果如下：
2.數據庫設計：
表一：
表二：
3.搭建項目
查詢所有賬單接口
查詢所有賬單的實現類
前段控制器
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.dubbo.config.annotation.Reference;
import com.sxt.service.IBillsService;
import com.sxt.utils.DataGridView;
import com.sxt.vo.BillsVo;
/**
-
-
前端控制器
-
@author DPF
-
@since 2019-09-04
*/
@Controller
@RequestMapping("/bills")
public class BillsController {@Reference
private IBillsService billService;/**
- 跳轉到頁面
*/
@RequestMapping(“toIndex”)
public String toIndex() {
return “index”;
}
/**
- 加載所有的數據
*/
@RequestMapping(“loadAllBills”)
@ResponseBody
public DataGridView loadAllBills(BillsVo billsVo) {
return this.billService.queryAllBills(billsVo);
}
/**
- 添加賬單
*/
@RequestMapping(“addBill”)
@ResponseBody
public Map<String, Object> addBill(BillsVo billsVo) {
Map<String, Object> map =new HashMap<>();
Integer code =0;
String msg=“添加成功”;
try {
this.billService.save(billsVo);
} catch (Exception e) {
e.printStackTrace();
code=-1;
msg=“添加失敗”;
}
map.put(“code”, code);
map.put(“msg”, msg);
return map;
}
}
- 跳轉到頁面
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.dubbo.config.annotation.Reference;
import com.sxt.domain.Billtype;
import com.sxt.service.IBilltypeService;
/**
-
-
前端控制器
-
@author DPF
-
@since 2019-09-04
*/
@Controller
@RequestMapping("/billtype")
public class BilltypeController {@Reference
private IBilltypeService billtypeService;
/**- 查詢所有的賬單類型
*/
@RequestMapping(“loadAllBillType”)
@ResponseBody
public List loadAllBillType(){
return this.billtypeService.list();
}
}
- 查詢所有的賬單類型
主頁面
記賬管理
查詢
重置
添加
<!-- 數據表格開始 -->
<table class="layui-hide" id="billTable" lay-filter="billTable"></table>
<!-- 添加和修改的彈出層開始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
<form class="layui-form" lay-filter="dataFrm" id="dataFrm">
<div class="layui-form-item">
<label class="layui-form-label">收支類型:</label>
<div class="layui-input-block" id="radio_typeid">
</div>
<div class="layui-form-item">
<label class="layui-form-label">標題:</label>
<div class="layui-input-block">
<input class="layui-input" name="title" lay-verify="required" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">時間</label>
<div class="layui-input-inline">
<input type="text" name="billtime" id="billtime"
readonly="readonly" placeholder="yyyy-MM-dd HH:mm:ss"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">金額</label>
<div class="layui-input-inline">
<input type="text" name="price" lay-verify="number"
autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">說明:</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="remark" lay-verify="content"></textarea>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
<button type="reset" id="dataFrmResetBtn" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
</div>
</div>
</form>
</div>
<!-- 添加和修改的彈出層結束 -->
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'jquery', 'layer', 'form', 'table','laydate' ], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var laydate=layui.laydate;
//渲染時間
laydate.render({
elem:'#startTime',
type:'datetime'
});
laydate.render({
elem:'#endTime',
type:'datetime'
});
laydate.render({
elem:'#billtime',
type:'datetime'
});
//初始化查詢條件和添加的類型
$.get("/billtype/loadAllBillType",function(obj){
var typeidDom=$("#typeid");
var radio_typeid=$("#radio_typeid");
var html="<option value=''>請選擇類型</option>"
var radioHtml="";
$.each(obj,function(index,item){
html+="<option value="+item.id+">"+item.name+"</option>";
radioHtml+='<input type="radio" name="typeid" value='+item.id+' title='+item.name+'>';
});
typeidDom.html(html);
radio_typeid.html(radioHtml);
form.render("select");
form.render("radio");
})
//渲染數據表格
var tableIns=table.render({
elem: '#billTable' //渲染的目標對象
,url:'/bills/loadAllBills' //數據接口
,title: '賬單數據'//數據導出來的標題
,height:'full-200'
,cellMinWidth:100 //設置列的最小默認寬度
,page: true //是否啓用分頁
,cols: [ [ //列表數據
{field:'id', title:'ID',align:'center'}
,{field:'title', title:'標題',align:'center'}
,{field:'typename', title:'類型',align:'center'}
,{field:'billtime', title:'記錄時間',align:'center'}
,{field:'price', title:'金額',align:'center'}
,{field:'remark', title:'備註',align:'center'}
] ]
});
//模糊查詢
$("#doSearch").click(function(){
var params=$("#searchFrm").serialize();
tableIns.reload({
url:"/bills/loadAllBills?"+params,
page:{curr:1}
})
});
$("#addBill").click(function(){
openAddBill();
});
var url;
var mainIndex;
//打開添加頁面
function openAddBill(){
mainIndex=layer.open({
type:1,
title:'添加賬單',
content:$("#saveOrUpdateDiv"),
area:['800px','550px'],
success:function(index){
//清空表單數據
$("#dataFrm")[0].reset();
form.val("dataFrm",{typeid:1});
url="/bills/addBill";
}
});
}
//保存
form.on("submit(doSubmit)",function(obj){
//序列化表單數據
var params=$("#dataFrm").serialize();
$.post(url,params,function(obj){
layer.msg(obj.msg);
//關閉彈出層
layer.close(mainIndex)
//刷新數據 表格
tableIns.reload();
})
});
});
</script>
