转自:http://www.cnblogs.com/lt-style/p/3457399.html

数据表:

学生表:学生编号、姓名、性别、班级编号、年龄

班级表:班级编号、班级名称

开发过程:

1.下载EasyUI的开发包

2.引用相关文件:

<link href="/CSS/easyui.css" rel="stylesheet" type="text/css" />
<link href="/CSS/demo.css" rel="stylesheet" type="text/css" />
<link href="/CSS/icon.css" rel="stylesheet" type="text/css" />
<script src="/Packages/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/Packages/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Packages/EditStuInfo.js" type="text/javascript"></script>
<script src="/Packages/easyui-lang-zh_CN.js" type="text/javascript"></script>

3.引用相关图片文件:

要注意的是Css文件中的图片路路径,如果是使用默认的路径,那么图片文件应该放在css所在文件的同级目录,如果是其它目录,则要修改css中的图片路径

4.建立表格、对话框、及按钮:

<!--Search Begin-->
根据班级查询学生信息:
<select id="classNum_Search"></select>&nbsp;&nbsp;
<a href="#" class="easyui-linkbutton" onclick="searchStuByClassNum()">查询</a>
<br />
<!--Search End--> <!--StuInfo_Table Begin-->
<table id="dg" title="学生信息管理" class="easyui-datagrid" style="width:700px;height:365px"
url="/ashx/StudentInfo.ashx?Action=Load"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="Id" width="50">ID</th>
<th field="StuNum" width="50">学生编号</th>
<th field="StuName" width="50">姓名</th>
<th field="ClasName" width="50">班级</th>
<th field="StuGender" width="50">性别</th>
<th field="StuAge" width="50">年龄</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>
<!--StuInfo_Table End--> <!--StuInfo_Dialog Begin-->
<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" novalidate action="">
<div class="fitem">
<label>学生编号:</label>
<input name="StuNum" class="easyui-validatebox"/>
</div>
<div class="fitem">
<label>姓名:</label>
<input name="StuName" class="easyui-validatebox" required="true"/>
</div>
<div class="fitem">
<label>班级:</label>
<select name="ClassNum" id="ClassNum" ></select>
</div>
<div class="fitem">
<label>性别:</label>
<input id="rdoMan" name="StuGender" type="radio" value="1" />男
<input id="rdoWuman" name="StuGender" type="radio" value="0" />女
</div>
<div class="fitem">
<label>年龄:</label>
<input name="StuAge" class="easyui-validatebox" required="true" />
</div>
</form>
</div>
<!--StuInfo_Dialog End--> <div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
</div>

5.对数据操作的JS代码:

var url;

//添加
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', '添加学生信息');
$('#fm').form('clear'); //获取最大的学生ID并加1
$.get("/ashx/StudentInfo.ashx?Action=GetMaxNum", function (data) {
$("#fm input[name='StuNum']").val(data).attr("readonly", "readonly");
}); //获取班级信息
$.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) {
$("#ClassNum").html("").append(data);
$("#ClassNum").eq(0).attr("selected", "selected");
}); //默认性别男被选中
$("#fm input[name='StuGender']").eq(0).attr("checked", "checked"); url = '/ashx/StudentInfo.ashx?Action=Save';
} //更新
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '编辑学生信息');
$('#fm').form('load', row); //获取和设置班级的状态
$.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) {
$("#ClassNum").html("").append(data);
$("#ClassNum option").each(function () {
if ($(this).text() == row.ClasName) {
$(this).attr("selected", "selected");
}
}); //.eq(0).attr("selected", "selected");
}); //获取和设置性别的选中状态
if (row.StuGender == "男") {
$("#fm input[name='StuGender']").eq(0).attr("checked", "checked");
}
else {
$("#fm input[name='StuGender']").eq(1).attr("checked", "checked");
}
url = '/ashx/StudentInfo.ashx?Action=Update&id=' + row.Id; }
} //保存
function saveUser() {
$('#fm').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
if (result == "False") {
$.messager.show({
title: '友情提示',
msg: 'Sorry, 出错了,请重试 :('
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
} //删除
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('友情提示', '确定要删除数据吗,删除后将无法找回?', function (r) {
if (r) {
$.post('/ashx/StudentInfo.ashx', { "Action": "Delete", "id": row.Id }, function (result) {
if (result == "True") {
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: '错误提示!',
msg: "服务器错误,请刷新重试 :("
});
}
});
}
});
}
} //根据班级查询学生信息
function searchStuByClassNum() {
var classNum = $("#classNum_Search").val();
$('#dg').datagrid({
url: "/ashx/StudentInfo.ashx?Action=SearchStu",
queryParams: { "classNum": classNum }
})
}; //加载班级信息到查询列表中
$(function () {
$.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) {
$("#classNum_Search").html("").append(data);
$("#classNum_Search option").eq(0).attr("selected", "selected");
});
})

6.后台数据处理文件 ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Text; namespace TestStuMS.Ashx
{
/// <summary>
/// StudentInfo 的摘要说明
/// </summary>
public class StudentInfo : IHttpHandler
{
public BLL.Students bllStu = new BLL.Students();
public BLL.StuClass bllClass = new BLL.StuClass(); public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; //获取请求的动作
string action = context.Request["Action"];
if (string.IsNullOrEmpty(action)) return; switch (action)
{
case "Save"://添加
context.Response.Write(AddStuInfo(context));
break;
case "Delete"://删除
context.Response.Write(DeleteStuInfo(context));
break;
case "Update"://更新
context.Response.Write(UpdateStuInfo(context));
break;
case "Load"://加载与分页
context.Response.Write(BuildPager(context));
break;
case "GetMaxNum"://获取新学生编号
context.Response.Write(GetMaxNum()+1);
break;
case "GetClassInfo"://获取班级信息
context.Response.Write(GetClassInfo(context));
break;
case "SearchStu"://根据班级获取学生信息
context.Response.Write(GetStuInfoByClassNum(context));
break;
} } #region 方法 //添加
private bool AddStuInfo(HttpContext context)
{
//stuNum:1201009
//stuName:星期三
//classNum:1201
//stuGender:男
//stuAge:20 Model.Students model= new Model.Students();
model.StuNum = int.Parse(context.Request["StuNum"]);
model.ClassNum = int.Parse(context.Request["ClassNum"]);
model.StuName = context.Request["StuName"];
model.StuGender = context.Request["StuGender"]=="1"?true:false;
model.StuAge = int.Parse(context.Request["StuAge"]); return bllStu.Add(model);//如果是成功则返回True否则返回False
} //更新
private bool UpdateStuInfo(HttpContext context)
{
Model.Students model = new Model.Students();
model.Id = int.Parse(context.Request["id"]);
model.StuNum = int.Parse(context.Request["StuNum"]);
model.ClassNum = int.Parse(context.Request["ClassNum"]);
model.StuName = context.Request["StuName"];
model.StuGender = context.Request["StuGender"] == "1" ? true : false;
model.StuAge = int.Parse(context.Request["StuAge"]); return bllStu.Update(model);
} //删除
private bool DeleteStuInfo(HttpContext context)
{
int Id = int.Parse(context.Request["id"]);
return bllStu.Delete(Id);
} //分页
private string BuildPager(HttpContext context)
{
int pageIndex = int.Parse(context.Request["page"]);
int pageSize = int.Parse(context.Request["rows"]); List<Model.Students> stuList = bllStu.GetModelList("");
List<Model.StuClass> classList = bllClass.GetModelList(""); //获取学生信息
var stuInfo = stuList.Join(classList,
s => s.ClassNum,
c => c.ClassNum,
(s, c) => new { s.Id, s.StuNum, s.StuName, c.ClasName, StuGender = s.StuGender == true ? "男" : "女", s.StuAge }
); //查询分页数据
var pageData = stuInfo.Where(s => s.Id > 0)
.OrderByDescending(s => s.Id)
.Skip((pageIndex-1) * pageSize)
.Take(pageSize).ToList(); var data = new { total = stuInfo.Count(), rows = pageData }; //序列化成JSON格式数据
System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer(); return jss.Serialize(data); } //获取班级信息
private string GetClassInfo(HttpContext context)
{
List< Model.StuClass> classList = bllClass.GetModelList("");
StringBuilder sb = new StringBuilder(); foreach (var stuClass in classList)
{
sb.Append("<option value='" + stuClass.ClassNum + "'>" + stuClass.ClasName + "</option>");
} return sb.ToString();
} //获取学生最大ID(以便新添加的ID保持唯一)
private int GetMaxNum()
{
return bllStu.GetMaxStuNum();
} //根据班级获取学生信息
private string GetStuInfoByClassNum(HttpContext context)
{
int classNum = int.Parse(context.Request["classNum"]); List<Model.Students> stuList = bllStu.GetModelList("ClassNum=" + classNum);
List<Model.StuClass> classList = bllClass.GetModelList(""); //根据班级获取学生信息
var stuInfo = stuList.Join(classList,
s => s.ClassNum,
c => c.ClassNum,
(s, c) => new {s.ClassNum, s.Id, s.StuNum, s.StuName, c.ClasName, StuGender = s.StuGender == true ? "男" : "女", s.StuAge }
).Where(i=>i.ClassNum==classNum); //序列化成JSON格式数据
System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer(); return jss.Serialize(stuInfo.ToList()); } #endregion public bool IsReusable
{
get
{
return false;
}
}
}
}

7.效果图:

ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!的更多相关文章

  1. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  2. EasyUI的增删查改(后台ASP.NET)

    转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...

  3. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  4. ASP.NET动态的网页增删查改

    动态页面的增删查改,不多说了,直接上代码 跟前面的一般处理程序一样我上用的同一套三层,只是UI层的东西不一样,在纠结着要不要重新在上一次以前上过的代码: 纠结来纠结去,最后我觉得还上上吧,毕竟不上为我 ...

  5. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  6. asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL

    效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...

  7. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  8. asp.net如何在前台利用jquery Ajax调用后台方法

    一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...

  9. easyui datagrid 批量编辑和提交数据

    easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...

随机推荐

  1. IAP (In-App Purchase)中文文档

    内容转自:http://yarin.blog.51cto.com/1130898/549141 一.In App Purchase概览 Store Kit代表App和App Store之间进行通信.程 ...

  2. use mkisofs 重新打包beini,tinycore linux

    mkisofs -r -J -V Beini-Custom -v --boot-info-table --boot-load-size 4 -b boot/isolinux/isolinux.bin ...

  3. PHP pear安装出现 Warning: require_once(Structures/Graph.php)...错误

    今天在WINDOWS安装pear,一路无阻很顺利安装完成,接着想安装下pear email包来玩下,但接下来却报: Warning: require_once(Structures/Graph.php ...

  4. identifier not found error on function call

    在C++工程中,自定义一个方法 void fgetsDemo(),在main 方法中调用,源代码如下: #include "stdafx.h" #include <stdio ...

  5. git revert all changes

    点击打开链接https://www.kernel.org/pub/software/scm/git/docs/git-reset.html # Revert changes to modified f ...

  6. Nginx(一)初始环境的安装(php5.3+mysql5.1+fastcgi…)

    关参考资源http://www.lnmp.org/index.html \\LNMP一键安装包http://www.howtocn.org/nginx \\Nginx模块参考手册中文版http://b ...

  7. hbuilder工具快捷键 http://www.qq210.com/shoutu/android

    http://www.qq210.com/shoutu/android 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)中途换行: ' ...

  8. float right 换行bug

    Bug产生原因:块里面有换行的元素. CSS: .left{float: left;width: 100px;background: #fff000;} .right{float: right;wid ...

  9. Building Python 2.7.10 with Visual Studio 2010 or 2015 - Google Chrome

    您的浏览器(Chrome 33) 需要更新.该浏览器有诸多安全漏洞,无法显示本网站的所有功能. 了解如何更新浏览器 × p-nand-q.com C++  Python  Programming  L ...

  10. cocos2d-x笔记5: 通过jni实现C++调用Java

    Cocos2d-x的跨平台性很强大,但是偶尔也需要平台的原生API结合. C++在Win32平台下简单的很,C++可以直接用MFC或者调用Win32API. Ios在XCode下直接就能C++和OC混 ...