EasyUI简单CRUD

<!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>

时间: 2024-10-29 18:45:27

EasyUI简单CRUD的相关文章

使用Struts2和jQuery EasyUI实现简单CRUD系统(八)——Struts与EasyUI使用JSON进行交互

由于前面写了的四篇文章压缩得太厉害,还有真正的原理也没有弄通,所以重新写了使用Struts2和jQuery EasyUI实现简单CRUD系统(一).(二)和(三). 知道ajax与struts间用json交互后,那么EasyUI作为一个JQuery的UI插件集合体,JQuery为一个Javascript库,而ajax是异步的js和xml.JQuery的代码里面就是直接用了Ajax,EasyUI也是一样. 不同于<使用Struts2和jQuery EasyUI实现简单CRUD系统(五)--jsp,

使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)

使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——ajax与struts2的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(三)——ajax,struts2使用json格式的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(四)——基础环境搭建 使用Struts2和jQuery EasyUI实现简单CRU

Asp.Net+Oracle+EasyUI简单增删查改

Asp.Net+Oracle+EasyUI简单增删查改 概要:网上有很多关于EasyUI前端框架的资料,本人在学习的基础上,基于自己之前搭建的框架(Oracle+Ado.Net),配合EasyUI实现一套简单的增删查改. 正文: 在实体层新建一个EMP.cs,继承至BaseModel 1 namespace myOracle.Model 2 { 3 public class Emp:BaseModel 4 { 5 public Emp() 6 { 7 base.PrimaryKey = "emp

easyui简单登陆界面

原文:easyui简单登陆界面 源代码下载地址:http://www.zuidaima.com/share/1550463738088448.htm easyui一个简单的登录页面

SpringMVC+Spring Data JPA+Shiro+EasyUI简单权限管理系统

SpringMVC+Spring Data JPA+Shiro+EasyUI简单权限管理系统 一直想做一个管理系统,希望它简洁,能做一个demo使用.以后在研究学习的时候,可以在此基础上增加代码.我觉得权限管理系统很值得做,因为涉及关系数据库模式的设计,能学到很多东西.万事开头难,先做个简单的,以后再慢慢完善的.任何事情关键是要做,不能停留在想. 前端 由于之前没有多少前端编程经验,所以做起前端比较吃力.之前前端使用Bootstrap,发现需要自己编写很多前端代码,虽然花费了很多时间,但是页面做

使用Struts2和jQuery EasyUI实现简单CRUD系统(四)——数据分页处理

上篇完成多选删除的功能之后,接下来就是做分页功能了.以前的分页是一个麻烦的问题.而且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. 之前自己写分页的时候,分页的界面当然是自己做的,用了ejui之后,真的方便了很多.方便到什么程度了. <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; heig

使用Struts2和jQuery EasyUI实现简单CRUD系统(三)——复选框进行多选删除操作

继上篇的jsp,json,EasyUI的结合顺利将数据库数据转换成json格式后再EasyUI完成展示(Retrieve)之后,接下来的实现增删改功能也很顺手了. 增的功能还是一样,只不过将原本自己写的form用ejui提供form代替而已. 删改功能需要拿到具体选择行的id. <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px;

使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合

这部分比較复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,可是一直不知道有什么用.写东西也没用到.所以没去学他.然后如今以这样的怀着好奇心,这是做什么用的,这是怎么用的.这是怎么结合的心态去学习,效果非常好. 这次用到的EasyUI的数据网格,DataGrid. 需用引用一个url传来的json数据.然后整齐美观地展如今页面上.想想自己之前做的东西.就直接拿数据库的数据和html的table代码进行拼接,整洁是整洁,可是代码写得特别别扭. 让我站在一个设计者的思路上来看,假设我如今

使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——jsp,json,EasyUI的结合

这部分比较复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,但是一直不知道有什么用,写东西也没用到,所以没去学他.然后现在以这种怀着好奇心,这是做什么用的,这是怎么用的,这是怎么结合的心态去学习,效果很好. 这次用到的EasyUI的数据网格,DataGrid.需用引用一个url传来的json数据,然后整齐美观地展现在页面上.想想自己之前做的东西,就直接拿数据库的数据和html的table代码进行拼接,整洁是整洁,但是代码写得特别别扭.让我站在一个设计者的思路上来看,如果我现在提供了一