<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="jquery,ui,easy,easyui,web" />
    <meta name="description" content="easyui help you build your web page easily!" />
    <title>短信管理</title>
    <link href="../Scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Scripts/easyui/themes/icon.css" rel="stylesheet" />
    <link href="../Scripts/easyui/demo/demo.css" rel="stylesheet" />
    <style type="text/css">
        #fm {
            margin: 0;
            padding: 10px 30px;
        }

.ftitle {
            font-size: 14px;
            font-weight: bold;
            color: #666;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }

.fitem {
            margin-bottom: 5px;
        }

.fitem label {
                display: inline-block;
                width: 80px;
            }
    </style>
    <script type="text/javascript" src="../Scripts/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../Scripts/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;
        function newUser() {
            $('#dlg').dialog('open').dialog('setTitle', '添加短信');
            $('#fm').form('clear');
            url = "/OnlineMonitoring/ashx/MSGMgr.ashx?type=insert";
        }
        function editUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', '编辑短信内容');
                $('#fm').form('load', row);
                url = "/OnlineMonitoring/ashx/MSGMgr.ashx?type=update";
            } else {
                parent.$.messager.alert('提示', '请选择一行', "info");
            }
        }
        function saveUser() {
            $('#fm').form('submit', {
                url: url,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.result) {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    } else {
                        $.messager.show({
                            title: '服务端错误',
                            msg: "添加失败"
                        });
                    }
                }
            });
        }
        function removeUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                parent.$.messager.confirm('操作提示', '你确定删除这条短信吗？', function (r) {
                    if (r) {
                        $.post("/OnlineMonitoring/ashx/MSGMgr.ashx?type=delete", { short_message_id: row.short_message_id }, function (result) {
                            if (result.result) {
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: '服务端错误',
                                    msg: "删除短信失败"
                                });
                            }
                        }, 'json');
                    }
                });
            }
        }
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center',fit:true,border:false" style="height: 100%">
        <table id="dg" title="短信管理" class="easyui-datagrid"
            url="/OnlineMonitoring/ashx/MSGMgr.ashx?type=select"
            toolbar="#toolbar" pagination="false"
            rownumbers="true" fitcolumns="true" singleselect="true" fit="true" method="get">
            <thead>
                <tr>
                    <th field="short_message_content" width="50" align="center">短信内容</th>
                    <th field="short_message_time" width="50" align="center">短信创建时间</th>
                    <th field="short_message_state" width="50" align="center" formatter="messageFormater">短信状态</th>
                </tr>
            </thead>
        </table>
    </div>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">添加</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">编辑</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="removeUser()">删除</a>
    </div>
    <div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"
        closed="true" buttons="#dlg-buttons">
        <div class="ftitle">短信信息</div>
        <form id="fm" method="post" novalidate>
            <input type="hidden" name="short_message_id" />
            <div class="fitem">
                <label>短信内容:</label>
                <input name="short_message_content" class="easyui-validatebox" required="true">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveUser()">确认</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</body>
</html>
<style type="text/css">
    .panel-title {
        text-align: center;
        font-size: 20px;
    }

#sex {
        width: 50px;
    }
</style>
<script>
    function messageFormater(val) {
        if (val == 1) {
            return "已发送";
        } else {
            return "未发送";
        }
    }
</script>

EasyUI简单CRUD的更多相关文章

  1. 使用Struts2和jQuery EasyUI实现简单CRUD系统（转载汇总）

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  2. MongoDB简单CRUD场景

    MongoDB简单CRUD命令操作 (1)新建数据库:use 数据库名 (2)显示所有数据库:show dbs; (3)新建集合(两种方式)  隐式创建:在创建集合的同时往集合里面添加数据---db. ...

  3. 使用Struts2和jQuery EasyUI实现简单CRUD系统（七）——数据分页处理

    上篇完毕多选删除的功能之后,接下来就是做分页功能了.曾经的分页是一个麻烦的问题.并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. watermark/2/tex ...

  4. 使用Struts2和jQuery EasyUI实现简单CRUD系统（五）——jsp,json,EasyUI的结合

    这部分比較复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,可是一直不知道有什么用.写东西也没用到.所以没去学他.然后如今以这样的怀着好奇心,这是做什么用的,这是怎么用的.这是怎么结合的心 ...

  5. SSM——（二）：easyUI的CRUD

    1.在WebContent下新建admin目录,添加index.html(用来显示user表的CRUD): 总结: 1.datagrid接收的必须是json数据: 2.使用分页插件会自动向后台传递St ...

  6. SequoiaDB 系列之二 ：SequoiaDB的简单CRUD操作

    上一篇通过一系列的操作,终于把SequoiaDB的集群部署到单台机器上了. 建议去安装体验一下吧. 在整个环境的部署的体验来看,并没有MongoDB的部署简单,但是比MongoDB的部署要清晰.Mon ...

  7. easyui简单使用

    easyui近期一直都比较流行,虽然它在效果上被extjs爆了,它的使用难度低,在IE6下表现不错,的确受到了广泛企业程序员的好评. 但是他的API说明还是比较简陋的,刚上手可能还需要摸索一下,为什么 ...

  8. Servlet实现简单CRUD

    1.首先在数据库中建表 create database student create table stu( sno char(10), sna char(10), ) insert stu value ...

  9. Easyui简单布局

    1.创建布局 创建布局只需要添加 'easyui-layout' class 到 <div> 标记或者 在整个页面创建布局,即<body class="easyui-lay ...

随机推荐

  1. 解决tomcat提交的数据乱码的问题

    有时,开发过程中会遇到前端传入“中文”并返回时,会出现乱码!主要是因为前端通过tomcat7提交的数据就出现了乱码的问题,也就说根源在于tomcat7. 有2中方案解决该问题: (1)使用tomcat ...

  2. 读-《c++设计新思维-泛型编程与设计模式之应用》经典记录（英文书名：《modern c++ design》）

    1.以设计为目标的程序库都必须帮助使用者完毕静止的设计.以实现使用者自己的constraints,而不是实现预先定义好的constraints. 2.Anything that can be done ...

  3. static、final修饰符、内部类

    static修饰符: static修饰符能够与属性.方法和内部类一起使用,表示静态的.类中的静态变量和静态方法能够与类名一起使用.不须要创建一个类的对象来訪问该类的静态成员. class Static ...

  4. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. Linux命令-网络命令:ifconfig

    ifconfig 查看本机的网卡信息.eth是linxu真实的网卡,多块网卡从零开始,eth0,eth1. ifconfig eth0 192.168.67.5 设置临时网络IP地址

  6. Android studio使用心得(二)— 打包签名apk发布

    1.—–Android Studio菜单   Build->Generate Signed APK 2.——Create new.. 3.——-跟eclipse里面一样,添加keystore 信 ...

  7. A successful Git branching model/GIT分支管理是一门艺术

    英文原文:http://www.nvie.com/posts/a-successful-git-branching-model/ 原文作者:Vincent Driessen 本文经Linux大棚博主总 ...

  8. Linux 系统 pptpd+radius+mysql 安装攻略

    分类: 原文地址:Linux 系统 pptpd+radius+mysql 安装攻略 作者:wfeng .你所需要的软件 内核最好能升级到2.6 如果你是centos的用户,可以通过yum update ...

  9. hdu 1711 Number Sequence KMP 基础题

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. Atitit.减少http请求数方案

    Atitit.减少http请求数方案 1. 原理与方法1 1.1. -------jsp1 1.2. "index/js.txt";2 1.3. connReduceDync2 1 ...