您的位置:首页 > 产品设计 > UI/UE

关于短信模板管理简单的增删改查的功能实现

2017-11-24 14:43 561 查看
样式



页面代码:

<div id="massageTool" style="height: 24px">

<div style="text-align: right;padding-right: 10px">
<a id="openAddMassage"  class="easyui-linkbutton" data-options="iconCls:'icon-remove'">新建</a>
<a id="openUpdateMassage"  class="easyui-linkbutton" data-options="iconCls:'icon-remove'">修改</a>
<a id="deleteMassages"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'">删除</a>
</div>
</div>

<div id="addMassageWin" class="easyui-window" title="新建短信模板" style="width:600px;height:400px"
data-options="modal:true,closable:true,closed:true,inline:false">
<div  style="text-align: center;">
<form id="addMassageForm" action="" method="post">
<table width="90%" style="padding: 15px">
<tr>
<td>模板名称</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>短信模板</td>
<td><textarea rows="" cols="" name="content"></textarea></td>
</tr>
<tr>
<td>备注</td>
<td><textarea rows="" cols="" name="remark"></textarea></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="添加" id="submitAddMassage">
<input type="button" value="关闭" id="closeAdd">
</td>
</tr>
</table>
</form>
</div>
</div>

<div id="updateMassageWin" class="easyui-window" title="修改短信模板" style="width:600px;height:400px"
data-options="modal:true,closable:true,closed:true,inline:false">
<div  style="text-align: center;"&
4000
gt;
<form id="updateMassageForm" action="" method="post">
<input type="hidden" name="id">
<table width="90%" style="padding: 15px">
<tr>
<td>模板名称</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>短信模板</td>
<td><textarea rows="" cols="" name="content"></textarea></td>
</tr>
<tr>
<td>备注</td>
<td><textarea rows="" cols="" name="remark"></textarea></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="更新" id="submitUpdateMassage">
<input type="button" value="关闭" id="closeUpdate">
</td>
</tr>
</table>
</form>
</div>
</div>

<table id="massageDatagrid" class="easyui-datagrid"
data-options="url:'/test/massage/getMassageByPage',
pagination:true,
pageSize:2,
pageList:[2,4,6,8,10,12],
toolbar:'#massageTool'">
<thead>
<tr>
<th data-options="field:'id',width:160,checkbox:true"></th>
<th data-options="field:'name',width:200">名称</th>
<th data-options="field:'content',width:900">模板内容</th>
<th data-options="field:'remark',width:200">备注</th>
</tr>
</thead>
</table>


弹窗样式



js代码

<script type="text/javascript">

$(function(){
$('#openAddMassage').click(function(){
//打开添加短信模板窗口
$('#addMassageWin').window('open');
});

$('#closeAdd').click(function(){
//关闭添加短信的弹窗
$("#addMassageWin").window('close');
})

$('#submitAddMassage').click(function(){
//发送ajax添加短信模板
$.ajax({
type: "POST",
url: "/test/massage/addMassage",
data: $("#addMassageForm").serialize(),
beforeSend:function(){
//进度条
$.messager.progress();
},
success: function(backData){
$.messager.progress('close');

//成功,提示新增短信模板成功,点击确定后提示ok;失败,提示失败
//Map<String,String> result-->success,error
if(backData.result=='success'){
$.messager.alert('短信管理系统','新增短信模板成功','info',function(){
//关闭窗口,重置form,datagrid要重新加载
$("#addMassageWin").window('close');
$('#addMassageForm').form('reset');
$("#massageDatagrid").datagrid('reload');
});

}else if(backData.result=='error'){
$.messager.alert('短信管理系统','新增短信模板失败','error');
}
}
});
});

$('#openUpdateMassage').click(function(){
//更新短信模板弹窗
var rows = $('#massageDatagrid').datagrid('getSelections');
if(rows.length==0){
$.messager.alert('短信管理系统','请选择一个短信模板','warning');
return;
}
if(rows.length>1){
$.messager.alert('短信管理系统','只能选择一个短信模板','warning');
return;
}

//表单加载数据
$('#updateMassageForm').form('load','/test/massage/getMassageById?id='+rows[0].id);
//打开更新计划窗口
$('#updateMassageWin').window('open');
});

$('#closeUpdate').click(function(){
//关闭更新计划弹窗
$("#updateMassageWin").window('close');
})

$('#submitUpdateMassage').click(function(){
//发送ajax提交更新短信模板信息
$.ajax({
type: "POST",
url: "/test/massage/updateMassage",
data: $("#updateMassageForm").serialize(),
beforeSend:function(){
$.messager.progress();
},
success: function(backData){
$.messager.progress('close');

//成功,提示更新短信模板成功,点击确定后提示ok;失败,提示失败
//Map<String,String> result-->success,error
if(backData.result=='success'){
$.messager.alert('短信管理系统','更新短信模板成功','info',function(){
//关闭窗口,重置form,datagrid要重新加载
$("#updateMassageWin").window('close');
$('#updateMassageForm').form('reset');
$("#massageDatagrid").datagrid('reload');
});

}else if(backData.result=='error'){
$.messager.alert('短信管理系统','更新短信模板失败','error');
}
}
});
});

$('#deleteMassages').click(function(){
//删除短信模板
//得到选中行,如果没有选中提示请选中一行,选中发送ajax请求,删除短信模板  ids:'1,2,3'
var rows = $('#massageDatagrid').datagrid('getSelections');
if(rows.length==0){
$.messager.alert('短信管理系统','请选择一个或者多个短信模板删除','warning');
return;
}
//1 2 3    1,2,3  1   ,2   ,3
var idsStr = '';
for(var i=0; i<rows.length;i++){
if(idsStr==''){
idsStr+=rows[i].id;
}else{
idsStr+=','+rows[i].id;
}
}

$.ajax({
type: "POST",
url: "/test/massage/deleteMassages",
data: {ids:idsStr},
beforeSend:function(){
$.messager.progress();
},
success: function(backData){
$.messager.progress('close');

//成功,提示删除成功,点击确定后提示ok;失败,提示失败
//Map<String,String> result-->success,error
if(backData.result=='success'){
$.messager.alert('短信管理系统','删除短信模板成功','info',function(){
//关闭窗口,重置form,datagrid要重新加载
$("#massageDatagrid").datagrid('reload');
});

}else if(backData.result=='error'){
$.messager.alert('短信管理系统','删除短信模板失败','error');
}
}
});
});

});
</script>


后台代码

vo:

public class MassageVo {
private int id;
private String name;
private String content;
private String remark;


controller:

@Controller
public class NewMassageController {
@Autowired
private NewMassageService massageService;

/**
* 获取短信模板列表
* @param page
* @param rows
* @return
*/
@RequestMapping("/massage/getMassageByPage")
@ResponseBody
public EasyUIDatagrid getMassageByPage(Integer page, Integer rows) {
return massageService.getMassageByPage(page, rows);
}

/**
* 根据id获取短信模板
* @param id
* @return
*/
@RequestMapping("/massage/getMassageById")
@ResponseBody
public MassageVo getMassageById(Integer id) {
MassageVo massage = massageService.getMassageById(id);
return massage;
}

/**
* 修改短信模板
* @param massage
* @return
*/
@RequestMapping("/massage/updateMassage")
@ResponseBody
public Map<String, String> updateMassage(MassageVo massage){
Map<String, String> retMap = new HashMap<String, String>();
try {
massageService.updateMassage(massage);

retMap.put("result", "success");
} catch (Exception e) {
e.printStackTrace();

retMap.put("result", "error");
}

return retMap;
}

/**
* 删除短信模板
* @param ids
* @return
*/
@RequestMapping("/massage/deleteMassages")
@ResponseBody
public Map<String, String> deleteMassages(Integer[] ids){
Map<String, String> retMap = new HashMap<String, String>();
Map<String, Object> params = new HashMap<String, Object>();
try {
params.put("ids", ids);
massageService.deleteMassages(params);

retMap.put("result", "success");
} catch (Exception e) {
e.printStackTrace();

retMap.put("result", "error");
}

return retMap;
}

/**
* 添加短信模板
* @param massage
* @return
*/
@RequestMapping("/massage/addMassage")
@ResponseBody
public Map<String, String> addMassage(MassageVo massage){
Map<String, String> retMap = new HashMap<String, String>();
try {
massageService.addMassage(massage);

retMap.put("result", "success");
} catch (Exception e) {
e.printStackTrace();

retMap.put("result", "error");
}

return retMap;
}
}


ServiceImpl:

@Service
public class NewMassageServiceImpl implements NewMassageService {

@Autowired
private NewMassageDao newMassageDao;

@Override
public EasyUIDatagrid getMassageByPage(Integer page, Integer rows) {
// 使用分页插件进行分页处理

// startPage方法一定要在statement执行前执行
PageHelper.startPage(page, rows);

List<MassageVo> list = newMassageDao.getMassageByPage();

// pageInfo包含了分页的所有信息
PageInfo<MassageVo> pageInfo = new PageInfo<MassageVo>(list);

EasyUIDatagrid easyUIDatagrid = new EasyUIDatagrid();
easyUIDatagrid.setRows(pageInfo.getList());
easyUIDatagrid.setTotal(pageInfo.getTotal());

return easyUIDatagrid;
}

@Override
public MassageVo getMassageById(Integer id) {
return newMassageDao.getMassageById(id);
}

@Override
public void updateMassage(MassageVo massage) {
newMassageDao.updateMassageById(massage);
}

@Override
public void deleteMassages(Map<String, Object> params) {
newMassageDao.deleteMassages(params);
}

@Override
public void addMassage(MassageVo massage) {
newMassageDao.addMassage(massage);
}

}


dao.xml代码:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.shinewonder.com.test.dao.NewMassageDao">

<select id="getMassageByPage" resultType="massageVo">
SELECT
`id`, `name`,
`content`, `remark`
FROM
`t_massage`
ORDER BY `id`
</select>

<select id="getMassageById" resultType="massageVo">
SELECT
`id`, `name`,
`content`, `remark`
FROM
`t_massage`
WHERE
`id`=#{id}
</select>

<update id="updateMassageById">
UPDATE
`t_massage`
SET
`name`=#{name},
`content`=#{content},
`remark`=#{remark}
WHERE
`id`=#{id}
</update>

<!-- int deletePlans(Map<String, Object> params); (1,2,3) -->
<delete id="deleteMassages">
delete from t_massage where id in
<foreach collection="ids" open="(" close=")" separator=","
item="id">
#{id}
</foreach>
</delete>

<insert id="addMassage">
INSERT
INTO `t_massage`
(`name`, `content`, `remark`)
VALUES
(#{name}, #{content},#{remark})
</insert>
</mapper>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息