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

样式

页面代码：

<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;">
        <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>