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

关于短信群发的简单实现

2017-11-24 14:51 369 查看
样式：



前台代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
</head>
<body>
<div id="massageRecordingTool" style="height: 24px">

<div style="text-align: right; padding-right: 10px">
<a id="openAddMassageRecording" class="easyui-linkbutton"
data-options="iconCls:'icon-remove'">新建</a>
</div>
</div>

<div id="addMassageRecordingWin" 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="addMassageRecordingForm" action="" method="post">
<table width="90%" style="padding: 15px">
<tr>
<td>用户</td>
<td><textarea rows="8" cols="24" name="user"></textarea></td>
<td>用户间以逗号分割</td>
</tr>
<tr>
<td><span>短信模板：</span></td>
<td><input id="massageBackct" class="easyui-combobox" panelHeight="auto"  panelWight="auto"
data-options="
width:100,
valueField: 'id',
textField: 'name',
url: '/test/massageRecording/loadMassage',
method:'get'"/></td>
</tr>
<tr>
<td></td>
<td><textarea rows="8" cols="24" id="massageContent" name="content"></textarea></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="添加" id="submitAddMassageRecording">
<input type="button" value="关闭" id="closeAdd"></td>
</tr>
</table>
</form>
</div>
</div>

<table id="massageRecordingDatagrid" class="easyui-datagrid"
data-options="url:'/test/massageRecording/getMassageRecordingByPage',
pagination:true,
pageSize:8,
pageList:[8,10,12],
toolbar:'#massageRecordingTool'">
<thead>
<tr>
<th data-options="field:'id',width:100">序号</th>
<th data-options="field:'createtime',width:150">时间</th>
<th data-options="field:'admin',width:100">操作人</th>
<th data-options="field:'process',width:100">进度</th>
<th data-options="field:'user',width:250">用户</th>
<th data-options="field:'content',width:900">短信内容</th>
<th data-options="field:'remark',width:120">备注</th>
</tr>
</thead>
</table>

<script type="text/javascript">
$(function() {
$('#openAddMassageRecording').click(function() {
//打开添加短信群发窗口
$('#addMassageRecordingWin').window('open');
});

$('#closeAdd').click(function() {
//关闭添加短信群发窗口
$("#addMassageRecordingWin").window('close');
})

$('#massageBackct').combobox({
//选择节点时间
onSelect: function(record){
$('#massageContent').val(record.content);
}
});

$('#submitAddMassageRecording').click(
function() {
//发送ajax
$.ajax({
type : "POST",
url : "/test/massageRecording/addMassageRecording",
data : $("#addMassageRecordingForm").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要重新加载
$("#addMassageRecordingWin").window(
'close');
$('#addMassageRecordingForm').form(
'reset');
$("#massageRecordingDatagrid").datagrid(
'reload');
});

} else if (backData.result == 'error') {
$.messager.alert('短信管理系统', '短信群发信息添加失败',
'error');
}
}
});
});

});
</script>

</body>
</html>


新增弹窗



后台代码：

vo：

public class MassageRecordingVo {
private int id;
private String createtime;
private String admin;
private String process;
private String user;
private String content;
private String remark;


controller：

@Controller
public class MassageRecordingController {
@Autowired
private MassageRecordingService massageRecordingService;
@Autowired
private MassageService massageService;

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

/**
* 加载短信模板
* @param
* @param
*/
@RequestMapping("/massageRecording/loadMassage")
@ResponseBody
public List<MassageVo> loadInstitute() throws Exception {
List<MassageVo> mList = new ArrayList<MassageVo>();
try {
mList = massageService.listAllMassages();

} catch (Exception e) {
e.printStackTrace();

}
return mList;
}

/**
* 添加短信群发
* @param massage
* @return
*/
@RequestMapping("/massageRecording/addMassageRecording")
@ResponseBody
public Map<String, String> addMassageRecording(String user,String content){
Map<String, String> retMap = new HashMap<String, String>();
try {
massageRecordingService.addMassageRecording(user,content);
retMap.put("result", "success");
} catch (Exception e) {
e.printStackTrace();

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

return retMap;
}

}


ServiceImpl：

@Service
public class MassageRecordingServiceImpl implements MassageRecordingService {

@Autowired
private MassageRecordingDao massageRecordingDao;

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

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

List<MassageRecordingVo> list = massageRecordingDao.getMassageRecordingByPage();

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

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

return easyUIDatagrid;
}

@Override
public void add
9f48
MassageRecording(String user, String content) {
MassageRecordingVo mrv = new MassageRecordingVo();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
mrv.setCreatetime(sdf.format(new Date()));
String[] split = user.split(",");
mrv.setUser("共有"+split.length+"名用户");
mrv.setAdmin("admin");
mrv.setProcess("发送完成");
mrv.setContent(content);
mrv.setRemark("");
massageRecordingDao.addMassageRecording(mrv);
}

}


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.MassageRecordingDao">

<select id="getMassageRecordingByPage" resultType="massageRecordingVo">
SELECT
`id`, `createtime`,
`admin`, `process`,`user`,
`content`, `remark`
FROM
`massage_recording`
ORDER BY `id`
</select>

<insert id="addMassageRecording">
INSERT
INTO `massage_recording`
(`createtime`,`admin`, `process`,
`user`,`content`, `remark`)
VALUES
(#{createtime}, #{admin},#{process},#{user}, #{content},#{remark})
</insert>
</mapper>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  easyui-datagrid-后台ajax easyui-弹窗 easyui弹窗联动
相关文章推荐
新的分享
章节导航