tp5中layui表格编辑按钮弹出层编辑
未知
2023-12-07 10:17:20
0

html代码:

 <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>

edit.html文件

<!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>

php代码

//执行修改
    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'=>'更新数据失败或者没有修改任何数据就提交了']);
            }
        }

    }


相关内容

云服务器上Kubernet...
本文介绍了在云服务器上搭建Kubernetes集群的实战过程,包括...
2024-11-20 17:00:41
云服务器上Kubernet...
本指南详述了云服务器上Kubernetes集群的部署与运维步骤,包...
2024-11-20 16:23:44
云服务器上Kubernet...
摘要:本文详解了云服务器上Kubernetes集群的部署方案,包括...
2024-11-20 15:00:48
tp5中MySQL如何获取...
第一种: // 假设$user是从数据库中查询出的用户信息 $us...
2024-05-10 09:02:51
穿梭框layui.tran...
div id=test1 class=demo-transfer/...
2024-04-09 15:59:09
tp5和layui表单提交...
form class=layui-form layui-form-...
2024-04-09 14:45:31

热门资讯

JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...