转自：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:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */ 100%; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ 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 - 1) * 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": "新添用户", 500, height: 450 }); $('#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": "修改信息", 500, height: 450 }); 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 = 1; $('#ReceiveList').datagrid('getPager').pagination({ pageNumber: 1 }); $('#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="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,80">用户ID</th> <th data-options="field:'UserName',100">用户名</th> <th data-options="field:'UserPassword',80,align:'right'">用户密码</th> <th data-options="field:'NickName',80,align:'right'">昵称</th> <th data-options="field:'DeptID',240">部门ID</th> <th data-options="field:'Phone',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 > 0) { 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 > 0) { 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) > 0) { context.Response.Write("ok"); } else { context.Response.Write("no"); } } } public bool IsReusable { get { return false; } } } }
源码下载：
http://files.cnblogs.com/create/EasyUIDemo.rar