使用layui做基础的VCD管理系统+JSON数据的封装
作者：互联网
在数据库中，确定数据库的字段为vcdID,vcdName,vcdTotal（vcd藏量）,vcdLendOut（借出的vcd数量），InputDate（置入日期）
使用mybatis的逆向工程文件生成vcd的实体和mapper
当然数据库查询的语句和方法也有其他的，这篇文章的主要侧重在layui的学习和应用。
主要的页面主要分为两个，一个是用作展示数据表格的首页，另外一个是用来添加vcd的添加页面。
其中待完成的页面是 编辑页面和搜索功能（用reload就能实现）。
我们先看前端的html页面，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>草莓vcd管理系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
<!-- //最好使用它本地的这种目录结构-->
<link rel="stylesheet" href="css/index.css">
<script src="layui/layui.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- 你的HTML代码 -->
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">草莓vcd管理系统</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="images/logo.png" class="layui-nav-img">
柳biubiu
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
</div>
</div>
<br>
<br>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"> 搜索条件： </label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入vcd名称" class="layui-input" id="demoReload">
</div>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-blg" onclick="search()" id="search">搜索</a>
</div>
</div>
</form>
<!--<div id = "test1" style="height:80px;width:80px;background-color: #00FF00 " onclick="f()">-->
<!--</div>-->
<!--<div id ="test2">-->
<!-- <img src="images/logo.png"/>-->
<!--</div>-->
<!--<div class="layui-btn-container">-->
<!-- <button class="layui-btn layui-btn-sm" id="getCheckData">获取选中行数据</button>-->
<!--</div>-->
<table class="layui-hide" id="biu" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<!-- //使用script默认是不显示的，到时候引入进去就可以-->
<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
<!-- //使用添加按钮添加 弹窗层-->
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="batchdel">批量删除</a>
<a class="layui-btn layui-btn-xs" onclick="tips()" id="zz">添加tips</a>
<a class="layui-btn layui-btn-xs" lay-event="refresh" id="refresh">刷新</a>
</script>
<script type="text/html" id="cellbarDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
其中渲染table的代码是
<table class="layui-hide" id="biu" lay-filter="test"></table>
这句话指定了table的id和事件过滤器（用于事件的精准匹配）,可以忽略前面的导航栏的代码，在body里头直接写table的代码和后面置入的script 的代码（这里我们放到js文件中）
然后在JS中渲染这个table，
index.js
layui.use(['layer', 'form','table','jquery'], function(){ //用之前一定要先定义
var layer = layui.layer
,form = layui.form,table = layui.table,$=layui.jquery;
layer.msg('Hello World');
var tableIns = table.render({ //获取table的实例，后面用来做表格的刷新
elem: '#biu '
,url:'vcd/listData' //数据接口
,toolbar:'#barDemo' //表格左上角的功能可以自定义
// ,defaultToolbar:['filter','print',''] //表格右上方的三个按钮（导出、打印、筛选）不能编辑，只能选择是否显示
,limit:20 //每一行的最多可以显示的数量
,page:true //是否开启分页
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [
[
{type:'checkbox',width:120}
,{field:'vcdId', width:200, title: 'ID', sort: true}
,{field:'vcdName', width:335, title: 'VCD名',edit:"true"} //注意这个edit：true，表示可以被编辑
,{field:'total', width:180, title: '总量'}
,{field:'lendout', width:180, title: '借出'}
,{field:'inputdate', width:200, title: '入货日期'}
,{width:150,title:'操作',toolbar:'#cellbarDemo'} //用toolbar引入操作按钮
]
]
});
$("#getCheckData").click(function () { //要写在use layui里头
var checkStatus = table.checkStatus('biu'); //获得当前选中行的状态
layer.alert(JSON.stringify(checkStatus.data)); //将选中行的数据显示出来并显示出来
});
$("#reload").click(function () { //刷新这个表格，用到reload方法
//tableIns.reload();
var id =10005;
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
id:id
}
});
});
$("#refresh").click(function () { //刷新这个表格，用到reload方法
//tableIns.reload();
var id =10005;
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
id:id
}
});
});
//监听table的事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
// layer.msg('添加');
layer.open({
type:2,
title:'添加VCD信息',
area:["600px","600px"],
content:"vcd/Create"
});
break;
case 'batchdel':
layer.msg('删除');
var checkStatus = table.checkStatus('biu');
if(checkStatus.data.length>0){
layer.msg("您选中");
}else{
layer.msg("请选择一条数据");
}
break;
};
});
//监听单元行的事件
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
layer.msg("更新");
//同步更新缓存对应的值
obj.update({
username: '123'
,city: '北京'
});
}
});
});
function f() {
layer.msg("nihao");
}
function tips() {
layer.tips("这是个弹出的tips","#zz",{tips:1})
}
主要分三部分的内容，分别是显示表格的内容、点击添加按钮出现添加vcd的具体页面以及监听行事件。
显示表格的话，遇到的难点是
1、返回数据必须是官方要求的code、msg、count、data的方式
2、数据表格的cols的写法
我从后台返回的是原始的关于vcd的list，而不是像他这样的形式，确定你的data可以传到controller之后，你就需要将json的东西进行一下封装，这里我后台的controller是这样写的。
vcdController.java
@RequestMapping("/listData")
@ResponseBody
public Map<String,Object> getVCDList() throws JSONException {
Map<String,Object> map = new HashMap<String, Object>();
List<Vcd> allList = vcdService.getVcdAll();
if (allList != null) {
map.put("code", 0);
map.put("msg", "");
map.put("count",allList.size());
map.put("data", allList);
return map;
}
return null;
}
通过这样的方法，allList被转化为我们具有特定格式的Json数据
这个格式的数据就是可以被前台的捕捉的，我们在前端直接写
var tableIns = table.render({ //获取table的实例，后面用来做表格的刷新
elem: '#biu '
,url:'vcd/listData' //数据接口
,toolbar:'#barDemo' //表格左上角的功能可以自定义
// ,defaultToolbar:['filter','print',''] //表格右上方的三个按钮（导出、打印、筛选）不能编辑，只能选择是否显示
,limit:20 //每一行的最多可以显示的数量
,page:true //是否开启分页
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [
[
]
]
});
就可以获取到后台数据库中的值展示在前台。
点击添加按钮，增加一列数据，这个和传统的写法比较像，首先，添加按钮后面增加了属性layevent=add，js中捕捉这个事件使用了layer.open，用弹窗的方式打开了另外一个html，具体代码如下，
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
// layer.msg('添加');
layer.open({
type:2,
title:'添加VCD信息',
area:["600px","600px"],
content:"vcd/Create"
});
break;
// .......
}
这个content指向的是一个拦截请求/vcd/Create，这个拦截请求是我们在vcdController中写的，在里面没有写其他的内容，单单返回了一个页面。
@RequestMapping（"/Create"）
//这里不写responsebody
public String CreateVcd(){
return "create.html";
}
这样子，我们就可以成功的在前端弹出这个创建vcd的框了。
添加vcd的页面使用的是layui的表单，提交到/AddVcd的请求底下，使用mybatis的insertSelective，当然请求插入之前，要先判断该vcd是否存在，如果不存在，插入才有意义。
@RequestMapping("/AddVcd")
@ResponseBody
public int addVcd(Vcd vcd, @Param("vcdName")String vcdName, @Param("amount")String amount, @Param("price") String price, @Param("inputDate")Date inputDate){
//找寻相关的 字段并且插入数据库
Vcd vcd1 = vcdService.getVcd(vcdName);
if(vcd1 == null){
int result = vcdService.insertVcd(vcd);
return result;
}
return 0;
}
实现完上面的功能，显示表格的内容、点击添加按钮出现添加vcd的具体页面 就完成了，还有监听行事件的功能，它是用在编辑按钮上的。
我理了一下逻辑，应该是先监听选中的数据是哪一条，然后点击编辑按钮之后，打开一个编辑页面 ，表格中的值传入预先填入表格，然后用户修改数据，提交（等于再插入一次），然后就可以成功更新值了。
另外还有一种思路，layui-table有一个属性叫edit，edit=true表示这个数据可以被编辑（点击表格上显示的值就可以修改），然后改完之后监听行事件，更新到数据库中。
这个我还在更新。等等鸭
标签：layer,vcd,表格,layui,JSON,table,var,VCD 来源： https://blog.csdn.net/qq_34093082/article/details/93868535