前台引入的是最近版本的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\"}"); } }