ASP.NET EasyUI实现增删改查

最新推荐文章于 2024-08-05 14:29:02 发布

北国的雪-

最新推荐文章于 2024-08-05 14:29:02 发布

阅读量4.5k

点赞数 1

分类专栏： .net C# 文章标签： C# .net Jquery easyui asp.net

本文链接：https://blog.csdn.net/qq_35732799/article/details/54312169

版权

.net 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

.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 href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="EasyUI/themes/icon.css" rel="stylesheet" />
<link href="EasyUI/demo/demo.css" rel="stylesheet" />
<style type="text/css">
#fm {
margin: 0;
padding: 10px 30px;
}

.ftitle {
font-size: 14px;
font-weight: bold;
color: #666;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.fitem {
margin-bottom: 5px;
}

.fitem label {
display: inline-block;
width: 80px;
}
</style>

---------------------------------------------------------------------------------------------------------------------------------------
<script src="EasyUI/jquery.min.js"></script>
<script src="EasyUI/jquery-1.8.0.min.js"></script>
<script src="EasyUI/jquery.easyui.min.js"></script>
<script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$('#tt').datagrid({
title: '学生信息管理',
iconCls: 'icon-save',
url: "CRUD_Datagrid.ashx",//接收一般处理程序返回来的json数据
columns: [
[
{ field: 'StuId', checkbox: true, width: 100, align: 'center' },
{ field: 'StuNum', title: '学号', width: 100, align: 'center' },//field后面就改为你自己的数据表字段，然后可以调整宽度什么的
{ field: 'StuName', title: '姓名', width: 100, align: 'center' },
{ field: 'Phone', title: '电话', width: 100, align: 'center' },
{ field: 'Email', title: '邮箱', width: 100, align: 'center' }
]]
});
}
);

--------------------------------------------------------------------------------------------------------------------------------------------------------------
//添加管理员
function newStudent() {
//清空内容
$('#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("提示", "请选择要修改的行！");
}
alert(row.StuId);
if (row) {
//获取要修改的字段
$('#StuNum').val(row.StuNum);
$('#StuName').val(row.StuName);
$('#Phone').val(row.Phone);
$('#Email').val(row.Email);
$('#dlg').dialog('open').dialog('setTitle', '修改学生');
document.getElementById("test").value = "modify";
$('#fm').form('load', row);

}
}

--------------------------------------------------------------------------------------------------------------------------------------------
//删除学生
function destroyUser() {
document.getElementById("test").value = "delete"; //设定表示为后台调不同方法数据提供接口
var test = document.getElementById("test").value;
var row = $('#tt').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {
if (r) {
$('#fm').form('submit', {
url: "CRUD_Datagrid.ashx?StuId=" + row.StuId + "&test=" + test,
onSubmit: function () {
},
//判断结果是否正确
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
alert('恭喜您，信息删除成功！')
$('#tt').datagrid('reload');
}
else {
alert('添加失败，请重新操作！')
}
}
});
}
});
}
}

---------------------------------------------------------------------------------------------------------------------------------------------------------
//保存信息
function saveUser() {

var test = document.getElementById("test").value;
if (test == "add") {
$('#fm').form('submit', {
url: "CRUD_Datagrid.ashx?test=" + test,
onSubmit: function () {
return $(this).form('validate');
},
data: { StuNum: $("#StuNum").val(), StuName: $("#StuName").val(), Phone: $("#Phone").val(), Email: $("#Email").val() },
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
$.messager.alert("提示", "恭喜您，信息添加成功", "info");
$('#tt').datagrid('reload');
}
else {
$.messager.alert("提示", "添加失败，请重新操作！", "info");
return;
}
}
});

} else {
var row = $('#tt').datagrid('getSelected');
if (row) {
//获取要修改的字段
var StuId = row.StuId;
}
$('#fm').form('submit', {
url: "CRUD_Datagrid.ashx?test=" + test+"&StuId="+StuId,
onSubmit: function () {
return $(this).form('validate');
},
data: { StuNum: $("#StuNum").val(), StuName: $("#StuName").val(), Phone: $("#Phone").val(), Email: $("#Email").val()},
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
$('#tt').datagrid('clearSelections'); //清空选中的行
$.messager.alert("提示", "恭喜您，信息修改成功");
$('#tt').datagrid('reload');

}
else {
$.messager.alert("提示", "修改失败，请重新操作！");
return;
}
}
});
}
}
</script>

</head>
<body>
<input id="test" name="test" type="hidden">
<table id="tt" class="easyui-datagrid" style="width: auto; height: 400px;"
idfield="StuId" pagination="true"
data-options="rownumbers:true,url:'CRUD_Datagrid.ashx',pageSize:5,pageList:[5,10,15,20],method:'Post',toolbar:'#tb',striped:true" fitcolumns="true"></table>
<div id="tb">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" οnclick="newStudent()">添加学生</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="editUser()">修改学生</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="destroyUser()">删除学生</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">学生信息</div>
<form id="fm" method="post" novalidate>

<div class="fitem">
<label>学号：</label>
<input id="StuNum" name="StuNum" class="easyui-validatebox" data-options="required:true" />
</div>
<div class="fitem">
<label>姓名：</label>
<input id="StuName" name="StuName" class="easyui-validatebox" data-options="required:true" />
</div>
<div class="fitem">
<label>电话:</label>
<input id="Phone" name="Phone" />
</div>
<div class="fitem">
<label>邮箱:</label>
<input id="Email" name="Email" />
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" οnclick="javascript:$('#dlg').dialog('close')">关闭</a>
</div>
</body>
</html>

.ashx页面

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;

namespace EasyUI
{
/// <summary>
/// CRUD_Datagrid 的摘要说明
/// </summary>
public class CRUD_Datagrid : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
SqlConnection conn = new SqlConnection("Data Source=.;User ID=sa;Password=sa;Initial Catalog=Students;");
string command = context.Request.QueryString["test"];//前台传的标示值
if (command == "add")
{
try
{
string StuNum = context.Request["StuNum"];
string StuName = context.Request["StuName"];
string Phone = context.Request["Phone"];
string Email = context.Request["Email"];
string sql = "INSERT INTO StuInfo VALUES('" + StuNum + "','" + StuName + "','" + Phone + "','" + Email + "')";
conn.Open();
SqlCommand com = new SqlCommand(sql, conn);
com.ExecuteNonQuery();
conn.Close();
context.Response.Write("T");
context.Response.End();
}
catch (Exception ex)
{
context.Response.Write("F");
}
}
else if (command == "modify")
{

try
{
string StuID = context.Request["StuId"];
string StuNum = context.Request["StuNum"];
string StuName = context.Request["StuName"];
string Phone = context.Request["Phone"];
string Email = context.Request["Email"];
string sql = "UPDATE StuInfo SET StuNum='" + StuNum + "',StuName='" + StuName + "',Phone='" + Phone + "',Email='" + Email + "' WHERE StuId=" + StuID + "";
conn.Open();
SqlCommand com = new SqlCommand(sql, conn);
com.ExecuteNonQuery();
conn.Close();
context.Response.Write("T");
context.Response.End();

}
catch (Exception ex)
{
context.Response.Write("F");
}
}
else if (command == "delete")
{

try
{
string StuID = context.Request["StuId"];
string sql = "DELETE FROM StuInfo WHERE StuId=" + StuID + "";
conn.Open();
SqlCommand com = new SqlCommand(sql, conn);
com.ExecuteNonQuery();
conn.Close();
context.Response.Write("T");
context.Response.End();

}
catch (Exception ex)
{
context.Response.Write("F");
}
}
else
{//调用查询方法
DataSet ds = new DataSet();
string sql = "select * from StuInfo";
SqlDataAdapter da = new SqlDataAdapter(sql, conn);
da.Fill(ds);
string strJson = Dataset2Json(ds, -1);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End();
}
}
#region DataSet转换成Json格式
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <param name="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();
}
#endregion
#region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <param name="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();
}
#endregion dataTable转换成Json格式
public bool IsReusable
{
get
{
return false;
}
}
}
}