前言
做这样一个小Demo是在做一个C/S水印需要一个小后端进行控制的情况下,
因为嫌添加删除都要加页面嫌麻烦,就想出了仿数据库的模式写出来这么一个页面,效果图如下:
这样就实现了仿数据库模式的操作。
实现思路
主要实现语句在从后端返回list的时候加入这样的一句:
@RequestMapping(value = "/getData")
@ResponseBody
public List<Mark> getData() {
List list = new ArrayList();
Mark mark = new Mark();
mark.setId(MyUtils.uuid());
list.add(mark);
list.addAll(markMapper.selectAll());
return list;
}
这就实现了前端界面表格第一行是一条有一个UUID的空数据,这样我们对它进行修改时,判断如果修改的行索引为第一行,则执行添加操作,否则执行修改操作。
通过这样的方式就可以避免小数据操作时要新建添加删除的页面的繁琐操作。
简单地做这么一个Demo,下面放一下我的页面和控制器代码。
<html>
<head>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/head/head.jsp" %>
<%@include file="/WEB-INF/head/head2.jsp" %>
<title>姓名管理</title>
</head>
<body>
<table id="change_list" class="easyui-datagrid" title="姓名管理"
data-options="singleSelect:true,toolbar:'#change_toolbar',
loadMsg: '数据正在加载,请耐心的等待...',url:'/ssm/change/getData'
,method:'post',fit:true,striped:true,fitColumns:true,onAfterEdit:function (index,row,changes) {
$.ajax({
type:'post',
data:{id:row.id,name:row.name,area:row.area,master:row.master},
url:'/ssm/change/setData',
success:function(data){$('#change_list').datagrid('reload');}
});
$('.change_btn').linkbutton({text:'确认修改',plain:true,iconCls:'fi-pencil'});
}
,onLoadSuccess:function (data) {
$('.change_btn').linkbutton({text:'确认修改',plain:true,iconCls:'fi-pencil'});
}
">
<thead>
<tr>
<th data-options="field:'area',width:'17%',align:'id',editor:{type:'textbox'}">地区</th>
<th data-options="field:'master',width:'17%',align:'id',editor:{type:'textbox'}">主机ID</th>
<th data-options="field:'name',width:'17%',align:'center',editor:{type:'textbox'}">姓名</th>
<th data-options="field:'a',width:'26%',align:'center',formatter:operation">操作</th>
</tr>
</thead>
</table>
<div id="change_toolbar">
<a onclick="change_del();" href="javascript:void(0);"
class="easyui-linkbutton" data-options="plain:true,iconCls:'fi-x '">删除</a>
</div>
</body>
<script>
function operation(val, row, index) {
var operation = '';
operation += '<a class="change_btn" href="javascript:void(0);" onclick="endEdit(\'' + index + '\');">确定</a>';
return operation;
}
function endEdit(index) {
$('#change_list').datagrid('endEdit', index);
}
$('#change_list').datagrid({
onDblClickCell: function (index, field, value) {
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', {index: index, field: field});
$(ed.target).focus();
}
});
function change_del() {
var row = $('#change_list').datagrid('getSelected');
$.messager.confirm('删除', '确认要删除吗?', function (r) {
if (r) {
$.ajax({
type: 'POST',
data: {
id: row.id
},
url: '/ssm/change/del',
success: function (data) {
$('#change_list').datagrid('reload');
$.messager.show({
title: '提示',
msg: '删除成功'
});
}
})
}
});
}
</script>
</html>
做的比较j简易,很多细节没太考虑,include中导入了easyui的包和c标签等
package com.cjd.ssm.controller;
import com.cjd.ssm.base.Result;
import com.cjd.ssm.mapper.MarkMapper;
import com.cjd.ssm.pojo.Mark;
import com.cjd.ssm.utils.MyUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
/**
* @author : cjd
* @Description : 仿数据库Demo控制器
* @create : 2018-01-18 16:57
**/
@Controller
@RequestMapping(value = "/change")
public class ChangeController {
@Autowired
private MarkMapper markMapper;
@RequestMapping(value = "/getData")
@ResponseBody
public List<Mark> getData() {
List list = new ArrayList();
Mark mark = new Mark();
mark.setId(MyUtils.uuid());
list.add(mark);
list.addAll(markMapper.selectAll());
return list;
}
@RequestMapping(value = "/setData", method = RequestMethod.POST)
@ResponseBody
public Result setData(Mark mark) {
Result result = new Result();
boolean find = false;
List<Mark> list = markMapper.selectAll();
for (Mark mark1 : list) {
if (mark1.getId().equals(mark.getId())) {
find = true;
break;
}
}
if (find) {
markMapper.updateByMark(mark);
result.setMsg("更新成功");
} else {
markMapper.insertMark(mark);
result.setMsg("新增成功");
}
return result;
}
@RequestMapping(value = "/del")
@ResponseBody
public String del(Mark mark) {
markMapper.deleteById(mark);
return "删除成功";
}
}