【Jqurey EasyUI+Asp.net】----DataGrid数据绑定，以及增、删、改(SQL)
也懒得打其他字了，直接进入主题吧
1.首先，数据表Rex_Test
| ID |
int |
自增 |
| tName |
varchar(10) |
姓名 |
| tEmail |
varchar(80) |
邮箱 |
2.至于代码里的Jqurey EasyUI包就直接去官网下载吧。当然其他地方也行，这里就不多做说明了。
3.前台显示页面
Default.aspx
<span style="font-size:14px;"><head>
<title>myWeb</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body >
<table id="dg" class="easyui-datagrid" style="width: 700px; height: 300px" data-options="rownumbers:true,onClickRow:ClickRow,singleSelect:true,border:false,pagination:true,url:'Handler3.ashx'">
<thead>
<tr>
<th data-options="field:'ID',width:100">
ID
</th>
<th data-options="field:'tName',width:100">
姓名
</th>
<th data-options="field:'tEmail',width:100">
邮箱
</th>
</tr>
</thead>
</table>
<div id="Div1" class="easyui-panel" title="form Fields" style="width: 1000px; height: 180px;
float: left;">
<table>
<tr>
<td>
姓名:
</td>
<td>
<input id="n" class="easyui-validatebox" type="text" name="name" data-options="required:true" />
</td>
</tr>
<tr>
<td>
邮箱:
</td>
<td>
<input id="pr" class="easyui-validatebox" type="text" name="price" data-options="required:true" />
</td>
</tr>
<tr>
<td>
查询：
</td>
<td>
<input id="sear" class="easyui-validatebox" type="text" name="price" data-options="required:true" />
</td>
</tr>
<tr>
<td>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add()">
Add</a>
</td>
<td>
<a href="#r" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="refresh()">Refresh</a>
<a href="#r" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="del()">Delete</a> </td>
</tr>
</table>
</div>
<ul id="tt" class="easyui-tree">
</ul>
<script type="text/javascript"> $(document).ready(function ()
{
$.ajax({
url: "Handler3.ashx",
type: "get",
dataType: "json",
error: function (request, message, ex)
{
alert(message + request + ex);
},
success: function (returnValue)
{ $("#tt").tree("loadData", returnValue);
}
})
}); function searchs()
{
$.ajax({
url: "refresh.ashx",
type: "post",
data: "fac=" + $("#sear").val(),
// data: "olditemid=" + $("#dg").datagrid("getSelected").ItemID + "&itemid=" + $("#ii").val(),
error: function (request, message, ex)
{
alert(message + request + ex);
},
success: function (returnValue)
{
alert(returnValue);
$('#dg').datagrid('reload');
}
})
} function add()
{
$.ajax({
url: "add.ashx",
type: "get",
data: "name=" + $("#n").val() + "&email=" + $("#pr").val(),
error: function (request, message, ex)
{
alert(message + request + ex);
},
success: function (returnValue)
{ alert(returnValue);
$('#dg').datagrid('reload'); }
})
}
function del()
{
$.ajax({
url: "del.ashx",
type: "get",
data: "id=" + $("#dg").datagrid("getSelected").ID,
error: function (request, message, ex)
{
alert(message + request + ex);
},
success: function (returnValue)
{
//
alert(returnValue);
$('#dg').datagrid('reload'); }
}) } function ClickRow(rowIndex, rowData)
{
// alert('这是Name:' + rowData.Name + '这个是ID:' + rowData.ID);
if (rowData) { //document.getElementById("ii").value = rowData.ID;
document.getElementById("n").value = rowData.tName;
document.getElementById("pr").value = rowData.tEmail;
}
} function refresh()
{
$.ajax({
url: "refresh.ashx",
type: "get",
data: "id=" + $("#dg").datagrid("getSelected").ID + "&name=" + $("#n").val() + "&email=" + $("#pr").val(),
// data: "olditemid=" + $("#dg").datagrid("getSelected").ItemID + "&itemid=" + $("#ii").val(),
error: function (request, message, ex)
{
alert(message + request + ex);
},
success: function (returnValue)
{
alert(returnValue);
$('#dg').datagrid('reload');
}
})
}
</script>
</body>
</html></span>
4. Handler3.ashx（初始绑定）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="Handler3" %> using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.IO; public class Handler3 : IHttpHandler { public void ProcessRequest(HttpContext context)
{ Query(context); }
public void Query(HttpContext context)
{
//调用B层的方法从而获取数据库的Dataset
SqlHelp sqla = new SqlHelp();
string strfaca = "select * from Rex_Test";
DataSet ds = sqla.GetDataSet(strfaca);
//将Dataset转化为Datable
DataTable dt = ds.Tables[0];
int count = dt.Rows.Count;
string strJson = Dataset2Json(ds, count);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End(); }
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <paramname="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();
} /// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <paramname="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();
}
public bool IsReusable
{
get
{
return false;
}
} }</span>
5.add.ashx（新增数据）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="add" %> using System;
using System.Web; public class add : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; string result = string.Empty;
string name = context.Request.QueryString["name"];
string email = context.Request.QueryString["email"]; SqlHelp sqla = new SqlHelp();
string sqlString = "insert into Rex_Test(tName,tEmail) values('"+name+"','"+email+"')";
bool aa = sqla.ExecuteNonQuery(sqlString);
sqla.SqlClose();
if (aa)
{
result = "加入纪录成功";
}
context.Response.Write(result); } public bool IsReusable
{
get
{
return false;
}
} }</span>
6.del.ashx（删除数据）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="del" %> using System;
using System.Web; public class del : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; string result = string.Empty;
string id = context.Request.QueryString["id"]; SqlHelp sqla = new SqlHelp();
string sqlString = "delete from Rex_Test where ID='" + id + "'";
bool aa = sqla.ExecuteNonQuery(sqlString);
sqla.SqlClose();
if (aa)
{
result = "删除成功";
}
context.Response.Write(result); } public bool IsReusable
{
get
{
return false;
}
} }</span>
7.refresh.ashx（更新数据）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="refresh" %> using System;
using System.Web; public class refresh : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; string result = string.Empty;
string id = context.Request.QueryString["id"];
string name = context.Request.QueryString["name"];
string email = context.Request.QueryString["email"]; SqlHelp sqla = new SqlHelp();
string sqlString = "update Rex_Test set tName='"+name+"',tEmail='"+email+"' where ID='" + id + "'";
bool aa = sqla.ExecuteNonQuery(sqlString);
sqla.SqlClose();
if (aa)
{
result = "更新成功";
}
context.Response.Write(result); } public bool IsReusable
{
get
{
return false;
}
} }</span>
8.基本上这个样子就差点儿相同了。更加细化的东西还没来得及做，下次弄好了才发吧。
哦。对了，代码里的SqlHelp sqla = new SqlHelp();事实上就是个sql操作类，自己写的，网上有非常多这样的的SqlHelper。这个我就不贴出来了吧。
【Jqurey EasyUI+Asp.net】----DataGrid数据绑定，以及增、删、改(SQL)的更多相关文章
- 第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据
第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据 ADO.NET 为什么要学习? 我们要搭建一个平台(Web/Winform ...
- C# ADO.NET (sql语句连接方式)(增,删,改)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 好用的SQL TVP~~独家赠送[增-删-改-查]的例子
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...
- iOS FMDB的使用(增,删,改,查,sqlite存取图片)
iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...
- iOS sqlite3 的基本使用(增 删 改 查)
iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...
- ADO.NET 增 删 改 查
ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...
- MVC EF 增 删 改 查
using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- StringBuilder修改字符串内容，增,删,改,插
package seday01;/** * 字符串不变对象特性只针对字符串重用,并没有考虑修改操作的性能.因此String不适合频繁修改内容. * 若有频繁修改操作,使用StringBuilder来完 ...
随机推荐
- Python 模块和包的概念
模块&包(* * * * *) 模块(modue)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函 ...
- Hi3519V101 SDK安装以及开发环境搭建
Hi3519V101 Linux开发环境 1.安装Hi3519V101 SDKHi3519V101 SDK是基于Hi3519V101 DMEB的软件开发包,包含了在Linux相关应用开发时使用的各种工 ...
- 【UOJ#51】【UR #4】元旦三侠的游戏（博弈论）
[UOJ#51][UR #4]元旦三侠的游戏(博弈论) 题面 UOJ 题解 考虑暴力,\(sg[a][b]\)记录\(sg\)函数值,显然可以从\(sg[a+1][b]\)和\(sg[a][b+1]\ ...
- 爬虫开发python工具包介绍 （4）
本文来自网易云社区 作者:王涛 此处我们给出几个常用的代码例子,包括get,post(json,表单),带证书访问:Get 请求 @gen.coroutine def fetch_url(): ...
- Python算法-二叉树深度优先遍历
二叉树 组成: 1.根节点 BinaryTree:root 2.每一个节点,都有左子节点和右子节点(可以为空) TreeNode:value.left.right 二叉树的遍历: 遍历二叉树:深度 ...
- enq: TX - row lock contention“等待事件的处理
enq: TX - row lock contention“等待事件的处理 session1: SQL> conn scott/triger Connected. SQL> CRE ...
- c++ stack,queue,vector基本操作
stack 的基本操作有:入栈,如例:s.push(x);出栈,如例:s.pop();注意,出栈操作只是删除栈顶元素,并不返回该元素.访问栈顶,如例:s.top()判断栈空,如例:s.empty(), ...
- python 列表 字符串 转换
列表转字符串python中的列表l = ['1','2','3','4']转成str型'1,2,3,4'','.join(l)这个方法,列表里都是字符串的话可以这样用.列表里是整数的情况可以用: &g ...
- SPOJ GSS5 Can you answer these queries V ——线段树
[题目分析] GSS1上增加区间左右端点的限制. 直接分类讨论就好了. [代码] #include <cstdio> #include <cstring> #include & ...
- 算法复习——数位dp（不要62HUD2089）
题目 题目描述 杭州人称那些傻乎乎粘嗒嗒的人为 62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司 ...