layui数据表格删除、编辑和查看

刚好需要用到后台,发现layui比较轻松,给刚开始写的留点思路,少踩点坑
layui数据表格删除、编辑和查看_第1张图片
在这里插入图片描述
好了,直接上代码

 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+'
id:'+data.jobNo+'
编号:'+data.userName+'
密码:'+data.pwd+'
权限:'+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); // } // }); // }); } });

目前就是这么了,不会的请留言,大神请指教…

你可能感兴趣的:(JS,layui)