asp.net EasyUI DataGrid 实现增删改查
转自：http://www.cnblogs.com/create/p/3410314.html
前台代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title> <link rel="stylesheet" type="text/css" href="../EasyUI/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../EasyUI/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../demo.css" />
<style type="text/css">
.align-center{
margin: auto; /* 居中 这个是必须的，，其它的属性非必须 */
width:%; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ height:300px;
text-align:center; /* 文字等内容居中 */
}
</style>
<script type="text/javascript" src="../EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="../EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript"> var url; //提交数据的路径
var formId; //当天要提交的Form的编号
var dialogId; //对话框的编号 $(function () { $('#ReceiveList').datagrid({
toolbar: [{
//iconCls: 'icon-remove',
iconCls: 'icon-cut',
handler: function () { deleteAdminUser(); }
}, '-', {
iconCls: 'icon-edit',
handler: function () { edittbUser(); }
}, '-', {
iconCls: 'icon-add',
handler: function () { addtbUser(); }
} ]
}); }); function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
data = {
total: data.length,
rows: data
}
}
var dg = $('#ReceiveList');
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
// pageSize: 10,//每页显示的记录条数，默认为10
// pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - ) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
} $(function () {
$('#ReceiveList').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', '/ashx/RoleList.ashx?action=GetRoleList');
}); // 删除代码部分
function deleteAdminUser() {
var row = $('#ReceiveList').datagrid('getSelected');
if (row) {
$.messager.confirm('删除提示', '确定要删除' + row.UserName + '吗', function (r) {
if (r) {
$.post('/ashx/RoleList.ashx', { id: row.UserID, action: 'deleteRole' }, function (data, status) { if (data == "ok") {
$.messager.show({
title: 'success',
msg: '删除成功！'
});
$('#ReceiveList').datagrid('reload'); } else {
$.messager.show({
title: 'Error',
msg: '删除用户失败!'
});
}
});
}
});
}
else {
//$.messager.show({
// title: 'Error',
// msg: '你没有选中行！'
//});
$.messager.alert("提示", "您没有选中任何行！");
}
}
//添加
function addtbUser() {
$("#addtbUserDialog").dialog({
"title": "新添用户",
width: ,
height: });
$('#addtbUserDialog').dialog('open');
$('#addForm').form('clear'); url = '/ashx/RoleList.ashx?action=add';
formId = "#addForm";
dialogId = "#addtbUserDialog";
} function add() { $(formId).form('submit', {
url: url,
onSubmit: function () { return $(this).form('validate');
}, success: function (data) { if (data == 'ok') {
$.messager.show({
title: 'success',
msg: '插入成功！'
});
// $(dialogId).dialog('close');
$('#ReceiveList').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: '插入失败！'
});
} //$(dialogId).dialog('close');
$('#ReceiveList').datagrid('reload');
}
});
}
//编辑
function edittbUser() {
$("#edittbUserDialog").dialog({
"title": "修改信息",
width: ,
height: });
var row = $('#ReceiveList').datagrid('getSelected');
if (row) {
$('#edittbUserDialog').dialog('open');
$("#editUserName").val(row.UserName);
$("#editUserPassword").val(row.UserPassword);
$("#editNickName").val(row.NickName);
$("#editDeptID").val(row.DeptID);
$("#editPhone").val(row.Phone); // $("#UserID").combobox('setValue', row.UserID);
// $('#edit').form('clear'); url = '/ashx/RoleList.ashx?action=edit&UserID=' + row.UserID;
formId = "#editForm";
dialogId = "#edittbUserDialog"; }
else {
$.messager.alert("提示", "您没有选中任何行！");
}
} function edit() { $(formId).form('submit', {
url: url,
onSubmit: function () {
// alert(formId);
return $(this).form('validate'); },
// success: successCallback
success: function (data) {
//alert(data)
//$.messager.show({
// title: 'success',
// msg: data
//}); //$.messager.alert("提示", data); if (data == 'ok') {
$.messager.show({
title: 'success',
msg: '修改成功！'
});
$(dialogId).dialog('close');
$('#ReceiveList').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: '修改失败！'
});
} //$(dialogId).dialog('close');
$('#ReceiveList').datagrid('reload');
}
}); //$.post('/ashx/RoleList.ashx', {action:'edit',UserID:UserID, UserName: UserID, UserPassword: UserID }, function (data, status) { // if (data == "ok") {
// $('#ReceiveList').datagrid('reload');
// } else {
// $.messager.show({
// title: 'Error',
// msg: '删除该科室失败!'
// });
// }
//});
} //多条件查询方法
function tsearch() {
// var hoistalName = $("#hoistalName").combobox("getValue");
var UserID = $("#UserID").val();
//alert(depName);
$('#ReceiveList').datagrid('options').pageNumber = ;
$('#ReceiveList').datagrid('getPager').pagination({ pageNumber: });
$('#ReceiveList').datagrid('options').url = '/ashx/RoleList.ashx?action=search&UserID='+UserID;
$('#ReceiveList').datagrid("reload");
}
</script> </head>
<body>
<br/>
<div class="searchitem">
<label>UserID：</label>
<input type="text" id="UserID" class="easyui-validatebox" />
<a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a>
</div> <table id="ReceiveList" title="Custom DataGrid Pager" style="width:700px;height:400px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/ashx/RoleList.ashx?action=GetRoleList',method:'get',pageSize:10
">
<thead>
<tr>
<th data-options="field:'UserID',checkbox:true,width:80">用户ID</th>
<th data-options="field:'UserName',width:100">用户名</th>
<th data-options="field:'UserPassword',width:80,align:'right'">用户密码</th>
<th data-options="field:'NickName',width:80,align:'right'">昵称</th>
<th data-options="field:'DeptID',width:240">部门ID</th>
<th data-options="field:'Phone',width:60,align:'center'">电话</th>
</tr>
</thead>
</table> <div id="addtbUserDialog" class="easyui-dialog" closed="true" buttons="#addtbUser-buttons" style="padding:10px 20px">
<form id="addForm" method="post">
<table class="align-center">
<tr>
<td> 用户名</td>
<td><input id="Text1" name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
<tr>
<td>用户密码</td>
<td><input id="Password1" name="UserPassword" class="easyui-validatebox" data-options="required:true" type="password"/></td>
</tr>
<tr>
<td>昵称</td>
<td><input id="Text2" name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
<tr>
<td>部门ID</td>
<td><input id="Text3" name="DeptID" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
<tr>
<td>电话</td>
<td><input id="Text4" name="Phone" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
</table> </form> </div>
<div id="addtbUser-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="add()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addtbUserDialog').dialog('close')">关闭</a>
</div> <div id="edittbUserDialog" class="easyui-dialog" closed="true" buttons="#edittbUser-buttons" style="padding:10px 20px;" >
<form id="editForm" method="post" >
<table class="align-center">
<tr>
<td> 用户名</td>
<td><input id="editUserName" name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
<tr>
<td>用户密码</td>
<td><input id="editUserPassword" name="UserPassword" class="easyui-validatebox" data-options="required:true" type="password"/></td>
</tr>
<tr>
<td>昵称</td>
<td><input id="editNickName" name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
<tr>
<td>部门ID</td>
<td><input id="editDeptID" name="DeptID" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
<tr>
<td>电话</td>
<td><input id="editPhone" name="Phone" class="easyui-validatebox" data-options="required:true" type="text"/></td>
</tr>
</table> </form>
</div>
<div id="edittbUser-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="edit()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#edittbUserDialog').dialog('close')">关闭</a>
</div> </body>
</html>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
namespace EasyUIDemo.ashx
{
/// <summary>
/// RoleList 的摘要说明
/// </summary>
public class RoleList : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
String action = context.Request["action"]; if (action.Equals("GetRoleList"))
{
DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser");
context.Response.Write(FormatToJson.ToJson(dt)); }
//添加
else if (action.Equals("add"))
{
String UserName = context.Request["UserName"];
String UserPassword = context.Request["UserPassword"];
String NickName = context.Request["NickName"];
String DeptID = context.Request["DeptID"];
String Phone = context.Request["Phone"]; String sql = "insert into tbUser(UserName,UserPassword,NickName,DeptID,Phone) values(@UserName,@UserPassword,@NickName,@DeptID,@Phone)";
SqlParameter[] para = new SqlParameter[] {
new SqlParameter("@UserName",UserName),
new SqlParameter("@UserPassword",UserPassword),
new SqlParameter("@NickName",NickName),
new SqlParameter("@DeptID",DeptID),
new SqlParameter("@Phone",Phone),
};
int i = SqlHelper.ExecuteSql(sql, para);
if (i > )
{ context.Response.Write("ok");
}
else
{
context.Response.Write("no");
} }
//编辑
else if (action.Equals("edit"))
{
String UserName = context.Request["UserName"];
String UserPassword = context.Request["UserPassword"];
String NickName = context.Request["NickName"];
String DeptID = context.Request["DeptID"];
String Phone = context.Request["Phone"]; String UserID = context.Request["UserID"]; String sql = "update tbUser set UserName=@UserName,UserPassword=@UserPassword,NickName=@NickName,DeptID=@DeptID,Phone=@Phone where UserID=@UserID";
SqlParameter[] para = new SqlParameter[] {
new SqlParameter("@UserName",UserName),
new SqlParameter("@UserPassword",UserPassword),
new SqlParameter("@NickName",NickName),
new SqlParameter("@DeptID",DeptID),
new SqlParameter("@Phone",Phone),
new SqlParameter("@UserID",UserID)
};
int i = SqlHelper.ExecuteSql(sql, para);
if (i > )
{ context.Response.Write("ok");
}
else
{
context.Response.Write("no");
} } //查询
else if (action.Equals("search"))
{ String UserID = context.Request["UserID"]; DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser where UserID=" + UserID);
context.Response.Write(FormatToJson.ToJson(dt)); }
else if (action.Equals("deleteRole"))
{
String UserID = context.Request["id"];
String sql = "delete from tbUser where UserID='" + UserID+"'";
if (SqlHelper.ExecuteSql(sql) > )
{
context.Response.Write("ok");
}
else
{
context.Response.Write("no");
} }
} public bool IsReusable
{
get
{
return false;
}
}
}
}
源码下载：
http://files.cnblogs.com/create/EasyUIDemo.rar
asp.net EasyUI DataGrid 实现增删改查的更多相关文章
- Asp.Net操作MySql数据库增删改查
Asp.Net操作MySql数据库增删改查,话不多说直接步入正题.git源码地址:https://git.oschina.net/gxiaopan/NetMySql.git 1.安装MySQL数据库 ...
- easyui+nodejs+sqlserver增删改查实现
用到的模块或者技术: Express: http://www.expressjs.com.cn/4x/api.html#express Easyui: http://www.jeasyui.com/d ...
- nodejs+easyui(抽奖活动后台)增删改查
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfAAAAJACAIAAAD97KNZAAAgAElEQVR4nO2daXxb5Z2o7w+dO1/ufL ...
- 【ASP.NET MVC】jqGrid 增删改查详解
1 概述 本篇文章主要是关于JqGrid的,主要功能包括使用JqGrid增删查改,导入导出,废话不多说,直接进入正题. 2 Demo相关 2.1 Demo展示 第一部分 第二部分 2.2 ...
- Asp.net简单三层+Sqllite 增删改查
新建项目à新建一个空白解决方案 在Model新建一个实体类 using System; using System.Collections.Generic; using System.Linq; usi ...
- .net+EF+mvc通过EasyUI的DataGrid实现增删改查
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...
- easyui表格的增删改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [jQuery EasyUI系列] 创建增删改查应用
一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: da ...
- ASP连接access 数据库的增删改查 - imsoft.cnblogs
假设数据库文件名叫data.mdb里面有2个表:1.admin2.news假设admin是保存用户名和密码,里面有字段:UserName,PassWord.假设我们要在判断一个用户名叫name,密码是 ...
随机推荐
- iOS 9 Spotlight搜索 OC版
介绍: 在WWDC 2015会议上,苹果官方公布了iOS9.除开许多新的特性和增强功能,这次升级也给了开发者们一个机会让他们的app里的内容能通过Spotlight 搜索功能被发现和使用.在iO ...
- iOS开发——常用字符串string相关方法和处理
(持续更新中……) 1,四舍五入 2,剔除字符 3,拼接字符 4,字符个数和长度 5,字符串的比较 6,字符串的范围 7,字符串转Number类型
- DbUtil组件及C3P0数据库连接池组件的使用
DbUtils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序的性能. 使用c ...
- 字节序转换与结构体位域（bit field）值的读取
最近又遇到了几年前遇到的问题,标记一下. 对于跨字节位域(bit field)而言,如果数据传输前后环境的字节序不同(LE->BE,BE->LE),简单地调用(ntohs/ntohl/ht ...
- IOS 学习笔记 2015-03-22 OC-API-日期
一 API 1 NSdate 2 NSDateFormatter 二 适用场景 1 获取当前日期 2 增加时间差 3 比较时间差 4 返回较早时间 5 日期格式话 6 日期转字符串 7 字符串转日期 ...
- H5小内容（五）
Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯 ...
- 【转】Oracle中dual表的用途介绍
原文:Oracle中dual表的用途介绍 [导读]dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情. dual是一个虚拟表, ...
- PHP设计模式之适配器模式
将一个类的接口转换成客户希望的另一个接口,适配器模式使得原本的由于接口不兼容而不能一起工作的那些类可以一起工作.应用场景:老代码接口不适应新的接口需求,或者代码很多很乱不便于继续修改,或者使用第三方类 ...
- yii 缓存探究
1.在配置文件中 //在权威指南上是'cache' 其实可以根据不同的缓存组件起不同的名称 //memcache缓存 'memcache' => array( 'class' => 'sy ...
- django 自定义标签
Context和RequestContext都能被Template 进行render RequestContext类接受reqest,字典,processors 实例化.并被TEMPLATE_CONT ...