tp5中layui表格编辑按钮弹出层编辑
发布时间：2023-12-07作者：小灵龙点击：179
<table class="layui-table " lay-filter="mytable" id="mytable"></table>
<script type="text/html" id="action">
<a lay-event='edit' class="layui-btn layui-btn-sm">修改</a>
</script>
<script type="text/javascript">
layui.use(['table','form'],function(){
var table=layui.table,form=layui.form;
var tableIn=null
tableIn=table.render({
elem:'#mytable'
,url:"__URL__/index"
,method:'post'
,page:{
limit:10
,limits:[10,50,100]
,groups:5
,layout:['count','first','prev','page','next','last','limit']
}
,cols:[[
{field:'mid',title:'编号',sort:true,fixed:true,width:100}
,{field:'username',title:'用户名'}
,{title:'操作',templet:'#action',width:180}
]]
});
//监听行工具
table.on('tool(mytable)',function(obj){
data=obj.data;
layEvent=obj.event;
current_page=$(".layui-laypage-em").next().html();
if(layEvent=='edit'){
layer.open({
title: '修改会员账户'
,type: 2
,shadeClose: true
,shade: 0.8
,area: ['60%', '50%']
,btn: ['确定']
,content: '__URL__/editMember?id='+data.mid //iframe的url
,yes: function(index, layero){
//do something确定按钮回调方法
//当点击‘确定’按钮的时候，获取弹出层返回的值。callbackdata是iframe页面中js自定义的函数
var res = window["layui-layer-iframe" + index].callbackdata();
//打印返回的值，看是否有我们想返回的值。
fields=JSON.stringify(res); //转为 JSON数组格式
// return false;
$.ajax({
url:"__URL__/updateMember",
type:"post",
data:{'val':fields},
beforeSend:function(){
loading=layer.load(1,{shade:[0.3,'#000']});
},success:function(data){
console.log(data);
// return false;
layer.close(loading);
if(data.code==1000){
layer.msg(data.msg,{icon:1});
layer.closeAll();
tableIn.reload({
page:{curr:current_page}
})
}else{
layer.msg(data.msg,{icon:2});
}
}
})
}
})
}
})
});
</script>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>修改会员</title>
<!-- layui -->
<link rel="stylesheet" type="text/css" href="__STATIC__/layui/css/layui.css">
<script type="text/javascript" src="__STATIC__/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
</head>
<body>
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" >
<input type="hidden" name="mid" value="{$list.mid}">
<div class="layui-form-item">
<label class="layui-form-label">登录账号</label>
<div class="layui-input-block">
<input type="text" name="username" value="{$list.username}" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" value="{$list.email}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户级别</label>
<div class="layui-input-block">
<select name="rank_id" class="layui-input" autocomplete="off">
<option value="1" {eq name="$list.rank_id" value="1" }selected{/eq}>OEM合作商</option>
<option value="2" {eq name="$list.rank_id" value="2" }selected{/eq}>战略合作商</option>
</select>
</div>
</div>
</form>
</div>
</div>
<script>
var callbackdata = function () {
var data = $('form').serializeArray()
return data;
}
</script>
//执行修改
public function updateMember(){
if(request()->isPost()){
$json_para = (array)json_decode(htmlspecialchars_decode(input('val')), true);
$request_m = array();
for($i=0;$i<count($json_para);$i++) {
$request_m[$json_para[$i]['name']] = $json_para[$i]['value'];
}
//调用model类写入数据库
$mm=Db::name('member')->update($request_m);
if($mm!=0){
return json(['code'=>1000,'msg'=>'修改成功']);
}else {
return json(['code'=>1001,'msg'=>'更新数据失败或者没有修改任何数据就提交了']);
}
}
}