layui資料表格刪除、編輯和檢視
阿新 • • 發佈:2020-12-11
轉自於: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); // } // }); // }); } });
目前就是這麼了,不會的請留言,大神請指教…