基本信息
源码名称：dataGrid增删改查(EasyUI)示例源码
源码大小：1.59M
文件格式：.zip
开发语言：C#
更新时间：2019-07-25
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
源码示例前台套用easyui，利用ajax调用sql数据库对学生信息表进行增删改查
<!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>
<title></title>
<link href="easyui/css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/demo.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/dlg.css" rel="stylesheet" type="text/css" />
<script src="easyui/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="easyui/js/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tab").datagrid({
width: 600, //宽度
height: 400, //高度
singleSelect: true, //选中一行的设置
rownumbers: true, //行号
url: "grid1.ashx", //请求路径
title: "学员信息", //标题
iconCls: "icon-save", //图标
collapsible: true, //隐藏按钮
//冻结列
frozenColumns: [[{ field: "chk", "checkbox": true}]],
//列
columns: [[
{ field: "JSON_no", title: "编号", width: 80 },
{ field: "JSON_name", title: "姓名", width: 100 },
{ field: "JSON_pwd", title: "密码", width: 100 },
{ field: "JSON_sex", title: "性别", width: 100 },
{ field: "JSON_age", title: "年龄", width: 100 },
{ field: "JSON_address", title: "住址", width: 100 }
]],
//传输参数
queryParams: { "action": "query" },
pagination: true,
toolbar: "#tool"
// toolbar: [{
// id: "btnadd",
// text: "添加",
// iconCls: "icon-add"
// },
// {
// id: "btnEdit",
// text: "编辑",
// iconCls: "icon-edit"
// },
// {
// id: "btncut",
// text: "删除",
// iconCls: "icon-no",
// handler: function () {
// $("#btnsave").linkbutton("enable");
// delete_dg();
// }
// },
// ]
});
$("#tab").datagrid('getPager').pagination({
beforePageText: "第",
afterPageText: "页",
displayMsg: "当前 {from} - {to}条数据 共{total} 条数据",
pageSize: 10,
pageList: [5, 10, 15, 20, 30]
});
})
/////////////////////////删除/////////////////
function delete_dg() {
var selected = $("#tab").datagrid('getSelected');
if (selected != null) {
$.messager.confirm('提示', '是否确定要删除？', function (y) {
if (y) {
var v = "";
var checked = $("#tab").datagrid('getChecked');
$.each(checked, function (i, j) {
v = j.JSON_id ",";
})
v = v.substring(0, v.length - 1);
$.post("grid1.ashx", { "action": "del", id: v }, function (data) {
$.messager.alert('提示', data);
$("#tab").datagrid('reload');
});
}
})
} else {
$.messager.alert('提示','您还没有选中一行数，请选中在删除！');
}
}
/////////////////////添加///////////////////
function add_dg() {
//表单清空
$("#fm_dg")[0].reset();
//显示
$("#dd_dg").show();
//以窗体的形式展示
$("#dd_dg").dialog({
title: "添加学员信息",//标题
iconCls: "icon-add",//图标
width: 300,//窗体的宽度
height: 200,//窗体的高度
modal: true, //遮罩层
//按钮集合
buttons: [
{
text: "添加",//添加按钮的文本值
iconCls: "icon-ok", //添加按钮的图标
handler: function () {
//将数据序列化
var parm = $("#fm_dg").serialize();
//中文格式转换
var pp = decodeURIComponent(parm, true);
//post异步提交
$.post("grid1.ashx", { "action": "add", data: pp }, function (data) {
$.messager.alert('提示', data);
//重新加载datagrid
$("#tab").datagrid('reload');
//关闭
$("#dd_dg").window('close');
});
}
},
{
text: "取消",
iconCls: "icon-cancel",
handler: function () {
$("#dd_dg").window("close");
}
}
]
});
}
//////////////////修改//////////////////
function edit_dg() {
//选中一行，获取这一行的属性的值
var selected = $("#tab").datagrid('getSelected');
//判断是否选中
if (selected != null) {
$("#id").val(selected.JSON_id);
$("#no").val(selected.JSON_no);
$("#name").val(selected.JSON_name);
$("#pwd").val(selected.JSON_pwd);
//取值显示性别
if (selected.JSON_sex == "男") {
$("#sex option").eq(0).attr("selected","selected");
} else {
$("#sex option").eq(1).attr("selected", "selected");
}
$("#age").val(selected.JSON_age);
$("#address").val(selected.JSON_address);
$("#dd_dg").show(); //显示修改窗体
$("#dd_dg").dialog({
title: "编辑信息",
iconCls: "icon-edit",
modal: true,//遮罩层
width: 300,
height: 200,
buttons: [
{
text: "编辑",
iconCls: "icon-edit",
handler: function () {
var parm = $("#fm_dg").serialize();
var pp = decodeURIComponent(parm, true);
$.post("grid1.ashx", { "action": "edit", data: pp }, function (data) {
$.messager.show({
title: "提示",
msg: data
});
$("#tab").datagrid("reload");
$("#dd_dg").window("close");
});
}
},
{
text: "取消",
iconCls: "icon-cancel",
handler: function () {
$("#dd_dg").window('close');
}
}
]
});
} else {
$.messager.alert('提示','请选中一行在进行编辑');
}
}
</script>
<style type="text/css">
input{ border:none; border-bottom:1px solid black;}
</style>
</head>
<body>
<table id="tab"></table>
<div id="tool">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style=" padding-left:2px">
<a href="#" class="easyui-linkbutton" id="id_add" iconcls="icon-add" plain="true" onclick="add_dg();" >添加</a>
<a href="#" class="easyui-linkbutton" id="id_edit" iconCls="icon-edit" plain="true" onclick="edit_dg();">修改</a>
<a href="#" class="easyui-linkbutton" id="id_cancel " onclick="delete_dg();" iconcls="icon-cancel" plain="true">删除</a>
</td>
</tr>
</table>
</div>
<br />
<div id="dd_dg" style=" display:none">
<form id="fm_dg">
<input type="hidden" id="id" name="id"/>
编号:<input type="text" id="no" name="no" class="easyui-validatebox" required="true" missingMessage="请输入编号" />
<br />
姓名:<input type="text" id="name" name="name" class="easyui-validatebox" required="true" missingMessage="请输入姓名" />
<br />
密码:<input type="password" id="pwd" name="pwd" class="easyui-validatebox" required="true" missingMessage="请输入密码" />
<br />
性别:<select id="sex" name="sex">
<option value="1">男</option>
<option value="0">女</option>
</select>
<br />
年龄:<input type="text" id="age" name="age" class="easyui-validatebox" required="true" missingMessage="请输入年龄" />
<br />
住址:<input type="text" id="address" name="address" class="easyui-validatebox" required="true" missingMessage="请输入住址" />
<br />
</form>
</div>
</body>
</html>