asp.net EasyUI DataGrid 实现增删改查
前台代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 7 <link rel="stylesheet" type="text/css" href="../EasyUI/themes/default/easyui.css" /> 8 <link rel="stylesheet" type="text/css" href="../EasyUI/themes/icon.css" /> 9 <link rel="stylesheet" type="text/css" href="../demo.css" /> 10 <style type="text/css"> 11 .align-center{ 12 margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */ 13 width:100%; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ 14 15 height:300px; 16 text-align:center; /* 文字等内容居中 */ 17 } 18 </style> 19 <script type="text/javascript" src="../EasyUI/jquery.min.js"></script> 20 <script type="text/javascript" src="../EasyUI/jquery.easyui.min.js"></script> 21 <script type="text/javascript"> 22 23 var url; //提交数据的路径 24 var formId; //当天要提交的Form的编号 25 var dialogId; //对话框的编号 26 27 28 29 30 $(function () { 31 32 33 $('#ReceiveList').datagrid({ 34 toolbar: [{ 35 //iconCls: 'icon-remove', 36 iconCls: 'icon-cut', 37 handler: function () { deleteAdminUser(); } 38 }, '-', { 39 iconCls: 'icon-edit', 40 handler: function () { edittbUser(); } 41 }, '-', { 42 iconCls: 'icon-add', 43 handler: function () { addtbUser(); } 44 } 45 46 ] 47 }); 48 49 50 51 52 }); 53 54 55 function pagerFilter(data) { 56 if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array 57 data = { 58 total: data.length, 59 rows: data 60 } 61 } 62 var dg = $('#ReceiveList'); 63 var opts = dg.datagrid('options'); 64 var pager = dg.datagrid('getPager'); 65 pager.pagination({ 66 // pageSize: 10,//每页显示的记录条数，默认为10 67 // pageList: [5, 10, 15],//可以设置每页记录条数的列表 68 beforePageText: '第',//页数文本框前显示的汉字 69 afterPageText: '页 共 {pages} 页', 70 displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', 71 onSelectPage: function (pageNum, pageSize) { 72 opts.pageNumber = pageNum; 73 opts.pageSize = pageSize; 74 pager.pagination('refresh', { 75 pageNumber: pageNum, 76 pageSize: pageSize 77 }); 78 dg.datagrid('loadData', data); 79 } 80 }); 81 if (!data.originalRows) { 82 data.originalRows = (data.rows); 83 } 84 var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); 85 var end = start + parseInt(opts.pageSize); 86 data.rows = (data.originalRows.slice(start, end)); 87 return data; 88 } 89 90 $(function () { 91 $('#ReceiveList').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', '/ashx/RoleList.ashx?action=GetRoleList'); 92 }); 93 94 95 96 97 98 // 删除代码部分 99 function deleteAdminUser() { 100 var row = $('#ReceiveList').datagrid('getSelected'); 101 if (row) { 102 $.messager.confirm('删除提示', '确定要删除' + row.UserName + '吗', function (r) { 103 if (r) { 104 $.post('/ashx/RoleList.ashx', { id: row.UserID, action: 'deleteRole' }, function (data, status) { 105 106 if (data == "ok") { 107 $.messager.show({ 108 title: 'success', 109 msg: '删除成功！' 110 }); 111 $('#ReceiveList').datagrid('reload'); 112 113 114 } else { 115 $.messager.show({ 116 title: 'Error', 117 msg: '删除用户失败!' 118 }); 119 } 120 }); 121 } 122 }); 123 } 124 else { 125 //$.messager.show({ 126 // title: 'Error', 127 // msg: '你没有选中行！' 128 //}); 129 $.messager.alert("提示", "您没有选中任何行！"); 130 } 131 } 132 //添加 133 function addtbUser() { 134 $("#addtbUserDialog").dialog({ 135 "title": "新添用户", 136 width: 500, 137 height: 450 138 139 }); 140 $('#addtbUserDialog').dialog('open'); 141 $('#addForm').form('clear'); 142 143 url = '/ashx/RoleList.ashx?action=add'; 144 formId = "#addForm"; 145 dialogId = "#addtbUserDialog"; 146 } 147 148 function add() { 149 150 $(formId).form('submit', { 151 url: url, 152 onSubmit: function () { 153 154 return $(this).form('validate'); 155 }, 156 157 success: function (data) { 158 159 160 if (data == 'ok') { 161 $.messager.show({ 162 title: 'success', 163 msg: '插入成功！' 164 }); 165 // $(dialogId).dialog('close'); 166 $('#ReceiveList').datagrid('reload'); 167 } else { 168 $.messager.show({ 169 title: 'Error', 170 msg: '插入失败！' 171 }); 172 } 173 174 //$(dialogId).dialog('close'); 175 $('#ReceiveList').datagrid('reload'); 176 } 177 }); 178 } 179 //编辑 180 function edittbUser() { 181 $("#edittbUserDialog").dialog({ 182 "title": "修改信息", 183 width: 500, 184 height: 450 185 186 }); 187 var row = $('#ReceiveList').datagrid('getSelected'); 188 if (row) { 189 $('#edittbUserDialog').dialog('open'); 190 $("#editUserName").val(row.UserName); 191 $("#editUserPassword").val(row.UserPassword); 192 $("#editNickName").val(row.NickName); 193 $("#editDeptID").val(row.DeptID); 194 $("#editPhone").val(row.Phone); 195 196 // $("#UserID").combobox('setValue', row.UserID); 197 // $('#edit').form('clear'); 198 199 url = '/ashx/RoleList.ashx?action=edit&UserID=' + row.UserID; 200 formId = "#editForm"; 201 dialogId = "#edittbUserDialog"; 202 203 204 } 205 else { 206 $.messager.alert("提示", "您没有选中任何行！"); 207 } 208 } 209 210 function edit() { 211 212 $(formId).form('submit', { 213 url: url, 214 onSubmit: function () { 215 // alert(formId); 216 return $(this).form('validate'); 217 218 }, 219 // success: successCallback 220 success: function (data) { 221 //alert(data) 222 //$.messager.show({ 223 // title: 'success', 224 // msg: data 225 //}); 226 227 228 //$.messager.alert("提示", data); 229 230 if (data == 'ok') { 231 $.messager.show({ 232 title: 'success', 233 msg: '修改成功！' 234 }); 235 $(dialogId).dialog('close'); 236 $('#ReceiveList').datagrid('reload'); 237 } else { 238 $.messager.show({ 239 title: 'Error', 240 msg: '修改失败！' 241 }); 242 } 243 244 //$(dialogId).dialog('close'); 245 $('#ReceiveList').datagrid('reload'); 246 } 247 }); 248 249 250 //$.post('/ashx/RoleList.ashx', {action:'edit',UserID:UserID, UserName: UserID, UserPassword: UserID }, function (data, status) { 251 252 // if (data == "ok") { 253 // $('#ReceiveList').datagrid('reload'); 254 // } else { 255 // $.messager.show({ 256 // title: 'Error', 257 // msg: '删除该科室失败!' 258 // }); 259 // } 260 //}); 261 } 262 263 //多条件查询方法 264 function tsearch() { 265 // var hoistalName = $("#hoistalName").combobox("getValue"); 266 var UserID = $("#UserID").val(); 267 //alert(depName); 268 $('#ReceiveList').datagrid('options').pageNumber = 1; 269 $('#ReceiveList').datagrid('getPager').pagination({ pageNumber: 1 }); 270 $('#ReceiveList').datagrid('options').url = '/ashx/RoleList.ashx?action=search&UserID='+UserID; 271 $('#ReceiveList').datagrid("reload"); 272 } 273 </script> 274 275 </head> 276 <body> 277 <br/> 278 <div class="searchitem"> 279 <label>UserID：</label> 280 <input type="text" id="UserID" class="easyui-validatebox" /> 281 <a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a> 282 </div> 283 284 <table id="ReceiveList" title="Custom DataGrid Pager" style="width:700px;height:400px" 285 data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/ashx/RoleList.ashx?action=GetRoleList',method:'get',pageSize:10 286 "> 287 <thead> 288 <tr> 289 <th data-options="field:'UserID',checkbox:true,width:80">用户ID</th> 290 <th data-options="field:'UserName',width:100">用户名</th> 291 <th data-options="field:'UserPassword',width:80,align:'right'">用户密码</th> 292 <th data-options="field:'NickName',width:80,align:'right'">昵称</th> 293 <th data-options="field:'DeptID',width:240">部门ID</th> 294 <th data-options="field:'Phone',width:60,align:'center'">电话</th> 295 </tr> 296 </thead> 297 </table> 298 299 300 <div id="addtbUserDialog" class="easyui-dialog" closed="true" buttons="#addtbUser-buttons" style="padding:10px 20px"> 301 <form id="addForm" method="post"> 302 <table class="align-center"> 303 <tr> 304 <td> 用户名</td> 305 <td><input id="Text1" name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td> 306 </tr> 307 <tr> 308 <td>用户密码</td> 309 <td><input id="Password1" name="UserPassword" class="easyui-validatebox" data-options="required:true" type="password"/></td> 310 </tr> 311 <tr> 312 <td>昵称</td> 313 <td><input id="Text2" name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td> 314 </tr> 315 <tr> 316 <td>部门ID</td> 317 <td><input id="Text3" name="DeptID" class="easyui-validatebox" data-options="required:true" type="text"/></td> 318 </tr> 319 <tr> 320 <td>电话</td> 321 <td><input id="Text4" name="Phone" class="easyui-validatebox" data-options="required:true" type="text"/></td> 322 </tr> 323 </table> 324 325 </form> 326 327 </div> 328 <div id="addtbUser-buttons"> 329 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="add()">保存</a> 330 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addtbUserDialog').dialog('close')">关闭</a> 331 </div> 332 333 334 335 336 <div id="edittbUserDialog" class="easyui-dialog" closed="true" buttons="#edittbUser-buttons" style="padding:10px 20px;" > 337 <form id="editForm" method="post" > 338 <table class="align-center"> 339 <tr> 340 <td> 用户名</td> 341 <td><input id="editUserName" name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td> 342 </tr> 343 <tr> 344 <td>用户密码</td> 345 <td><input id="editUserPassword" name="UserPassword" class="easyui-validatebox" data-options="required:true" type="password"/></td> 346 </tr> 347 <tr> 348 <td>昵称</td> 349 <td><input id="editNickName" name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td> 350 </tr> 351 <tr> 352 <td>部门ID</td> 353 <td><input id="editDeptID" name="DeptID" class="easyui-validatebox" data-options="required:true" type="text"/></td> 354 </tr> 355 <tr> 356 <td>电话</td> 357 <td><input id="editPhone" name="Phone" class="easyui-validatebox" data-options="required:true" type="text"/></td> 358 </tr> 359 </table> 360 361 </form> 362 </div> 363 <div id="edittbUser-buttons"> 364 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="edit()">保存</a> 365 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#edittbUserDialog').dialog('close')">关闭</a> 366 </div> 367 368 369 370 </body> 371 </html>
后台代码：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.Data.SqlClient; 7 namespace EasyUIDemo.ashx 8 { 9 /// <summary> 10 /// RoleList 的摘要说明 11 /// </summary> 12 public class RoleList : IHttpHandler 13 { 14 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 //context.Response.Write("Hello World"); 20 String action = context.Request["action"]; 21 22 if (action.Equals("GetRoleList")) 23 { 24 DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser"); 25 context.Response.Write(FormatToJson.ToJson(dt)); 26 27 } 28 //添加 29 else if (action.Equals("add")) 30 { 31 String UserName = context.Request["UserName"]; 32 String UserPassword = context.Request["UserPassword"]; 33 String NickName = context.Request["NickName"]; 34 String DeptID = context.Request["DeptID"]; 35 String Phone = context.Request["Phone"]; 36 37 38 39 String sql = "insert into tbUser(UserName,UserPassword,NickName,DeptID,Phone) values(@UserName,@UserPassword,@NickName,@DeptID,@Phone)"; 40 SqlParameter[] para = new SqlParameter[] { 41 new SqlParameter("@UserName",UserName), 42 new SqlParameter("@UserPassword",UserPassword), 43 new SqlParameter("@NickName",NickName), 44 new SqlParameter("@DeptID",DeptID), 45 new SqlParameter("@Phone",Phone), 46 }; 47 int i = SqlHelper.ExecuteSql(sql, para); 48 if (i > 0) 49 { 50 51 context.Response.Write("ok"); 52 } 53 else 54 { 55 context.Response.Write("no"); 56 } 57 58 } 59 //编辑 60 else if (action.Equals("edit")) 61 { 62 String UserName = context.Request["UserName"]; 63 String UserPassword = context.Request["UserPassword"]; 64 String NickName = context.Request["NickName"]; 65 String DeptID = context.Request["DeptID"]; 66 String Phone = context.Request["Phone"]; 67 68 String UserID = context.Request["UserID"]; 69 70 String sql = "update tbUser set UserName=@UserName,UserPassword=@UserPassword,NickName=@NickName,DeptID=@DeptID,Phone=@Phone where UserID=@UserID"; 71 SqlParameter[] para = new SqlParameter[] { 72 new SqlParameter("@UserName",UserName), 73 new SqlParameter("@UserPassword",UserPassword), 74 new SqlParameter("@NickName",NickName), 75 new SqlParameter("@DeptID",DeptID), 76 new SqlParameter("@Phone",Phone), 77 new SqlParameter("@UserID",UserID) 78 }; 79 int i = SqlHelper.ExecuteSql(sql, para); 80 if (i > 0) 81 { 82 83 context.Response.Write("ok"); 84 } 85 else 86 { 87 context.Response.Write("no"); 88 } 89 90 } 91 92 //查询 93 else if (action.Equals("search")) 94 { 95 96 97 String UserID = context.Request["UserID"]; 98 99 DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser where UserID=" + UserID); 100 context.Response.Write(FormatToJson.ToJson(dt)); 101 102 } 103 else if (action.Equals("deleteRole")) 104 { 105 String UserID = context.Request["id"]; 106 String sql = "delete from tbUser where UserID='" + UserID+"'"; 107 if (SqlHelper.ExecuteSql(sql) > 0) 108 { 109 context.Response.Write("ok"); 110 } 111 else 112 { 113 context.Response.Write("no"); 114 } 115 116 } 117 } 118 119 public bool IsReusable 120 { 121 get 122 { 123 return false; 124 } 125 } 126 } 127 }
源码下载：
https://files.cnblogs.com/create/EasyUIDemo.rar
