前台界面：
<!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> <title>DataGrid教程</title> <script src="Scripts/jquery.min.js" type="text/javascript"></script> <script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script> <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script> <link rel="Stylesheet" type="text/css" href="Styles/themes/icon.css" /> <link rel="Stylesheet" type="text/css" href="Styles/themes/default/easyui.css" /> <script type="text/javascript"> $(document).ready( function () { $("#QuestionList").datagrid( { title: "問卷列表", url: "Handler.ashx", columns: [[ { field: "Id", title: "編號", width: "100" }, { field: "Title", title: "題目", width: "200" }, { field: "Remark", title: "備注", width: "200" } ]], rownumbers: true, //行號 singleSelect: false, //是否單選 pagination: true//分頁控件 } ); var p = $('#QuestionList').datagrid('getPager'); $(p).pagination({ pageSize: 10, //每頁顯示的記錄條數，默認為10 pageList: [10, 20, 50], //可以設置每頁記錄條數的列表 beforePageText: '第', //頁數文本框前顯示的漢字 afterPageText: '頁 共 {pages} 頁', displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄' }); //下面是針對easyui-dialog $("#QuestionInfo").dialog( { title: "問卷信息", width: '900', height: '600', iconCls: 'icon-edit', // href: 'QueationInfo.htm', modal: true, closed: true, buttons: [{ text: '保存', iconCls: 'icon-ok', handler: function () { $("#QInfo").form('submit', { url: url, onSubmit: function () { return $(this).form('validate'); }, success: function (result) { var result = eval('(' + result + ')'); if (result.errorMsg) { $.messager.show({ title: '錯誤信息', msg: result.errorMsg }); } else { $('#QuestionInfo').dialog('close'); $('#QuestionList').datagrid('reload'); } } }); } }, { text: '取消', iconCls: 'icon-cancel', handler: function () { $('#QuestionInfo').dialog('close'); } }] } ); } ); function Add() { $("#QuestionInfo").dialog("open"); url = 'Add.ashx?type=add'; } function edit() { var row = $('#QuestionList').datagrid('getSelected'); if (row) { $('#QuestionInfo').dialog('open').dialog('setTitle', '編輯'); $('#QInfo').form('load', row); url = 'Add.ashx?type=edit'; } else { alert('請選擇行'); } } function Del() { $.messager.confirm('確認', '你確認要刪除該記錄嗎？', function (r) { if (r) { var row = $('#QuestionList').datagrid('getSelected'); if (row) { url = 'Add.ashx?type=del&&Id=' + row.Id; // alert(url); // $.ajax({ // contentType: "application/json", // type: "post", // dataType: "json", // url: 'Add.ashx', // data: "{'type':'del','Id':" + row.Id + "}", // sucess: function (msg) { // alert('dd'); // } // }); $.post('Add.ashx?type=del', { Id: row.Id }, function (result) { if (result.status == 1) { $('#QuestionList').datagrid('reload'); } else { $.messager.alert('錯誤', result.msg, 'error'); } }, 'json' ); } else { alert('請選擇行'); } } }); } </script> </head> <body> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()"> 添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()"> 編輯</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Del()"> 刪除</a> </div> <table id="QuestionList"> </table> <div id="QuestionInfo"> <form id="QInfo" method="post"> <input type="hidden" name="Id" /> <p> 標題：<input id="Title" name="Title" /></p> <p> <!-- form取值針對的是name--> 備注：<input id="Remark" name="Remark" /></p> </form> </div> </body> </html>
處理頁：
1.得到List列表
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = ""; string Title = context.Request["page"]; string a = Title; if (a == "1") { IList<QuestionModel> Infos = new QuestionBLL().GetModelList(" id<10 "); result = JsonConvert.SerializeObject(Infos); } else { IList<QuestionModel> Infos = new QuestionBLL().GetModelList("id>9 and id<100 "); result = JsonConvert.SerializeObject(Infos); } //總記錄數total //構造json result = "{\"total\":100,\"rows\":"+result+"}"; context.Response.Write(result); }
2.增加修改刪除
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Wzh.BLL; using Wzh.Model; using System.Text; namespace Web { /// <summary> /// Add 的摘要說明 /// </summary> public class Add : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string type = context.Request["type"]; StringBuilder result = new StringBuilder(); if (type == "add") { int AddId = add(context); ; if (AddId == 0) { result.Append("{\"errorMsg\":\"添加失敗\"}"); } else { result.Append("{\"errorMsg\":false}"); } } else if(type=="edit") { int EditId = Edit(context); ; if (EditId == 0) { result.Append("{\"errorMsg\":\"編輯失敗\"}"); } else { result.Append("{\"errorMsg\":false}"); } } else if (type == "del") { if (!Del(Convert.ToInt32(context.Request["Id"]))) { result.Append("{\"sucess\":\"刪除失敗\"}"); } else { result.Append("{\"success\":true,\"status\":1}"); } } context.Response.Write(result.ToString()); } public int add(HttpContext context) { string Title = context.Request["Title"]; string Remark = context.Request["Remark"]; QuestionModel Model = new QuestionModel(); Model.Remark = Remark; Model.Title = Title; return new QuestionBLL().Add(Model); } public int Edit(HttpContext context) { int Id = 0; Id = Convert.ToInt32(context.Request["Id"]); string Title = context.Request["Title"]; string Remark = context.Request["Remark"]; QuestionModel Model = new QuestionModel(); Model.Remark = Remark; Model.Title = Title; Model.Id = Id; new QuestionBLL().Update(Model); return Id; } public bool Del(int Id) { return new QuestionBLL().Delete(Id); } public bool IsReusable { get { return false; } } } }