Easyui datagrid简单的增删改查记录
前台引入的是最近版本的1.26
官网网址http://www.jeasyui.com/download/index.php
我的中文学习网址：http://www.phptogether.com/juidoc/
自己草靠资料手写了一份简单的例子 网上asp.net的真是不多 大多都是java php的 官网也都是php 有点吃力 呵呵
后台增删改查都是用一般处理程序处理的
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <link href="themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="themes/icon.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery.easyui.min.js" type="text/javascript"></script> <script src="locale/easyui-lang-zh_CN.js" type="text/javascript"></script>//中文js <script src="js/outlook2.js" type="text/javascript"></script> <script type="text/javascript"> // $(function() { // //设置分页控件 // var p = $("#dg").datagrid('getPager'); // $(p).pagination({// // // beforePageText: '第', //页数文本前显示的文本 // afterPageText: '页 共{pages} 页', // displayMsg: '当前显示{from}-{to} 条记录 共{total}条记录' //这里直接引入中文js 这种写法就可以忽略了 // }); // }); //新增显示窗口 function newUser() { $("#dlg").dialog('open').dialog('setTitle', '添加用户'); $("#fm").form('clear'); url = "saveuser.ashx"; } //新增确定 function saveUser() { $("#fm").form('submit', { url: url, onSubmit: function() { return $(this).form('validate'); }, success: function(result) { var result = eval('(' + result + ')'); if (result.success) { $("#dlg").dialog('close'); $.messager.defaults = { ok: "确定", cancel: "取消" }; $.messager.alert('提示', '修改成功!'); $("#dg").datagrid('reload'); } else { $.message.show({ title:Error, msg:result.msg }); } } }); } //编辑显示窗口 function editUser() { var row = $("#dg").datagrid('getSelected'); if (row) { $("#dlg").dialog('open').dialog('setTitle', '编辑用户'); $("#fm").form('load', row); url = "edituser.ashx?id="+row.id; } else { $.messager.defaults = { ok: "确定", cancel: "取消" }; $.messager.alert('提示', '请选择数据行进行编辑!'); } } $(function() { $.messager.defaults = { ok: "确定", cancel: "取消" }; }); //删除用户 function removeUser() { var row = $("#dg").datagrid('getSelected'); if (row) { $.messager.confirm('Confirm', '您确定要删除该数据吗?', function(r) { if (r) { $.post('removeuser.ashx', { id: row.id }, function(result) { if (result.success) { $("#dg").datagrid('reload'); } else { $.message.show({ title: 'Error', msg: result.msg }); } }, 'json'); // $.ajax({ // url: "removeuser.ashx?id=" + row.id, // success: function(result) { // if (result == "success") { // $("#dg").datagrid('reload'); // } // } // }); } }); } else { $.messager.defaults = { ok: "确定", cancel: "取消" }; $.messager.alert('提示', '请选择数据行进行操作!'); } } </script> </head> <body> <div id="tool1"> <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> <table id="dg" title="My Users" class="easyui-datagrid" url="getuser.ashx" pageSize="10"pageList="[5, 10, 15]"style="width:700px;height:250px" toolbar="#tool1" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="id" width="50">ID号</th> <th field="firstname" width="50">姓</th> <th field="lastname" width="50">名</th> <th field="phone" width="50">手机</th> </tr> </thead> </table> <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> <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"> <div class="fitem"> <label>姓:</label> <input name="firstname" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>名:</label> <input name="lastname" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>手机:</label> <input name="phone"> </div> </form> </div> </body> </html>
查询一般处理程序代码：
public void ProcessRequest(HttpContext context) { int pagesize = Convert.ToInt32(context.Request["rows"]);//页行数 int pagenum = Convert.ToInt32(context.Request["page"]);//当前页 context.Response.ContentType = "text/plain"; int count = new kjcg.BLL.test11().GetCount();//查询总条数 var menu = "{\"total\":"+count+",\"rows\":["; int a = (pagenum - 1) * pagesize; int b = pagenum * pagesize + 1; List<kjcg.Model.test11> file = new kjcg.BLL.test11().GetList(a,b);//查询所有数据 for (int i = 0; i < file.Count; i++) { if(i!=file.Count-1){ menu+= "{\"id\":\""+file[i].id+"\",\"firstname\":\""+file[i].firstname.ToString()+"\",\"lastname\":\""+file[i].lastname.ToString()+"\",\"phone\":\""+file[i].phone+"\"},"; }else{ menu += "{\"id\":\"" + file[i].id + "\",\"firstname\":\"" + file[i].firstname.ToString() + "\",\"lastname\":\"" + file[i].lastname.ToString() + "\",\"phone\":\"" + file[i].phone + "\"}"; } } menu+="]}"; context.Response.Write(menu); }
注意这里返回的json格式 这个格式是带分页的json格式
我的分页查询sql是：
SELECT * FROM (SELECT ROW_NUMBER() OVER (ORDER BY id) ROWNUM,* FROM test11) TAB_TMP WHERE ROWNUM>" + a + " and ROWNUM < "+b
增加的一般处理程序代码：
View Code
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string firstname1= context.Request["firstname"].ToString(); string lastname1 = context.Request["lastname"].ToString(); string phone1 = context.Request["phone"].ToString(); kjcg.Model.test11 test=new kjcg.Model.test11 (); test.firstname = firstname1; test.lastname = lastname1; test.phone = phone1; try { new kjcg.BLL.test11().Add(test); context.Response.Write( "{\"success\":\"ture\"}"); } catch (Exception ex) { context.Response.Write( "{\"msg\":\"Some errors occured\"}"); } }
删除的一般处理程序代码：
View Code
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; int id = Convert.ToInt32(context.Request["id"].ToString()); context.Response.Write(del(id)); } public bool IsReusable { get { return false; } } public string del(int id) { try { new kjcg.BLL.test11().Delete(id); return "{\"success\":\"ture\"}"; } catch (Exception ex) { return "{\"msg\":\"Some errors occured\"}"; } }
修改的一般处理程序代码：
View Code
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string firstname1 = context.Request["firstname"].ToString(); string lastname1 = context.Request["lastname"].ToString(); string phone1 = context.Request["phone"].ToString(); int id = Convert.ToInt32( context.Request.QueryString["id"].ToString()); kjcg.Model.test11 test = new kjcg.Model.test11(); test.firstname = firstname1; test.lastname = lastname1; test.phone = phone1; test.id = id; try { new kjcg.BLL.test11().Update(test); context.Response.Write("{\"success\":\"ture\"}"); } catch (Exception ex) { context.Response.Write("{\"msg\":\"Some errors occured\"}"); } }