1. 程式人生 > 實用技巧 >layui資料表格刪除、編輯和檢視

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);
        //                         }
        //    });
        //     });
       
        }
    });

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