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,密码是 ...
随机推荐
- 菜鸟的MySQL学习笔记（三）
4-1插入记录INSERT INSERT [INTO] tbl_name [(col_name)] {VALUES|VALUE} ({expr|DEFAULT},...), (...), ... ...
- 【CMD】findstr命令
findstr用来搜索匹配字符串的文件. FINDSTR [/B] [/E] [/L] [/R] [/S] [/I] [/X] [/V] [/N] [/M] [/O] [/P] [/F:file] [ ...
- ES6笔记-正则表达式和字符串正则方法
RegExp构造函数 在ES5中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new RegExp( ...
- javascript 节点的增，删，改，查
1.创建节点 A.创建元素节点 document.createElement("元素标签名"); B.创建属性节点 document.createAttribut ...
- H5小内容（二）
音视频处理 视频处理 基本内容 使用Flash技术处理HTML页面中的视频内容 包含音频.动画.网页游戏等 特点 浏览器原生不支持(IE浏览器要求安装A ...
- 已经安装php后，再增加扩展模块(不重新编辑php)
下面以安装curl为例,介绍具体安装步骤. 1.安装crul wget http://curl.haxx.se/download/curl-7.19.6.tar.gz tar -zxvf curl-7 ...
- Python里隐藏的 " 诗 "
在 Python 的Lib目录里有一个:this.Py (或者在交互式解释器中输入import this) 它其实是隐藏的一首诗 The Zen of Python, by Tim Peters &l ...
- 【转】centOS中mysql一些常用操作
安装mysql yum -y install mysql-server 修改mysql配置vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记暂时修改一下编码(添加在密码下方 ...
- xcode 必用插件二
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- iOS - Responder Chain
在iOS中,当发生事件响应时,必须知道由谁来响应事件.这就是由响应者链来对事件进行响应,所有事件响应的类都是UIResponder的子类,响应者链是一个由不同对象组成的层次结构,其中的每个对象将依次 ...