layui.use([ 'laypage', 'layer', 'table', 'element','form','upload'], function(){ var laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = layui.table //表格 ,element = layui.element //元素操作 ,form = layui.form ,upload = layui.upload; var tableIds = 'photoalbumlist'; //第一个实例 table.render({ elem: '#'+tableIds ,url: '/dictionary/photoalbumform' //数据接口 ,where:{token:csrfToken} ,method:'post' ,page: true //开启分页 ,height:600 ,text:'数据加载中' ,id:'tablerReload' ,cols: [[ //表头 // {type: "checkbox", width:50} {type:'numbers'} ,{field: 'name', title: '相册分类名称', align:'center'} ,{field: 'sort', title: '排序',width:80, edit: 'text',align:'center',sort: true,templet:"#sortBox"} ,{field: 'check_img', title: '选中', width:150,align:'center',templet:function(d){ return ''; }} ,{field: 'uncheck_img', title: '未选中', width:150,align:'center',templet:function(d){ return ''; }} ,{field: 'is_show', title: '是否下架',width:100, align:'center', templet:"#Toexamine",templet:function(d){ if(d.is_show == 2){ return '' } else { return '' } }} ,{field: 'create_at', title: '添加时间', width:200,align:'center'} ,{field: 'update_at', title: '更新时间', width:200,align:'center'} ,{fixed: 'right',title:'操作', width: 180, align:'center', toolbar: '#operate'} ]] }); table.reload('tablerReload'); //重新加载 //列表操作 table.on('tool('+tableIds+')', function(obj){ var layEvent = obj.event, data = obj.data; if(layEvent === 'edit'){ layer.open({ type: 2, title: '修改户型', closeBtn: 1, //不显示关闭按钮 shade: [0], area: ['600px', '500px'], anim: 2, content: ['/dictionary/photoalbumedit?id='+data.id, 'yes'], //iframe的url,no代表不显示滚动条 }); } else if(layEvent === 'del') { layer.confirm('您确定要删除吗?',{ btn: ['确定', '取消']},function () { $.post('/dictionary/photoalbumdel',{'id':data.id,type:'del'},function (data) { if(data.code == 200) { layer.msg(data.msg); table.reload('tablerReload'); } else if(data.code == 300 ) { layer.msg(data.msg); } }) }) } }); /* 列表操作 edit 修改后执行 */ table.on('edit('+tableIds+')', function(obj){ var data = obj.data; if(obj.field=="sort"){ $.post('/dictionary/photoalbumdel',{id:data.id,sort:data.sort,type:'sort'},function (data) { if(data.code == 200) { layer.msg(data.msg); } else if(data.code == 300 ) { layer.msg(data.msg); } }) } }) //显示或隐藏 form.on('switch(switchTest)', function(data){ var state = ''; if(data.elem.name == 1){ state = 2; }else if(data.elem.name == 2){ state = 1; } layer.confirm('确定要修改此操作吗?',{btn: ['确定', '取消']},function () { $.post('/dictionary/photoalbumdel',{id:data.value,type:'is_show',is_show:state},function (data) { if(data.data != null){ layer.msg(data.msg); return false; } layer.msg(data.msg); table.reload('tablerReload'); }) },function (aa) { table.reload('tablerReload'); }) }); var $ = layui.$, active = { addData: function(){ //获取选中数据 layer.open({ type: 2, title: '添加相册分类', closeBtn: 1, //不显示关闭按钮 shade: [0], area: ['600px', '500px'], anim: 2, content: ['/dictionary/photoalbumadd', 'yes'], //iframe的url,no代表不显示滚动条 }); // var checkStatus = table.checkStatus('idTest') // ,data = checkStatus.data; // layer.alert(JSON.stringify(data)); } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); // //修改 // form.on('submit(editphotoalbum)', function(data){ // $.post('/dictionary/photoalbumeditform',{'data':data.field,'token':csrfToken},function (data) { // if(data.code == 200) // { // layer.msg(data.msg); // parent.layui.table.reload('tablerReload'); // TableClose(); // // parent.layui.table.reload(tableIds); // } else if(data.code == 300 ) { // layer.msg(data.msg); // } // }) // return false; // }); // //添加 // form.on('submit(addphotoalbum)', function(data){ // $.post('/dictionary/photoalbumaddform',{'data':data.field,'token':csrfToken},function (data) { // if(data.code == 200) // { // layer.msg(data.msg); // // parent.layui.table.reload(tableIds); // parent.layui.table.reload('tablerReload'); // TableClose(); // } else if(data.code == 300 ) { // layer.msg(data.msg); // } // }) // return false; // }); //添加图片上传 upload.render({ elem: '#test1' ,url: '/house/createimg' ,data:{token:csrfToken} ,field:'check_img' ,size:1000 //限制上传图片的大小,单位为KB ,exts: 'png|jpg|jpeg' //只允许上传压缩文件 ,auto:false ,bindAction:'#addcity' ,choose: function(obj){ obj.preview(function(index, file, result){ $('#demo1').attr('src', result); //图片链接(base64) }); } }); //添加图片上传 upload.render({ elem: '#test2' ,url: '/house/createimg' ,data:{token:csrfToken} ,field:'uncheck_img' ,size:1000 //限制上传图片的大小,单位为KB ,exts: 'png|jpg|jpeg' //只允许上传压缩文件 ,auto:false ,bindAction:'#addcity' ,choose: function(obj){ obj.preview(function(index, file, result){ $('#demo2').attr('src', result); //图片链接(base64) }); } }); // 点击放大图片 $('.layui_magnify').on('click', function(){ var _src = $(this).attr('src'); layui.layer.open({ type: 1, title: false, //是否显示标题 area: ['60%', '80%'], shade: 0.6, //透明度 closeBtn: 1, //按钮 1有,0无 shadeClose: true, content: '', }); }); //添加 form.on('submit(addphotoalbum)', function(data){ var index = layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8}); //数据提交提示 var formData = new FormData($('#add_photo')[0]); //layer.msg(data.msg); $.ajax({ cache : true, type : "post", url : '/dictionary/photoalbumaddform', data : formData, // 你的formid // async : false, //async 默认为true异步,修改为false为同步 contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件 processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data // error : function(request) { // layer.close(index); //关闭数据提交信息 // layer.alert("网络超时"); // }, success : function(data) { if (data.code == 200) { layer.msg(data.msg); parent.layui.table.reload('tablerReload'); TableClose(); } else if(data.code == 300){ layer.msg(data.msg); layer.msg(ReturnInfo(data.data),{icon:5}); } } }); return false; }); //修改 form.on('submit(editphotoalbum)', function(data){ var index = layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8}); //数据提交提示 var formData = new FormData($('#photo_form')[0]); $.ajax({ cache : true, type : "post", url : '/dictionary/photoalbumeditform', data : formData, // 你的formid // async : false, //async 默认为true异步,修改为false为同步 contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件 processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data error : function(request) { layer.close(index); //关闭数据提交信息 layer.alert("网络超时"); }, success : function(data) { if (data.code == 200) { layer.msg(data.msg); parent.layui.table.reload('tablerReload'); TableClose(); } else if(data.code == 300){ layer.msg(data.msg); layer.msg(ReturnInfo(data.data)); } } }); return false; }); });