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,密码是 ...
随机推荐
- Mac OS X 配置环境变量
/etc/profile:/etc/bashrc 是针对系统所有用户的全局变量,只有root用户才能修改这两个文件,对一般用户来说是他们是只读的.一般用户要想修改它们,可以在命令前加sudo,意思是以 ...
- <s:iterator></s:iterator>循环指定输出，（status的方法使用）
list集合中的实体的一个属性是另一个实体的集合(如下) public class PetInfo { private int petId; private String private Set< ...
- 使用SqlBulkCopy批量插入多条数据进入表中
由于工作中项目需求结算一次生成一批相同批次号的数据插入一个表中,然后再通过另一页面展示出来,所以需要用到一次性插入一批数据,所以就采用了SqlBulkCopy插入一批数据 1 public stati ...
- MySQL数据库原理
我们知道,数据是信息的载体——一种我们约定了如何解释的符号.在计算机系统中,最常见的应该是文本数据.我们用它记录配置信息,写日志,等等.而在应用程序中,按一定的数据结构来组织数据的方式叫做数据库管理系 ...
- 用eclipse建立简单WebService客户端，使用WSDL，用于短信接口发送
使用工具:eclipse 标准版,不用任何插件. 操作步骤: 建立java Project 命名为mess: 再在project上右键,选择other,选择web service文件类别,选择web ...
- jquery ajax post, get, javascript ajax post, get 处理
ajax 创建 XMLHttp 对象IE7 以上的版本都支持 XMLHttpRequestIE7 以下的用 ActiveXObject async:true, // 当false 时,当执行完这个才 ...
- JavaScript的问题
定义一个函数function, function testParams() { var params = ""; for(var i=0; i<arguments.lengt ...
- React新接触
html5页面的开始引入: <script src="../build/react.js"></script> <!--核心库--> < ...
- EncodingUtils 编译不通过
在Android Studio中开发, 将字符数组转成字符串: Strin re= EncodingUtils.getString(bytes,"UTF-8"); 可是提示Enco ...
- Swift(二,元组,可选类型,类型转化)
一,首先,元组是Swift中特有的,OC中没有元组相关类型,具体怎么用,看下面的例子吧 //1.使用元组来定义一组数据 let infoTuple = (,1.8) let nameTuple = i ...