asp.net EasyUI DataGrid 实现增删改查

转自：http://www.cnblogs.com/create/p/3410314.html

前台代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

     <link rel="stylesheet" type="text/css" href="../EasyUI/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="../EasyUI/themes/icon.css" />

    <link rel="stylesheet" type="text/css" href="../demo.css" />

    <style type="text/css">

.align-center{

    margin: auto;        /* 居中 这个是必须的，，其它的属性非必须 */

    width:%;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

    height:300px;

    text-align:center;     /* 文字等内容居中 */

}

</style>

    <script type="text/javascript" src="../EasyUI/jquery.min.js"></script>

    <script type="text/javascript" src="../EasyUI/jquery.easyui.min.js"></script>

       <script type="text/javascript">

           var url; //提交数据的路径

           var formId; //当天要提交的Form的编号

           var dialogId; //对话框的编号

           $(function () {

               $('#ReceiveList').datagrid({

                   toolbar: [{

                       //iconCls: 'icon-remove',

                       iconCls: 'icon-cut',

                       handler: function () { deleteAdminUser(); }

                   }, '-', {

                       iconCls: 'icon-edit',

                       handler: function () { edittbUser(); }

                   }, '-', {

                       iconCls: 'icon-add',

                       handler: function () { addtbUser(); }

                   }

                   ]

               });

           });

           function pagerFilter(data) {

               if (typeof data.length == 'number' && typeof data.splice == 'function') {    // is array

                   data = {

                       total: data.length,

                       rows: data

                   }

               }

               var dg = $('#ReceiveList');

               var opts = dg.datagrid('options');

               var pager = dg.datagrid('getPager');

               pager.pagination({

                  // pageSize: 10,//每页显示的记录条数，默认为10

                  // pageList: [5, 10, 15],//可以设置每页记录条数的列表

                   beforePageText: '第',//页数文本框前显示的汉字

                   afterPageText: '页    共 {pages} 页',

                   displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',

                   onSelectPage: function (pageNum, pageSize) {

                       opts.pageNumber = pageNum;

                       opts.pageSize = pageSize;

                       pager.pagination('refresh', {

                           pageNumber: pageNum,

                           pageSize: pageSize

                       });

                       dg.datagrid('loadData', data);

                   }

               });

               if (!data.originalRows) {

                   data.originalRows = (data.rows);

               }

               var start = (opts.pageNumber - ) * parseInt(opts.pageSize);

               var end = start + parseInt(opts.pageSize);

               data.rows = (data.originalRows.slice(start, end));

               return data;

           }

           $(function () {

               $('#ReceiveList').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', '/ashx/RoleList.ashx?action=GetRoleList');

           });

           //  删除代码部分

           function deleteAdminUser() {

               var row = $('#ReceiveList').datagrid('getSelected');

               if (row) {

                   $.messager.confirm('删除提示', '确定要删除' + row.UserName + '吗', function (r) {

                       if (r) {

                           $.post('/ashx/RoleList.ashx', { id: row.UserID, action: 'deleteRole' }, function (data, status) {

                               if (data == "ok") {

                                   $.messager.show({

                                       title: 'success',

                                       msg: '删除成功！'

                                   });

                                   $('#ReceiveList').datagrid('reload');

                               } else {

                                   $.messager.show({

                                       title: 'Error',

                                       msg: '删除用户失败!'

                                   });

                               }

                           });

                       }

                   });

               }

               else {

                   //$.messager.show({

                   //    title: 'Error',

                   //    msg: '你没有选中行！'

                   //});

                   $.messager.alert("提示", "您没有选中任何行！");

               }

           }

           //添加

           function addtbUser() {

               $("#addtbUserDialog").dialog({

                   "title": "新添用户",

                   width: ,

                   height: 

               });

               $('#addtbUserDialog').dialog('open');

               $('#addForm').form('clear');

               url = '/ashx/RoleList.ashx?action=add';

               formId = "#addForm";

               dialogId = "#addtbUserDialog";

           }

           function add() {

               $(formId).form('submit', {

                   url: url,

                   onSubmit: function () {

                       return $(this).form('validate');

                   },

                   success: function (data) {

                       if (data == 'ok') {

                           $.messager.show({

                               title: 'success',

                               msg: '插入成功！'

                           });

                           // $(dialogId).dialog('close');

                           $('#ReceiveList').datagrid('reload');

                       } else {

                           $.messager.show({

                               title: 'Error',

                               msg: '插入失败！'

                           });

                       }

                       //$(dialogId).dialog('close');

                       $('#ReceiveList').datagrid('reload');

                   }

               });

           }

           //编辑

           function edittbUser() {

               $("#edittbUserDialog").dialog({

                   "title": "修改信息",

                   width: ,

                   height: 

               });

               var row = $('#ReceiveList').datagrid('getSelected');

               if (row) {

                   $('#edittbUserDialog').dialog('open');

                   $("#editUserName").val(row.UserName);

                   $("#editUserPassword").val(row.UserPassword);

                   $("#editNickName").val(row.NickName);

                   $("#editDeptID").val(row.DeptID);

                   $("#editPhone").val(row.Phone);

                   //  $("#UserID").combobox('setValue', row.UserID);

                   //   $('#edit').form('clear');

                   url = '/ashx/RoleList.ashx?action=edit&UserID=' + row.UserID;

                   formId = "#editForm";

                   dialogId = "#edittbUserDialog";

               }

               else {

                   $.messager.alert("提示", "您没有选中任何行！");

               }

           }

           function edit() {

               $(formId).form('submit', {

                   url: url,

                   onSubmit: function () {

                       // alert(formId);

                       return $(this).form('validate');

                   },

                   // success: successCallback

                   success: function (data) {

                       //alert(data)

                       //$.messager.show({

                       //    title: 'success',

                       //    msg: data

                       //});

                       //$.messager.alert("提示", data);

                       if (data == 'ok') {

                           $.messager.show({

                               title: 'success',

                               msg: '修改成功！'

                           });

                           $(dialogId).dialog('close');

                           $('#ReceiveList').datagrid('reload');

                       } else {

                           $.messager.show({

                               title: 'Error',

                               msg: '修改失败！'

                           });

                       }

                       //$(dialogId).dialog('close');

                       $('#ReceiveList').datagrid('reload');

                   }

               });

               //$.post('/ashx/RoleList.ashx', {action:'edit',UserID:UserID, UserName: UserID, UserPassword: UserID }, function (data, status) {

               //    if (data == "ok") {

               //        $('#ReceiveList').datagrid('reload');

               //    } else {

               //        $.messager.show({

               //            title: 'Error',

               //            msg: '删除该科室失败!'

               //        });

               //    }

               //});

           }

           //多条件查询方法

           function tsearch() {

              //  var hoistalName = $("#hoistalName").combobox("getValue");

               var UserID = $("#UserID").val();

               //alert(depName);

               $('#ReceiveList').datagrid('options').pageNumber = ;

               $('#ReceiveList').datagrid('getPager').pagination({ pageNumber:  });

               $('#ReceiveList').datagrid('options').url = '/ashx/RoleList.ashx?action=search&UserID='+UserID;

               $('#ReceiveList').datagrid("reload");

           }

    </script>

</head>

<body>

   <br/>

      <div class="searchitem">

    <label>UserID：</label>

    <input type="text" id="UserID" class="easyui-validatebox" />

          <a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a>

    </div>

 <table id="ReceiveList" title="Custom DataGrid Pager" style="width:700px;height:400px"

            data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/ashx/RoleList.ashx?action=GetRoleList',method:'get',pageSize:10

            ">

        <thead>

            <tr>

                <th data-options="field:'UserID',checkbox:true,width:80">用户ID</th>

                <th data-options="field:'UserName',width:100">用户名</th>

                <th data-options="field:'UserPassword',width:80,align:'right'">用户密码</th>

                <th data-options="field:'NickName',width:80,align:'right'">昵称</th>

                <th data-options="field:'DeptID',width:240">部门ID</th>

                <th data-options="field:'Phone',width:60,align:'center'">电话</th>

            </tr>

        </thead>

    </table>

          <div id="addtbUserDialog" class="easyui-dialog" closed="true" buttons="#addtbUser-buttons" style="padding:10px 20px">

               <form id="addForm"  method="post">

                   <table class="align-center">

                       <tr>

                           <td> 用户名</td>

                           <td><input id="Text1"  name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>

                       </tr>

                        <tr>

                           <td>用户密码</td>

                           <td><input id="Password1" name="UserPassword"  class="easyui-validatebox" data-options="required:true" type="password"/></td>

                       </tr>

                        <tr>

                           <td>昵称</td>

                           <td><input id="Text2"  name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>

                       </tr>

                        <tr>

                           <td>部门ID</td>

                           <td><input id="Text3" name="DeptID"  class="easyui-validatebox" data-options="required:true" type="text"/></td>

                       </tr>

                        <tr>

                           <td>电话</td>

                           <td><input id="Text4" name="Phone" class="easyui-validatebox" data-options="required:true"  type="text"/></td>

                       </tr>

                   </table>

               </form>

            </div>

            <div id="addtbUser-buttons">

                <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="add()">保存</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addtbUserDialog').dialog('close')">关闭</a>

            </div>

           <div id="edittbUserDialog" class="easyui-dialog" closed="true" buttons="#edittbUser-buttons" style="padding:10px 20px;"  >

               <form id="editForm"  method="post"   >

                <table class="align-center">

                       <tr>

                           <td> 用户名</td>

                           <td><input id="editUserName"  name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>

                       </tr>

                        <tr>

                           <td>用户密码</td>

                           <td><input id="editUserPassword" name="UserPassword"  class="easyui-validatebox" data-options="required:true" type="password"/></td>

                       </tr>

                        <tr>

                           <td>昵称</td>

                           <td><input id="editNickName"  name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>

                       </tr>

                        <tr>

                           <td>部门ID</td>

                           <td><input id="editDeptID" name="DeptID"  class="easyui-validatebox" data-options="required:true" type="text"/></td>

                       </tr>

                        <tr>

                           <td>电话</td>

                           <td><input id="editPhone" name="Phone" class="easyui-validatebox" data-options="required:true"  type="text"/></td>

                       </tr>

                   </table>

               </form>

            </div>

            <div id="edittbUser-buttons">

                <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="edit()">保存</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#edittbUserDialog').dialog('close')">关闭</a>

            </div>

</body>

</html>

后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

namespace EasyUIDemo.ashx

{

    /// <summary>

    /// RoleList 的摘要说明

    /// </summary>

    public class RoleList : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //context.Response.Write("Hello World");

            String action = context.Request["action"];

            if (action.Equals("GetRoleList"))

            {

                DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser");

                context.Response.Write(FormatToJson.ToJson(dt));

            }

            //添加

            else if (action.Equals("add"))

            {

                String UserName = context.Request["UserName"];

                String UserPassword = context.Request["UserPassword"];

                String NickName = context.Request["NickName"];

                String DeptID = context.Request["DeptID"];

                String Phone = context.Request["Phone"];

                String sql = "insert into tbUser(UserName,UserPassword,NickName,DeptID,Phone) values(@UserName,@UserPassword,@NickName,@DeptID,@Phone)";

                SqlParameter[] para = new SqlParameter[] {

                                                           new SqlParameter("@UserName",UserName),

                                                            new SqlParameter("@UserPassword",UserPassword),

                                                             new SqlParameter("@NickName",NickName),

                                                              new SqlParameter("@DeptID",DeptID),

                                                            new SqlParameter("@Phone",Phone),

                                                           };

                int i = SqlHelper.ExecuteSql(sql, para);

                if (i > )

                {

                    context.Response.Write("ok");

                }

                else

                {

                    context.Response.Write("no");

                }

            }

            //编辑

            else if (action.Equals("edit"))

            {

                String UserName = context.Request["UserName"];

                String UserPassword = context.Request["UserPassword"];

                String NickName = context.Request["NickName"];

                String DeptID = context.Request["DeptID"];

                String Phone = context.Request["Phone"];

                String UserID = context.Request["UserID"];

                String sql = "update tbUser set UserName=@UserName,UserPassword=@UserPassword,NickName=@NickName,DeptID=@DeptID,Phone=@Phone where UserID=@UserID";

                SqlParameter[] para = new SqlParameter[] {

                                                             new SqlParameter("@UserName",UserName),

                                                             new SqlParameter("@UserPassword",UserPassword),

                                                             new SqlParameter("@NickName",NickName),

                                                             new SqlParameter("@DeptID",DeptID),

                                                             new SqlParameter("@Phone",Phone),

                                                             new SqlParameter("@UserID",UserID)

                                                           };

                int i = SqlHelper.ExecuteSql(sql, para);

                if (i > )

                {

                    context.Response.Write("ok");

                }

                else

                {

                    context.Response.Write("no");

                }

            }

            //查询

            else if (action.Equals("search"))

            {

                String UserID = context.Request["UserID"];

                DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser where UserID=" + UserID);

                context.Response.Write(FormatToJson.ToJson(dt));

            }

            else if (action.Equals("deleteRole"))

            {

                String UserID = context.Request["id"];

                String sql = "delete  from tbUser where UserID='" + UserID+"'";

                if (SqlHelper.ExecuteSql(sql) > )

                {

                    context.Response.Write("ok");

                }

                else

                {

                    context.Response.Write("no");

                }

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

源码下载：

http://files.cnblogs.com/create/EasyUIDemo.rar

asp.net EasyUI DataGrid 实现增删改查的更多相关文章

Asp.Net操作MySql数据库增删改查
Asp.Net操作MySql数据库增删改查,话不多说直接步入正题.git源码地址:https://git.oschina.net/gxiaopan/NetMySql.git 1.安装MySQL数据库 ...
easyui+nodejs+sqlserver增删改查实现
用到的模块或者技术: Express: http://www.expressjs.com.cn/4x/api.html#express Easyui: http://www.jeasyui.com/d ...
nodejs+easyui(抽奖活动后台)增删改查
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfAAAAJACAIAAAD97KNZAAAgAElEQVR4nO2daXxb5Z2o7w+dO1/ufL ...
【ASP.NET MVC】jqGrid 增删改查详解
1 概述本篇文章主要是关于JqGrid的,主要功能包括使用JqGrid增删查改,导入导出,废话不多说,直接进入正题. 2 Demo相关 2.1 Demo展示第一部分第二部分 2.2 ...
Asp.net简单三层+Sqllite 增删改查
新建项目à新建一个空白解决方案在Model新建一个实体类 using System; using System.Collections.Generic; using System.Linq; usi ...
.net+EF+mvc通过EasyUI的DataGrid实现增删改查
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...
easyui表格的增删改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
[jQuery EasyUI系列] 创建增删改查应用
一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: da ...
ASP连接access 数据库的增删改查 - imsoft.cnblogs
假设数据库文件名叫data.mdb里面有2个表:1.admin2.news假设admin是保存用户名和密码,里面有字段:UserName,PassWord.假设我们要在判断一个用户名叫name,密码是 ...

随机推荐

mysql相关重要问题解决
root密码修改 MySQL 的管理员密码: sudo mysqladmin -u root password newpassword: mysql无法安装:删除/etc/mysql, /var/ ...
java新手笔记1 Hello World!
//Hello.java文件 //类声明 public class Hello{ //声明方法 main程序入口 public static void main (String[] args) { S ...
http 请求头
HTTP Request的Header信息 1.HTTP请求方式如下表: GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并 ...
01_JavaMail_03_邮件发送简单实例
[JavaMail中的核心类] 1.Session:类似Jdbc中的Connection的作用 2.MimeMessage:邮件信息类 3.Transport:发送器,用来发送邮件 [工程截图] [具 ...
OpenJudge 2749 分解因数
1.链接地址: http://bailian.openjudge.cn/practice/2749/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述给出一个正整数a,要求分 ...
c#NPOI导出
按行列导出数据: HSSFWorkbook hssfworkbook = new HSSFWorkbook(); //命名空间:using NPOI.HSSF.UserModel; Sheet she ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
关于网页中第一行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
shell编程的一些例子3
数值处理 1.let 命令 bash 的内部命令let可以用来计算算术表达式的值.如果表达式中有空格或者特殊字符,则应将表达式括在双引号中. let的语法命令:let express-list 如果最 ...
linux常用命令搜索
解压tar - xzvf webcmp.tar.gz /目的目录压缩tar - czvf webcmp.tar.gz /压缩源文件发包命令 cd /cap/sc_bossdata_20140516 ...
Visual C++ 6.0常用快捷键
一.常用编译相关的快捷键 1.编译(单个文件) Ctrl+F7 2.连接 F7 3.运行 Ctrl+F5 二.常用调试相关的快捷键 1.GO(全速运行) F5 2.Stop Debuging(停 ...

asp.net EasyUI DataGrid 实现增删改查

asp.net EasyUI DataGrid 实现增删改查的更多相关文章

随机推荐

热门专题