【Jqurey EasyUI+Asp.net】---DataGrid增加、删、更改、搜
在前面写了两，但不知道如何完成，对比刚刚开始学这个，他们摸着石头过河，一步步。在最后两天DataGridCRUD融合在一起。因此份额。我希望像我这样谁是刚刚开始学习一些帮助。
直接主题酒吧。
它是说数据表，我建立了一个非常easy的表Rex_Test
| ID | 自增序号 |
| tName | 姓名 |
| tEmail | 邮箱 |
前台代码：
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> <!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 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>
<script type="text/javascript">
function getQueryParams(queryParams)
{ var tkey = document.getElementById("tkey").value;
//alert(tkey);
//$("#quanxian").combobox("getValue"); queryParams.tkey = tkey; return queryParams; }
//添加查询參数，又一次载入表格
function reloadgrid()
{ //查询參数直接加入在queryParams中
var queryParams = $('#tt').datagrid('options').queryParams;
getQueryParams(queryParams);
$('#tt').datagrid('options').queryParams = queryParams;
$("#tt").datagrid('reload'); }
function add()
{
//清空内容
$('#fm').form('clear'); $('#dlg').dialog('open').dialog('setTitle', '加入邮箱');
document.getElementById("test").value = "add";
} //改动
function editUser()
{ var row = $('#tt').datagrid('getSelected'); if (row == null) {
$.messager.alert("提示", "请选择要改动的行！", "info");
} if (row) { //获取要改动的字段
$('#tName').val(row.tName);
$('#tEmail').val(row.tEmail); $('#dlg').dialog('open').dialog('setTitle', '改动邮箱');
document.getElementById("test").value = "modify";
$('#fm').form('load', row); }
}
function removeUser()
{
var test = document.getElementById("test").value = "delete";
var row = $('#tt').datagrid('getSelected');
if (row == null) {
$.messager.alert("提示", "请选择要删除的行！ ", "info");
}
if (row) {
$.messager.confirm('提示', '你确定要删除这条信息吗？', function (r)
{
if (r) {
$('#fm').form('submit', {
url: 'Handler5.ashx/ProcessRequest? ID=' + row.ID + "&test=" + test,
onSubmit: function ()
{
//return $(this).form('validate');
},
success: function (result)
{
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
//$('#tt').datagrid('clearSelections'); //清空选中的行
$.messager.alert("提示", "恭喜您。信息删除成功！ ", "info");
//alert('恭喜您，信息删除成功！')
// close the dialog
$('#tt').datagrid('reload');
//$('#fm').form('submit'); }
else {
$.messager.alert("提示", "删除失败，请又一次操作！", "info");
//alert('加入失败，请又一次操作！ ')
return;
//$('#fm').form('submit');
} } });
}
})
}
}
function saveUser() { var tName = document.getElementById("tName").value;
var tEmail = document.getElementById("tEmail").value;
//alert(tName + "<br/>" + tEmail);
var test = document.getElementById("test").value;
if (test == "add") {
$('#fm').form('submit', {
url: "Handler5.ashx?test=" + test + "&tName=" + tName + "&tEmail=" + tEmail,
onSubmit: function ()
{
return $(this).form('validate');
},
success: function (result)
{
//alert(result);
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
$.messager.alert("提示", "恭喜您，信息加入成功", "info");
//alert('恭喜您，信息加入成功！ ')
// close the dialog
$('#tt').datagrid('reload');
//$('#fm').form('submit');
}
else {
$.messager.alert("提示", "加入失败，请又一次操作！ ", "info");
return;
//alert('加入失败，请又一次操作！')
}
}
}); }
else {
var row = $('#tt').datagrid('getSelected');
if (row) {
//获取要改动的字段
var ID = row.ID;
//alert(ID);
}
$('#fm').form('submit', {
url: "Handler5.ashx? test=" + test + "&ID=" + ID + "&tName=" + tName + "&tEmail=" + tEmail,
onSubmit: function ()
{
return $(this).form('validate');
},
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
//$('#tt').datagrid('clearSelections'); //清空选中的行
$.messager.alert("提示", "恭喜您，信息改动成功", "info");
//alert('恭喜您，信息加入成功。')
// close the dialog
$('#tt').datagrid('reload');
//$('#fm').form('submit');
}
else {
$.messager.alert("提示", "改动失败。请又一次操作。", "info");
return;
//alert('加入失败。请又一次操作。')
}
}
});
}
}
</script>
</head>
<body>
<form id="fm" method="post">
<div>
<%--表格显示区--%>
<table id="tt" title="设置" class="easyui-datagrid" style="width: auto; height: 660px;"
idField="ID" pagination="true" data-options="iconCls:'icon-save',rownumbers:true,url:'Handler5.ashx/ProcessRequest',pageSize:20, pageList:[20,30,40,50],method:'post',toolbar:'#tb',striped:true"
fitcolumns="true">
<%--striped="true"--%>
<%-- 表格标题--%>
<thead>
<tr>
<th data-options="field:'ID',checkbox:true">
</th>
<th data-options="field:'tName',width:100">
姓名
</th>
<th data-options="field:'tEmail',width:320,align:'center'">
邮箱
</th>
</tr>
</thead>
<%--表格内容--%>
</table>
<%--功能区--%>
<div id="tb" style="padding: 5px; height: auto">
<%-- 包含加入，改动、删除 --%>
<div style="margin-bottom: 5px">
<a href="javascript:void(0)" onclick="add()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
<a href="javascript:void(0)" onclick="editUser() " class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
<a href="javascript:void(0)" onclick="removeUser()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
</div>
<%-- 查找信息 --%>
<div>
姓名:
<input id="tkey" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="reloadgrid()">
Search</a>
</div>
</div>
<div id="dlg" class="easyui-dialog" style="width: 400px; height: auto; padding: 10px 20px"
data-options="closed:true,buttons:'#dlg-buttons'">
<%--closed="true" buttons="#dlg-buttons"--%>
<div class="ftitle">
邮箱信息</div> <div class="fitem">
<label>
姓名：</label>
<input id="tName" name="tName" class="easyui-validatebox" data-options="required:true" />
</div>
<div class="fitem">
<label>
邮箱：</label>
<input id="tEmail" name="tEmail" class="easyui-validatebox" data-options="required:true" />
<input name="Test" id="test" type="hidden" />
<input name="ID" id="ID" type="hidden" />
<input id="key" name="key" onkeydown="if(event.keyCode==13)reloadgrid()" type="hidden" />
</div> </div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="saveUser()">
保存</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
onclick="javascript:$('#dlg').dialog('close')">关闭</a>
</div>
</div>
</form>
</body>
</html>
然后这里就是一般处理程序
Handler5.ashx
<%@ WebHandler Language="C#" Class="Handler5" %> using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Text; public class Handler5 : IHttpHandler { public void ProcessRequest(HttpContext context)
{ string command = context.Request.QueryString["test"];//前台传的标示值
if (command == "add")
{//调用加入方法
Add(context);
}
else if (command == "modify")
{//调用改动方法
Modify(context);
}
else if (command == "delete")
{
Delete(context);
}
else
{
Query(context);
}
//Query(context); } public bool IsReusable
{
get
{
return false;
}
} public void Add(HttpContext context)
{
context.Response.ContentType = "text/plain";
string xx = string.Empty; string tname = context.Request.QueryString["tName"];
string temail = context.Request.QueryString["tEmail"];
SqlHelp sqla = new SqlHelp();
string sqlString = "insert into Rex_Test(tName,tEmail) values('" + tname + "','" + temail + "')";
bool aa= sqla.ExecuteNonQuery(sqlString);
sqla.SqlClose();
if (aa)
{
xx = "True";
}
else
{
xx="False";
}
context.Response.Write(xx);
}
public void Modify(HttpContext context)
{
context.Response.ContentType = "text/plain";
string yy = string.Empty;
string id = context.Request.QueryString["ID"];
string tname = context.Request.QueryString["tName"];
string temail = context.Request.QueryString["tEmail"];
SqlHelp sqlb = new SqlHelp();
string sqlString = "update Rex_Test set tName='"+tname+"',tEmail='"+temail+"' where ID='"+id+"'";
bool bb= sqlb.ExecuteNonQuery(sqlString);
sqlb.SqlClose();
if (bb)
{
yy = "True";
}
else
{
yy = "False";
}
context.Response.Write(yy);
}
public void Delete(HttpContext context)
{
context.Response.ContentType = "text/plain"; string zz = string.Empty;
string id=context.Request.QueryString["ID"]; SqlHelp sqlc = new SqlHelp();
string strfacc = "delete from Rex_Test where ID='"+id+"'";
sqlc.ExecuteNonQuery(strfacc);
sqlc.SqlClose();
context.Response.Write("True"); }
/// <summary>
/// 查询记录
/// </summary>
/// <param name="context"></param>
public void Query(HttpContext context)
{ context.Response.ContentType = "text/plain";
//=============================================================== string tkey;
tkey = "";
//获取前台传来的值
if (null != context.Request.QueryString["tkey"])
{//获取前台传来的值
tkey = context.Request.QueryString["tkey"].ToString().Trim();
} //================================================================
//获取分页和排序信息：页大小，页码，排序方式。排序字段
int pageRows, page;
pageRows = 10;
page = 1;
string order, sort, oderby; order = sort = oderby = "";
if (null != context.Request.QueryString["rows"])
{
pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim()); }
if (null != context.Request.QueryString["page"])
{ page = int.Parse(context.Request.QueryString["page"].ToString().Trim()); }
if (null != context.Request.QueryString["sort"])
{ order = context.Request.QueryString["sort"].ToString().Trim(); }
if (null != context.Request.QueryString["order"])
{ sort = context.Request.QueryString["order"].ToString().Trim(); } //===================================================================
//组合查询语句：条件+排序
StringBuilder strWhere = new StringBuilder();
if (tkey != "")
{
strWhere.AppendFormat("tName like '%{0}%' and ", tkey);
} //删除多余的and
int startindex = strWhere.ToString().LastIndexOf("and");//获取最后一个and的位置
if (startindex >= 0)
{
strWhere.Remove(startindex, 3);//删除多余的andkeyword
}
if (sort != "" && order != "")
{
//strWhere.AppendFormat(" order by {0} {1}", sort, order);//加入排序
oderby = order + " " + sort;
}
//DataSet ds = Bnotice.GetList(strWhere.ToString()); //调用不分页的getlist //调用分页的GetList方法
DataSet ds = GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
int count = GetRecordCount(strWhere.ToString());//获取条数
string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End(); }
public int GetRecordCount(string strWhere)
{
SqlHelp sqlx = new SqlHelp();
StringBuilder strSql = new StringBuilder();
strSql.Append("select count(1) FROM Rex_Test");
if (strWhere.Trim() != "")
{
strSql.Append(" where " + strWhere);
}
int obj = sqlx.ReturnCount(strSql.ToString());
sqlx.SqlClose();
if (obj<=0)
{
return 0;
}
else
{
return Convert.ToInt32(obj);
}
}
/// <summary>
/// 分页获取数据列表
/// </summary>
public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
{
SqlHelp sqly = new SqlHelp();
try
{ StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT * FROM ( ");
strSql.Append(" SELECT ROW_NUMBER() OVER (");
if (!string.IsNullOrEmpty(orderby.Trim()))
{
strSql.Append("order by T." + orderby);
}
else
{
strSql.Append("order by ID asc");
}
strSql.Append(")AS Row, T.* from Rex_Test T ");
if (!string.IsNullOrEmpty(strWhere.Trim()))
{
strSql.Append(" WHERE " + strWhere);
}
strSql.Append(" ) TT");
strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
return sqly.GetDataSet(strSql.ToString());
}
finally { sqly.SqlClose(); }
} }
最有另一个Json转换类
ToJson.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.IO; /// <summary>
///ToJson 的摘要说明
/// </summary>
public class ToJson
{ /// <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();
} }
通过以上几步，基本上能够实现DataGrid的增删改查，其他功能还在学习中。请多多不吝赐教。
哦，对了，我发现这个Jqurey EasyUI DataGrid的一些功能，比方刷新、分页这些在IE11下。不怎么兼容样。假设有知道解决方法的朋友，希望能够留言。给大家分享一下，谢了。
近期有点时间。又来研究了一下这个问题。最终找到了问题所在，原来是method:'get'这里须要改为method:'post'，
这样子改动后。每次操作完毕又一次绑定数据后，就会又一次刷新了。
它似乎还有意向啊。
版权声明：本文博主原创文章，博客，未经同意不得转载。
【Jqurey EasyUI+Asp.net】---DataGrid增加、删、更改、搜的更多相关文章
- 【Jqurey EasyUI+Asp.net】----DataGrid数据绑定，以及增、删、改(SQL)
也懒得打其他字了,直接进入主题吧 1.首先,数据表Rex_Test ID int 自增 tName varchar(10) 姓名 tEmail varchar(80) 邮箱 2.至于代码里的Jqure ...
- jQuery EasyUI教程之datagrid应用（二）
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...
- jQuery EasyUI教程之datagrid应用（三）
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
- jQuery EasyUI教程之datagrid应用（一）
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- Easyui + asp.net MVC 系列教程 完成登录
Easyui + asp.net MVC 系列教程 第09-17 节 完成登录 高清录制 前面八节 在这里 Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 在接下 ...
- Easyui + asp.net mvc + sqlite 开发教程（录屏）适合入门
Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 第一节: 前言(技术简介) EasyUI 是一套 js的前端框架 利用它可以快速的开发出好看的 前端系统 web ...
- easyUI中点击datagrid列标题排序
easyUI中点击datagrid的排序有两种,一种是本地的,一种是服务器的.本地的只能排序当前页,而服务器的可以对全部页进行排序.这里主要是分享下服务器排序. 1.为datagrid添加属性remo ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Easyui + asp.net MVC 系列教程 第19-23 节 完成注销 登录限制过滤 添加用户
前面视频 文章地址 Easyui + asp.net MVC 系列教程 第09-17 节 完成登录 高清录制 Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 ...
随机推荐
- Java按钮设计
package com.han; import javafx.application.Application; import javafx.geometry.Insets; import javafx ...
- OpenRisc-50-or1200的freeze模块分析
引言 之前,我们分析or1200的控制通路中的sprs模块和except模块,本小节,我们就分析一下or1200控制通路的最后一个模块,就是freeze模块. 1,整体分析 freeze模块,顾名思义 ...
- 快速学会搭建SVN服务器
原文:快速学会搭建SVN服务器 SVN是一个版本控制工具,常用于我们软件开发项目中,用来管理我们团队共同使用的代码,文档等历史版本的管理,保持代码的更新,避免混乱. 需要工具: svn安装程序:免费下 ...
- OCP读书笔记(8) - 监控和调优RMAN
监视RMAN作业 1. 创建rman备份: RMAN> run { allocate channel ch1 type disk; allocate channel ch2 type disk; ...
- Linux段管理，BSS段，data段，.rodata段，text段
近期在解决一个编译问题时,一直在考虑一个问题,那就是Linux下可执行程序执行时内存是什么状态,是依照什么方式分配内存并执行的.查看了一下资料.就此总结一下,众所周知.linux下内存管理是通过虚存管 ...
- OpenStack25
OpenStack(25) API 前端服务 每个 OpenStack 组件可能包含若干子服务,其中必定有一个 API 服务负责接收客户请求. 以 Nova 为例,nova-api 作为 Nova 组 ...
- 使用 JQueryMobile 点击超链接提示“error loading page” 错误
使用jquery mobile创建dialog时出现加载错误,“Error Loading Page”. 原因是:jquery mobile页面默认采用ajax方式进行交互,而ajax方式下是不支持f ...
- 【Swift】—— 中国课程
Apple宣布更换oc武器语言 Swift ,在牛叉的中国开发者社区9几天之内,以完成.这是福音许多中国的开发商啊,兴奋的发现之后,写存储在日志,马上防止忘记: GitHub开源项目:<The ...
- Remote Desktop Organizer – 管理组织远程桌面 - 小众软件
http://www.appinn.com/remote-desktop-organizer/
- 【Python】Coding the Matrix:Week 5 Perspective Lab
这个Lab的内容光是说明就有7页之巨,我反复看了很久才看懂一点点,Lab主要完成的是从不同坐标系表示之间变换的方法. 原始的图片,从Camera basis的表示转换成WhiteBoard basis ...