开发工具与关键技术:MVC和C#
作者:郑健鹏
撰写时间:2019/06/27
我们在浏览网页是时候有很多网页上有个删除的选项,当我们点击后某一条数据上的删除选项后网页会弹出个是否删除的提问框,提问框有两个选项,分别是确定和取消,当我们点击确定的时候所选的那条数据就会被删除。
今天我们来实现这个删除的功能,我们来实现这个功能前需要引用layui的JS和CSS。引入JS是需要它里面的表格样式,CSS是为了需要它的信息提问框,不用原版提问框的原因就是原版的提问框是在页面的上方,而layui的提问框可以自定义位置也更美观。
上方是原版的提问框,样式比较单调,不仅不能移动和不能加内容前面的小图标,而且上方显示的信息也不能更改。
这个是layui的提问框,而且上方的提示信息可以更改,内容前面的小图标也可以更改,也可以随意拖动。
现在我们开始来学习如何删除某一条数据和删除后表格自动刷新,在这里我是通过数据的ID来删除选中的数据,通过数据的ID来删除数据比通过名字删除好,因为数据库里面的数据ID不能重复,删除后就无法恢复,而数据的名字删除后可以重新新增一模一样的名字。
在开始前我们先渲染一个存放数据的表格,在渲染表格前我们需要调用layui表格layui.use([‘table’, ‘layer’], function (){};这句是调用layui里面的表格和layer提示框,当表格调用后则需要在代码中写出查询数据的方法和在视图上敲出我们需要用到的表头
要删除或者修改某条数据我们需要监听所点击的数据,这里我们需要用到行监听
这一切准备就绪后我们就开始写删除的方法,每将当删除完一条数据后表格将会自动刷新,从而显示最新的数据。
function saveDelete(UnitID) {
layer.confirm("确认删除该单位吗?",
{ icon: 3, offset: '100px', title: '提示' },
function (index) {
layer.close(index);
$.getJSON("DeleteUnit?UnitID=" + UnitID, function (msg) {
//刷新table
if (msg.State) {
layer.alert(msg.Text, { icon: 1, offset: '150px', skin: 'layui-layer-molv', closeBtn: 0 });
Unit.reload();
} else {
layer.alert(msg.Text, { icon: 5, offset: '150px' });
}
})
});
}