layui+TP5 实现编辑功能

最新推荐文章于 2022-12-23 17:45:44 发布

钓鱼要到岛上钓

最新推荐文章于 2022-12-23 17:45:44 发布

阅读量1.7k

点赞数 2

文章标签： layui tp5 后台管理系统代码 thinkphp

本文链接：https://blog.csdn.net/qq_42942555/article/details/86636787

版权

今天来记录一下后台管理与系统用户编辑功能，主要逻辑是点击选择框记录下当前用户的id，弹出弹出层之后直接ajax后台返回该用户id，然后把信息展示到弹出层中，当修改信息的时候绑定事件提交，后台进行验证，通过之后提示消息，关闭弹窗。刷新数据。
如果用户展示还不明白的可以参考上几节的内容：
https://blog.csdn.net/qq_42942555/article/details/86573879
下面直接上代码：
1.前端

      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
          return;
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
          return;
        } else {
        	var options={};
    		options.type=1;
    		options.title="编辑用户";
    		options.content=$('#updateUser');
    		options.btn=[ '确定','关闭'];
    		options.area= ['350px', '500px'];
    		options.end=function () {
    			location.reload();
    		      };

    		
    		

    		//自动获取select中的值
    		options.success=function(){
    			$.post('/tp5/index.php/admin/Admin/getUpdataeUserIfor',{
    				id:checkStatus.data[0].id,
    			},function(res){
    				//先清空 
    				var role = document.getElementById("termId4");
    				var opts2 = role.getElementsByTagName("option");
    				for(var x=opts2.length-1;x>0;x--){
    				      role.removeChild(opts[x]);
    				        }

    				var opt = "<option value='' selected = \'selected\'>--请选择--</option>";
    				$("select[name=termId3]").append(opt);
    				for(var i=0; i<res.list.length; i++){
    				var option="<option value=\""+res.list[i].termId3+"\"";
    				option += ">"+res.list[i].deptname+"</option>"; //动态添加数据
    				$("select[name=termId3]").append(option);
    				}
    				
    				$("select[name=termId4]").append(opt);
    				for(var i=0; i<res.list2.length; i++){
    				var option2="<option value=\""+res.list2[i].termId4+"\"";
    				option2 += ">"+res.list2[i].role_name+"</option>"; //动态添加数据
    				$("select[name=termId4]").append(option2);
    				}
    				
    				
    				//console.log(data.user.username);
    				$(" input[ name='upUsername' ] ").val(res.list3[0].username);
    				$(" input[ name='upRelname' ] ").val(res.list3[0].realname);
    				//jquery 选择器改变单选框的选中状态
    				if(res.list3[0].sex==1){
    				$("input[name='upSex']").get(0).checked=true; 
    				}
    				else{
    				$("input[name='upSex']").get(1).checked=true;
    				}
    				//console.log(res.list3[0].dept);
    				//这种方法不能动态改变select中的选中状态，只能使用索引值
    				//$("#termId3").find("option:contains(res.list3[0].dept)").attr("selected",true);
    				for(var i=0; i<res.list.length; i++){
    					if(res.list[i].deptname==res.list3[0].dept) {
    						$("#termId3 ").get(0).selectedIndex=i+1; 
    					}
    				}
    				//console.log(res.list[1].deptname);
    				for(var j=0; j<res.list2.length; j++){
    					if(res.list2[j].role_name==res.list3[0].role) {
    						$("#termId4 ").get(0).selectedIndex=j+1; 
    					}
    				}
    				
    				$(" input[ name='upPhone' ] ").val(res.list3[0].phone);
    				$(" input[ name='upEmail' ] ").val(res.list3[0].email);
    				$(" input[ name='upTime' ] ").val(res.list3[0].ctime);
    				
    				$(".layui-laypage-btn")[0].click(); 
    				
    				
    			},'json');
    			
    			  
    		}
    		//修改
    		options.yes=function(){
    			$.post('/tp5/index.php/admin/Admin/updataeUserIfor',{
    			  id:checkStatus.data[0].id,
    			  username:$(" input[ name='upUsername' ] ").val(),
       			  relname:$(" input[ name='upRelname' ] ").val(),
       			  sex:$("input[name='upSex']:checked").val(),
       			  dept:$('#termId3 option:selected').text(),//获取选中的文本值 val() 是value
       			  role:$('#termId4 option:selected').text(),
       			  phone:$(" input[ name='upPhone' ] ").val(),
       			  email:$(" input[ name='upEmail' ] ").val(),
       			  ctime:$(" input[ name='upTime' ] ").val(),
    			},function(data){
    				 if(data.error){
       				  layer.alert(data.error);
       				  return;
       				  }
    			  layer.alert(data.yes);
    			 
    			  setTimeout(function(){
    				  layer.close(index);
    				},2000)
    			  
    			},'json');
    		}
         
        }
        var index=layer.open(options);
      break;


	<!--修改信息  -->
	<div id="updateUser" style="display:none">
	<div class="layui-form-item" lay-filter="boardFilter">
    <label class="layui-form-label">用户名：</label>
    <div class="layui-input-block">
      <input style="width:200px;" type="text" name="upUsername" required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
     </div>
     
     <div class="layui-form-item">
    <label class="layui-form-label">真实姓名：</label>
    <div class="layui-input-block">
      <input style="width:200px;" type="text" name="upRelname" required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
     </div>
     
  
   <div class="layui-form-item">
    <label class="layui-form-label">性别：</label>
    <div class="layui-input-block" style="margin-top:2px;">
      <input type="radio" name="upSex" value=1 title="男">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="upSex" value=0 title="女" checked>女
    </div>
  </div>

  
   <div class="layui-form-item">
    <label class="layui-form-label">所在部门：</label>
    <div class="layui-input-block">
      <select name="termId3" id="termId3" lay-verify="required">

      </select>
    </div>
  </div>
     
   <div class="layui-form-item">
    <label class="layui-form-label">当前职位：</label>
    <div class="layui-input-block">
      <select name="termId4" id="termId4" lay-verify="required2">

      </select>
    </div>
  </div>
     
     <div class="layui-form-item">
    <label class="layui-form-label">联系方式：</label>
    <div class="layui-input-block">
      <input style="width:200px;" type="text" name="upPhone" required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
     </div>
      <div class="layui-form-item">
    <label class="layui-form-label">邮箱：</label>
    <div class="layui-input-block">
      <input style="width:200px;" type="text" name="upEmail" required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
     </div>
     
     <div class="layui-form-item ">
    <label class="layui-form-label">就职日期：</label>
    <div class="layui-input-block">
       <input style="width:200px;" id="time2" type="text" name="upTime" required  lay-verify="required" placeholder="请选择日期" autocomplete="off" class="layui-input">
    </div>
  </div>
	
</div>
<script>

//绑定日期控件(同时绑定多个)非常实用！
function useLayDateMultiple(cls) {
layui.use('laydate', function() {
var laydate = layui.laydate;
lay('#' + cls).each(function() {
laydate.render({
elem : this,
trigger : 'click'
});
});
});
}
useLayDateMultiple('time1');
useLayDateMultiple('time2');
</script>

2.后台 controller层

    //显示要修改的信息
    public  function getUpdataeUserIfor($id){
        $Dept=new Dept();
        $Role=new Role();
        $list=$Dept->field('deptname')->select();
        //         $rs=Db::query('select deptname from dept');
        $list2=$Role->field('role_name')->select();
        $list3=Db::query("select * from users where id = '$id'");
        $arr=array();
        $arr['list']=$list;
        $arr['list2']=$list2;
        $arr['list3']=$list3;
        return json($arr);   
    }
    //修改用户信息
    public function updataeUserIfor($id,$username,$relname,$sex,$dept,$role,$phone,$email,$ctime){
        if(!$username){
            return json(array("error"=>"用户名不能为空！"));
        }
        if(!$relname){
            return json(array("error"=>"真实姓名不能为空！"));
        }
        if (!preg_match('/^([\xe4-\xe9][\x80-\xbf]{2}){2,4}$/', $relname)){
            return json(array("error"=>"姓名格式不正确！"));
        }
        if($dept=="--请选择--"){
            return json(array("error"=>"请选择部门！"));
        }
        if($role=="--请选择--"){
            return json(array("error"=>"请选择职位！"));
        }
        if(!$phone){
            return json(array("error"=>"请填写联系方式！"));
        }
        if(!is_numeric($phone)){
            return json(array("error"=>"请填写正确格式的号码!！"));
        }
        
        //邮箱可以为空。但是不可填错误格式的邮箱
        if($email!=null){
            if(!preg_match('/([a-z0-9]*[-_.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[.][a-z]{2,3}([.][a-z]{2})?/i',$email)){
                return json(array("error"=>"请填写正确格式的邮箱!！"));
            }
        }
        if(!$ctime){
            return json(array("error"=>"请填写入职时间！"));
        }
        $data_a=db('users')->field('username')->where("id!=".$id)->>select();         
       for ($i=0;$i<count($data_a);$i++){
                        if ($package_type==$data_a[$i]['package_type']){
                            return json(['code' => 201, 'message' => '用户名重复']);
                        }
                    }         
        $Users=new Users();
        $data = array('username'=>$username,'realname'=>$relname,'sex'=>$sex,
            'dept'=>$dept,'role'=>$role,'email'=>$email,'ctime'=>$ctime);
        $Users-> where("id='$id'")->setField($data);
        return json(array("yes"=>"修改成功！"));

    }

效果展示:
在这里插入图片描述

有任何疑问可直接回复！

钓鱼要到岛上钓

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
layui+TP5 实现编辑功能

今天来记录一下后台管理与系统用户编辑功能，主要逻辑是点击选择框记录下当前用户的id，弹出弹出层之后直接ajax后台返回该用户id，然后把信息展示到弹出层中，当修改信息的时候绑定事件提交，后台进行验证，通过之后提示消息，关闭弹窗。刷新数据。如果用户展示还不明白的可以参考上几节的内容：https://blog.csdn.net/qq_42942555/article/details/8657387...
复制链接

扫一扫