layui修改、删除
程序员文章站
2022-04-08 09:33:18
...
jsp前端
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui在线调试</title>
<link rel="stylesheet" href="<%=basePath%>js/layui/css/layui.css" media="all">
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="<%=basePath%>js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
var laydate = layui.laydate //日期
,laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,carousel = layui.carousel //轮播
,upload = layui.upload //上传
,element = layui.element; //元素操作
//监听Tab切换
element.on('tab(demo)', function(data){
layer.msg('切换了:'+ this.innerHTML);
console.log(data);
});
//执行一个 table 实例
table.render({
elem: '#test'
,page: true //开启分页
,url:'/lightnote/informa/findallEmp' //数据请求路径
,cellMinWidth: 80
,cols: [[
{field:'id', width:200, title: 'ID', sort: true}
,{field:'enterprise', width:180, title: '企业名称'}
,{field:'establishment', width:120, title: '成立时间', sort: true}
,{field:'registration', width:100, title: '注册地'}
,{field:'registered', width:100, title: '注册资金', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'number', width:100, title: '总人数', sort: true}
,{field:'socialSecurity', width:100, title: '社保人数', sort: true}
,{field:'research', width:100, title: '研发人数'}
,{field:'registrationType', width:150, title: '注册类型', sort: true}
,{field:'operation', width:200, title: '经营范围'}
,{field:'product', width:200, title: '主营产品', sort: true}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
//obj.del();
console.log(obj);
console.log(data);
//layer.close(index);
$.ajax({
url: "/lightnote/informa/informationDelete",
type: "POST",
data:{'id':data.id},
dataType: "json",
success: function(data){
if(data==null){
layer.msg("删除失败", {icon: 5});
}else{
//删除这一行
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
layer.closeAll();
parent.location.reload();
Load(); //删除完需要加载数据
}
},
error:function(){
alert(data);
},
});
});
} else if(obj.event === 'edit'){
console.log(data);
console.log(obj);
//layer.alert('编辑行:<br>'+ JSON.stringify(data))
layer.open({
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['700px', '550px'],
type: 1,
closeBtn: false,
shift: 25,
content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
'<form class="layui-form"> ' +
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">id</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="id" class="layui-input" value="'+data.id+'" >' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">企业名称</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="enterprise" class="layui-input" value="'+data.enterprise+'" >' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">成立时间</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="establishment" class="layui-input" value="'+data.establishment+'" >' +
'</div></div>' +
'</div>' +
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">注册地</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="registration" class="layui-input" value="'+data.registration+'" >' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">注册资金</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="registered" class="layui-input" value="'+data.registered+'" >' +
'</div></div>' +
'</div>' +
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">总人数</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="number" class="layui-input" value="'+data.number+'" >' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">社保人数</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="socialSecurity" class="layui-input" value="'+data.socialSecurity+'" >' +
'</div></div>' +
'</div>' +
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">研发人数</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="research" class="layui-input" value="'+data.research+'" >' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">注册类型</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="registrationType" class="layui-input" value="'+data.registrationType+'" >' +
'</div></div>' +
'</div>' +
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">经营范围</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="operation" class="layui-input" value="'+data.operation+'" >' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">主营产品</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="product" class="layui-input" value="'+data.product+'" >' +
'</div></div>' +
'</div>' +
'</form>',
btnAlign: 'c',
btn: ['确定', '取消'],
yes: function (index, layero) {
/* var str = $("input[name=isIndividual]").val();
if (str == "on") {
str = "1";
} else {
str = "0";
}
if ($("input[name=siteName]").val() == null || $("input[name=siteName]").val() == "") {
layer.msg('请输入站点名称', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=siteName]").focus();
});
return false;
} else if ($("input[name=fileRecord]").val() == null || $("input[name=fileRecord]").val() == "") {
layer.msg('请输入备案号', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=fileRecord]").focus();
});
return false;
} else if ($("input[name=type]").val() == null || $("input[name=type]").val() == "") {
layer.msg('请输入平台信息', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=type]").focus();
});
return false;
} else if ($("input[name=sitePhone]").val() == null || $("input[name=sitePhone]").val() == "") {
layer.msg('请输入联系电话', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=sitePhone]").focus();
});
return false;
} */
var formData = {
id: $("input[name='id']").val(),
enterprise: $("input[name='enterprise']").val(),
establishment: $("input[name='establishment']").val(),
registration: $("input[name='registration']").val(),
registered: $("input[name='registered']").val(),
number: $("input[name='number']").val(),
socialSecurity: $("input[name='socialSecurity']").val(),
research: $("input[name='research']").val(),
registrationType: $("input[name='registrationType']").val(),
operation: $("input[name='operation']").val(),
product: $("input[name='product']").val()
};
console.log(formData);
$.post('${basePath}informa/informationedit', formData, function (data) {
console.log(window.location.href);
//判断是否发送成功
if (data.code == 200) {
layer.msg("保存失败...", {type: 1});
} else {
layer.close(index);
layer.closeAll();
parent.location.reload();
}
})
}, btn2: function (index, layero) {
layer.msg("取消");
//return false 开启该代码可禁止点击该按钮关闭
}, cancel: function () {
layer.msg("关闭窗口");
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
},
success: function () {
layui.use('form', function () {
var form = layui.form; //只有执行了这一步,部分表单元素才会修饰成功
form.render('checkbox');
form.on('checkbox(istrue)', function (data) {
/* if(data.elem.checked){
emailConfig['isenterprise']=1;
}; //是否被选中,true或者false*/
});
});
}
});
};
//分页
laypage.render({
elem: 'pageDemo' //分页容器的id
,count: 100 //总页数
,skin: '#1E9FFF' //自定义选中色值
//,skip: true //开启跳页
,jump: function(obj, first){
if(!first){
layer.msg('第'+ obj.curr +'页');
}
}
});
})
});
</script>
</body>
</html>
上一篇: 一个简单的jxl文件上传功能