C#+layui表格实现增删改查
C#+layui 表格实现增删改查
layui 前端代码
layui table 界⾯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer"content="webkit">
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/>
<script src="jquery-3.4.1.min.js"></script>
<link href="public.css"rel="stylesheet"/>
<link href="layui/css/layui.css"rel="stylesheet"media="all"/>
<script src="layui/layui.js"></script>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div >
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">⽤户姓名</label>
<div class="layui-input-inline">
<input type="text"name="username"autocomplete="off"class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit"class="layui-btn layui-btn-primary"lay-submit lay-filter="data-search-btn"><i class="layui-icon"> </i>搜索</button> </div>
</div>
</form>
</div>
</fieldset>
<!--表头⼯具栏-->
<script type="text/html"id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</button>
</div>
</script>
<!--表格容器-->
<table class="layui-hide"id="currentTableId"lay-filter="currentTableFilter"></table>
<!--⾏内⼯具栏-->
<script type="text/html"id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
<script>
//刷新表格函数
/
/刷新表格函数
function reloadTable(){
load('currentTableId',{
page:{
curr:1
}
, where:{
type:"select"
}
});
}
function formatDateTime(d)
{
var date =new Date(d);
FullYear()+"-"+(Month()+1)+"-"+(Date()+1); }
layui.use(['form','table'],function(){
var $ = layui.jquery,
form = layui.form,
table = layui.table;
elem:'#currentTableId',
url:'UserHandler.ashx',
toolbar:'#toolbarDemo',// 表头⼯具栏
defaultToolbar:['filter','exports','print',{
title:'提⽰',
layEvent:'LAYTABLE_TIPS',
icon:'layui-icon-tips'
}],
cols:[[
{type:"checkbox", width:50},
{ field:'Id', width:80, title:'ID', sort:true},
{ field:'UserName', width:80, title:'⽤户名'},
{ field:'UserPwd', width:80, title:'密码'},
{ field:'UserSex', width:80, title:'性别'},
{ field:'Birthday', title:'⽣⽇', minWidth:150,
templet:"<div>{{DateString(d.sbj_start, 'yyyy-MM-dd')}}</div>"}, {title:'操作', minWidth:150, toolbar:'#currentTableBar', align:"center"}
]],
limits:[10,15,20,25,50,100],
limit:15,
page:true,
skin:'line',
where:{ type:"select"},//查询时要传递的参数
parseData:function(res){//res 即为原始返回的数据
return{
"code": res.status,//解析接⼝状态
"msg": ssage,//解析提⽰⽂本
"count": al,//解析数据长度
"data": res.data //解析数据列表
};
}
});
// 监听搜索操作
<('submit(data-search-btn)',function(data){
//data是表单提交时，提交的所有信息，field 是获取所有的字段的信息
jquery弹出div窗口var result =JSON.stringify(data.field);
/
/执⾏搜索重载
page:{
curr:1
}
, where:{
searchParams: result,
type:"select"
}
},'data');
return false;
});
/**
* toolbar监听事件
*/
<('toolbar(currentTableFilter)',function(obj)
{
if(obj.event ==='add')// 监听添加操作
if(obj.event ==='add')// 监听添加操作
{
var index = layer.open({
title:'添加⽤户',
type:2,
shade:0.2,
maxmin:true,
shadeClose:true,
area:['100%','100%'],
content:'add.html',
});
}
else if(obj.event ==='delete')// 监听删除操作
{
var checkStatus = table.checkStatus('currentTableId')
,
data = checkStatus.data;
if(data.length==0)
{
var index = layer.alert('请选择⼀⾏进⾏删除',
{
title:'提⽰'
},function()
{
// 关闭弹出层
layer.close(index);
});
return;
}
//获取选中的所有Id
var idArray =new Array();
for(var i =0; i < data.length; i++)
{
idArray.push(data[i].Id);
}
$.ajax({
url:"UserHandler.ashx",
method:"POST",
data:{ id:JSON.stringify(idArray), type:"delete"},
success:function(msg)
{
var index = layer.alert(msg,{
title:'提⽰'
},function(){
// 关闭弹出层
layer.close(index);
if(msg=="删除成功")
{
//调⽤表格重载⽅法
reloadTable();
}
});
}
});
}
});
<('tool(currentTableFilter)',function(obj){
//获取选中⾏的数据
var data = obj.data;
if(obj.event ==='edit'){
var index = layer.open({
title:'编辑⽤户',
type:2,
shade:0.2,
maxmin:true,
shadeClose:true,
area:['100%','100%'],
content:'edit.html',
success:function(layero, index)
{
//向layer页⾯传值，传值主要代码
var body = ChildFrame('body', index);
//获取name名为Id的控件进⾏赋值
body.find("[name='Id']").val(data.Id);
body.find("[name='UserName']").val(data.UserName);
body.find("input[name='UserSex'][value='"+ data.UserSex +"']").attr("checked", data.UserSex); body.find("[name='UserPwd']").val(data.UserPwd);
body.find("[name='Birthday']").val(formatDateTime(data.Birthday));
//得到iframe页的窗⼝对象，执⾏iframe页的⽅法：hod();
//得到iframe页的窗⼝对象，执⾏iframe页的⽅法：hod();
var iframeWin = window[layero.find('iframe')[0]['name']];
//执⾏表单重新渲染的⽅法
}
});
return false;
}
else if(obj.event ==='delete'){
var idArray =[obj.data.Id];
$.ajax({
url:"UserHandler.ashx",
method:"POST",
data:{ id:JSON.stringify(idArray), type:"delete"},
success:function(msg){
var index = layer.alert(msg,{
title:'提⽰'
},function(){
// 关闭弹出层
layer.close(index);
if(msg =="删除成功"){
//调⽤表格重载⽅法
reloadTable();
}
});
}
});
//关闭弹窗
layer.close(index);
});
}
});
});
</script>
</body>
</html>
layui add界⾯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer"content="webkit">
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="layui/css/layui.css"rel="stylesheet"/>
<link href="public.css"rel="stylesheet"/>
<script src="layui/layui.js"></script>
<style>
body{
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required">⽤户名</label>
<div class="layui-input-block">
<input type="text"id="UserName"name="UserName"lay-verify="required"lay-reqtext="⽤户名不能为空"placeholder="请输⼊⽤户名"value=""cla ss="layui-input">
<tip>填写⾃⼰管理账号的名称。</tip>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item">
<label class="layui-form-label required">性别</label>
<div class="layui-input-block">
<input type="radio"name="UserSex"value="男"title="男"checked>
<input type="radio"name="UserSex"value="⼥"title="⼥">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">密码</label>
<div class="layui-input-block">
<input type="password"id="UserPwd"name="UserPwd"lay-verify="required"lay-reqtext="密码不能为空"placeholder="请输⼊密码"value=""clas s="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出⽣⽇期</label>
<div class="layui-input-block">
<input type="text"id="Birthday"name="Birthday"placeholder="请选择出⽣⽇期"value=""class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal"lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
<script>
layui.use(['form'],function(){
var form = layui.form,
layer = layui.layer,
$ = layui.$;
var laydate = layui.laydate;
//实例化时间控件
elem:'#Birthday',
format:'yyyy-MM-dd',
value:new Date(),
isInitValue:true
});
//监听提交
<('submit(saveBtn)',function(data)
{
$.ajax({
url:"UserHandler.ashx",
method:"POST",
data:{ user:JSON.stringify(data.field), type:"insert"},
success:function(msg)
{
var index = layer.alert(msg,{
title:'执⾏信息'
},function(){
// 关闭弹出层
layer.close(index);
var iframeIndex = FrameIndex(window.name);
parent.layer.close(iframeIndex);
if(msg=="添加成功")
{
//重载表格
}
});
}
});
return false;
});
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论