今天周四称,这应该给自己一个休息,好好休息休息,但无奈自己IT这是痴迷。甘心的想加加班把目标功能实现,功夫不负有心人。经过6个小时的鏖战,我最终成功了。

在此和大家分享下成果,希望大家给个赞。

我的目标效果:在页面载入时。table表显示后台数据表中的学生的信息;点击加入button。出现弹框,能够加入学生信息;选中某一学生记录后,点击改动button。出现弹框。能够对学生信息进行改动。选中某一学生记录后。点击删除button,便可删除该学生信息。效果图例如以下所看到的:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXV3ZW56aGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

目标效果有了,说说实现思路吧。

1.须要引入Easyui类库和相关的js:

<head>
<title></title>
<link href="css/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/icon.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>

2.画出显示数据的table表

//用于传递用户须要运行的操作
<input id="test" name="test" type="hidden">
<!--表格显示区-->
<table id="tt" " title="管理学生信息" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" iconcls="icon-save" remoteSort="false" data-options="rownumbers:true,
url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],
method:'get',toolbar:'#tb' ," fitcolumns= "true" striped="true" singleselect="true">
<thead>
<tr>
<th data-options="field:'serial',width:0" hidden="hidden"> 序号</th>
<th data-options="field:'id',width:100",sortable:"true">学号</th>
<th data-options="field:'name',width:100",sortable:"true">姓名</th>
</tr>
</thead>
</table>

3.画出加入、改动、删除三个button

 <!--加入、改动、删除按钮-->
<div id="tb">
<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>

4.画出点击加入、改动按钮后出现的弹框

<!--弹框-->
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>学号:</label>
<input id="id" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>姓名:</label>
<input id="name" class="easyui-validatebox" required="true">
</div>
</form>
</div>

到此页面的显示部分完毕,以下须要用Ajax建立Web页面和一般处理程序之间的交互

var url = "JSONData.ashx / ProcessRequest ";
//打开加入学生弹框
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', '加入学生'); //设定表头
$('#fm').form('clear'); //清空窗口数据
document.getElementById("test").value = "add"; //设定表示为后台调不同方法数据提供接口
}
//打开改动学生弹框
function editUser() {
$('#fm').form('clear');
var row = $('#tt').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '改动学生');
//绑定数据列表
$('#id').val(row.id);
$('#name').val(row.name);
document.getElementById("test").value = "modify"; //设定表示为后台调不同方法数据提供接口
$('#fm').form('load', row);
}
}
//保存信息
function saveUser() {
//获取页面中输入的值
var serial;
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var test = document.getElementById("test").value;
var row = $('#tt').datagrid('getSelected'); if (test == "modify") {
serial = row.serial;
} else {
serial == "";
} $('#fm').form('submit', {
//设定地址与传递參数到后台
url: "JSONData.ashx?id=" + id + "&name=" + name + "&test=" + test + "&serial=" + serial,
onSubmit: function () {
return $(this).form('validate');
},
//推断结果是否正确
success: function (result) {
if (result.indexOf("T") == 0) { alert('恭喜您。信息保存成功! ')
$('#dlg').dialog('close'); // 关闭窗口
$('#tt').datagrid('reload');
}
else {
alert('保存失败,请您核对!')
}
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg').dialog('close'); // close the dialog
$('#tt').datagrid('reload');
$.message.alert('提示', '保存成功!', 'info'); // reload the user data
} else {
//$.messager.show({
// title: 'Error',
// msg: result.msg
//});
}
}
});
}
//删除学生
function destroyUser() {
document.getElementById("test").value = "delete"; //设定表示为后台调不同方法数据提供接口
var test = document.getElementById("test").value;
var row = $('#tt').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '你确定要删除这条信息吗?', function (r) {
if (r) {
$('#fm').form('submit', {
url: "JSONData.ashx?serial=" + row.serial + "&test=" + test,
onSubmit: function () {
},
//推断结果是否正确
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
alert('恭喜您,信息删除成功! ')
$('#tt').datagrid('reload');
}
else {
alert('加入失败,请又一次操作。')
}
var result = eval('(' + result + ')');
}
});
}
});
}
}

通过JS代码。我们能够发现。Ajax获取用户的数据,将其提交到一般处理程序JSONData.ashx中进行处理。并用回调函数获取一般处理程序的运行结果,JSONData.ashx代码例如以下:

  StudentDAL studentDAL = new StudentDAL();
public void ProcessRequest(HttpContext context)//context中包括前台与后台来回传递的值
{
//推断前台请求的是增删改查的哪一个
string command = context.Request.QueryString["test"];//前台传的标示值
if (command == "add")
{
//调用加入方法
Add(context);
}
else if (command == "delete")
{//调用删除方法
Delete(context);
}
else if (command == "modify")
{//调用改动方法
Modify(context);
}
else
{//调用查询方法
Query(context);
}
} #region 加入记录
/// <summary>
/// 加入记录
/// </summary>
/// <param name="context"></param>
public void Add(HttpContext context)
{
StudentEntity student = new StudentEntity();
student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);
student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);
try
{
if (studentDAL.Add(student))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{ }
}
#endregion #region 改动记录
/// <summary>
/// 改动记录
/// </summary>
/// <param name="context"></param>
public void Modify(HttpContext context)
{
StudentEntity student = new StudentEntity();
student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);
student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);
student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);
try
{
if (studentDAL.Update(student))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{ }
}
#endregion #region 删除记录
/// <summary>
/// 删除记录
/// </summary>
/// <param name="context"></param>
public void Delete(HttpContext context)
{
StudentEntity student = new StudentEntity();
student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);
try
{
if (studentDAL.Delete(student))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{ }
}
#endregion #region 查询记录
/// <summary>
/// 查询记录
/// </summary>
/// <param name="context"></param>
public void Query(HttpContext context)
{ context.Response.ContentType = "text/plain"; //调用分页的GetList方法
DataSet ds = studentDAL.Query(); string strJson = ToJson.Dataset2Json(ds, -1);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End(); }
#endregion

在将数据表中的数据绑定到页面中的table时,因为后台返回的结果是DataSet或DataTable类型,所以须要一个方法将DataSet或DataTable转换为JSON类型,强大的ToJson类就完毕了上述任务:

public class ToJson
{ #region DataSet转换成Json格式
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <param name="ds">DataSet</param>
/// <returns></returns>
public static string Dataset2Json(DataSet ds, int total = -1)
{
StringBuilder json = new StringBuilder(); foreach (DataTable dt in ds.Tables)
{
//{"total":5,"rows":[
json.Append("{\"total\":");
if (total == -1)
{
json.Append(dt.Rows.Count);
}
else
{
json.Append(total);
}
json.Append(",\"rows\":[");
json.Append(DataTable2Json(dt));
json.Append("]}");
} return json.ToString();
}
#endregion #region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string DataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder(); for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
if (dt.Columns.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
} return jsonBuilder.ToString();
}
#endregion dataTable转换成Json格式
}

至此,核心代码都已经实现,剩下的就是一个学生实体--StudentEntity。一个訪问T_Student表的StudentDAL类,它们和我们平时訪问数据库的方法一样,在此不再赘述。

    这样。我们轻松的完毕了对数据表T_Studnet进行CRUD的操作。基本功能尽管已经实现,但Easyui的好多扩展功能还需继续了解,比方在数据显示时,能够设置每页有多少条数据。数据按什么方式进行排序、组合查询等功能。

这个Demo大大添加了我学习Easyui的信心,本以为得一周才干完毕的功能,没想到两天搞定,小小得瑟一下。

和Easyui类似的还有extjs。它们都能画出非常妙的页面图。仅仅只是Easyui是JQuery的框架。extjs是Ajax的框架。

假设大家想练练手,能够把我做好的Demo下载下来,看看我的代码有什么不知之处,欢迎大神拍砖,源代码下载地址:http://pan.baidu.com/s/1o6Cz4Qe。

好了。今天先到这吧,韩义打电话来让我们回家包饺子去了,关于Easyui的学习,咱们改日再谈。

版权声明:本文博客原创文章,博客,未经同意,不得转载。

Asp.Net+Easyui实现重大CRUD的更多相关文章

  1. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-03

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-03 我们期望简洁的后台代码,如下: using System; using System.Collections.Gener ...

  2. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-02 我们期望简洁带前台代码,如下: <table id="dataGrid" class=&quo ...

  3. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-01

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-01 要搭建的框架是企业级开发框架,适用用企业管理信息系统的开发,如:OA.HR等 1.框架名称:sampleFrame. 2 ...

  4. 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  5. 毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(一)

    开篇介绍关于EasyUI技术,界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控件有:单行文本框.多行文本框.密码文本框.下拉列表Combobo ...

  6. Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...

  7. Asp.Net Web API 2(CRUD操作)第二课

    Asp.Net Web API 2(CRUD操作)第二课 Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok ...

  8. 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

  9. 在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了?

    在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...

随机推荐

  1. Android Stuido怎样查看快捷键冲突?

    看了这篇文章Android Studio怎样查看资源或者函数在哪些类中被引用.知道了快捷键失效的原因,当中有一个原因就是快捷键冲突.那怎样查看快捷键哪些项冲突了呢? Android Studio要查看 ...

  2. 构造函数为什么不能为虚函数 &amp; 基类的析构函数为什么要为虚函数

    一.构造函数为什么不能为虚函数 1. 从存储空间角度,虚函数相应一个指向vtable虚函数表的指针,这大家都知道,但是这个指向vtable的指针事实上是存储在对象的内存空间的.问题出来了,假设构造函数 ...

  3. poj 3237 Tree(树链拆分)

    题目链接:poj 3237 Tree 题目大意:给定一棵树,三种操作: CHANGE i v:将i节点权值变为v NEGATE a b:将ab路径上全部节点的权值变为相反数 QUERY a b:查询a ...

  4. Cocos2d-x3.0游戏实例《不要救我》第十篇(结束)——使用Json配置数据类型的怪物

    如今我们有2种类型的怪物,并且创建的时候是写死在代码里的,这是要作死的节奏~ 所以.必须可配置.不然会累死人的. ; i < size; ++i) { int id = root[i][&quo ...

  5. SPOJ 15. The Shortest Path 堆优化Dijsktra

    You are given a list of cities. Each direct connection between two cities has its transportation cos ...

  6. gradle--java入门(转)

    7.3.3 项目之间的依赖性 您可以添加项目之间的依赖性在相同的构建,所以,例如,这个一个项目的JAR文件是用来编译另一个项目,在api构建文件我们将添加一个依赖JAR产生的共享项目.由于这种依赖性, ...

  7. BZOJ 3122 SDOI2013 随机数发生器 数论 EXBSGS

    标题效果:给定一列数X(i+1)=(a*Xi+b)%p 最低要求i>0.所以Xi=t 0.0 这个问题可以1A那很棒 首先讨论特殊情况 如果X1=t ans=1 如果a=0 ans=b==t? ...

  8. Android数据加载和Json解析——蓝本

    1.下载数据来创建一个实体类 class MyData { String imagepath; String title; String desc; public MyData(String imag ...

  9. Oracle 数据库 JOB 失败后解密法重试

    因为官方文档上没有找到相关的说明,所以这里进行了例如以下測试,为了找到oracle数据库中 job 失败后重试时间的规律. 数据库版本号:11.2.0.3 測试说明:这里创建了一个日志表以及一个执行时 ...

  10. [SignalR]Groups操作

    原文:[SignalR]Groups操作 SignalR提供了Groups进行小范围的消息广播.可以通过Add和Remove两个方法进行群组成员操作.并不需要创建Groups,在Add的时候会自动创建 ...