layui數據表格刪除、編輯和查看

轉自於：https://blog.csdn.net/weixin_41606652/article/details/84262729

剛好需要用到后台，發現layui比較輕松，給剛開始寫的留點思路，少踩點坑


好了，直接上代碼

 table.on('tool(users)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
      var data = obj.data; //獲得當前行數據
      var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
      var tr = obj.tr; //獲得當前行 tr 的DOM對象

      if(layEvent === 'detail'){ //查看
        //do somehing
            layer.alert('序號:'+ data.userId+'<br>id:'+data.jobNo+'<br>編號：'+data.userName+'<br>密碼:'+data.pwd+'<br>權限:'+data.class);

        } else if(layEvent === 'del'){ //刪除
            layer.confirm('真的刪除ID為：'+data.userId+"的用戶嗎?", function(index){
            
                //console.log(data.p_id);
                //向服務端發送刪除指令
                    $.ajax({
                        url:'../php/users.del.php',
                        type:'get',
                        data:{'id':data.userId},//向服務端發送刪除的id
                        success:function(suc){
                            if(suc==200){
                                obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
                                layer.close(index);
                                console.log(index);
                                layer.msg("刪除成功",{icon:1});
                            }
                            else{
                                layer.msg("刪除失敗",{icon:5});
                            }
                        }
                    });
                    layer.close(index); 
                     });
              
      } else if(layEvent === 'edit'){ //編輯
        console.log(data);
						layer.open({
                            type: 1,
                            area: ['500px', '700px'],
                            title: "更改信息",
                            fixed: false, //不固定
                            maxmin: true,
                            maxmin: false,
                            shadeClose:false,
                            content: $('#usersedit')
                          });
                          //表單值
                          form.val("usereditform",{
                            "userid":data.userId,
                            "userno":data.jobNo,
                            "username":data.userName,
                            "userpwd":data.pwd,
                            "userclass":data.class
                         });
                        

        //     //同步更新緩存對應的值
        //     layer.confirm('要修改ID為：'+data.userId+"的用戶嗎?", function(index){
        //         console.log(data.inexType);
        //         var useredit={
        //             "userId":data.userId,
        //             "jobNo":data.jobNo,
        //             "userName":data.userName,
        //             "pwd":data.pwd,
        //             "class":data.class
        //         };
        //         $.ajax({
        //         url:'../php/users.edit.php',
        //         type:'post',
        //         data:useredit,
        //                         //dataType:'json',
        //                         success:function(sess){
        //                     if(sess==200){
        //                         layer.msg("編輯成功",{icon:1});
        //                     }
        //                     else{
        //                         layer.msg("編輯失敗",{icon:5});
        //                     }
        //                 },
        //                         error:function (xhr,status,error) {
        //                             console.log(xhr);
        //                             console.log(status);
        //                             console.log(error);
        //                         }
        //    });
        //     });
       
        }
    });

 

目前就是這么了，不會的請留言，大神請指教…