images.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. layui.config({
  2. base : "../../js/"
  3. }).use(['flow','form','layer'],function(){
  4. var flow = layui.flow,
  5. form = layui.form(),
  6. layer = parent.layer === undefined ? layui.layer : parent.layer,
  7. $ = layui.jquery;
  8. //流加载图片
  9. var imgNums = 15; //单页显示图片数量
  10. flow.load({
  11. elem: '#Images', //流加载容器
  12. done: function(page, next){ //加载下一页
  13. $.get("../../json/images.json",function(data){
  14. //模拟插入
  15. var imgList = [];
  16. var maxPage = imgNums*page < data.length ? imgNums*page : data.length;
  17. setTimeout(function(){
  18. for(var i=imgNums*(page-1); i<maxPage; i++){
  19. imgList.push('<li><img src="'+ data[i].imgSrc +'"><div class="operate"><div class="check"><input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="'+data[i].imgTitle+'"></div><i class="layui-icon img_del">&#xe640;</i></div></li>')
  20. }
  21. next(imgList.join(''), page < (data.length/imgNums));
  22. form.render();
  23. }, 500);
  24. });
  25. }
  26. });
  27. //删除单张图片
  28. $("body").on("click",".img_del",function(){
  29. var _this = $(this);
  30. layer.confirm('确定删除图片"'+_this.siblings().find("input").attr("title")+'"吗?',{icon:3, title:'提示信息'},function(index){
  31. _this.parents("li").hide(1000);
  32. setTimeout(function(){_this.parents("li").remove();},950);
  33. layer.close(index);
  34. });
  35. })
  36. //全选
  37. form.on('checkbox(selectAll)', function(data){
  38. var child = $("#Images li input[type='checkbox']");
  39. child.each(function(index, item){
  40. item.checked = data.elem.checked;
  41. });
  42. form.render('checkbox');
  43. });
  44. //通过判断文章是否全部选中来确定全选按钮是否选中
  45. form.on("checkbox(choose)",function(data){
  46. var child = $(data.elem).parents('#Images').find('li input[type="checkbox"]');
  47. var childChecked = $(data.elem).parents('#Images').find('li input[type="checkbox"]:checked');
  48. if(childChecked.length == child.length){
  49. $(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = true;
  50. }else{
  51. $(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = false;
  52. }
  53. form.render('checkbox');
  54. })
  55. //批量删除
  56. $(".batchDel").click(function(){
  57. var $checkbox = $('#Images li input[type="checkbox"]');
  58. var $checked = $('#Images li input[type="checkbox"]:checked');
  59. if($checkbox.is(":checked")){
  60. layer.confirm('确定删除选中的图片?',{icon:3, title:'提示信息'},function(index){
  61. var index = layer.msg('删除中,请稍候',{icon: 16,time:false,shade:0.8});
  62. setTimeout(function(){
  63. //删除数据
  64. $checked.each(function(){
  65. $(this).parents("li").hide(1000);
  66. setTimeout(function(){$(this).parents("li").remove();},950);
  67. })
  68. $('#Images li input[type="checkbox"]').prop("checked",false);
  69. form.render();
  70. layer.close(index);
  71. layer.msg("删除成功");
  72. },2000);
  73. })
  74. }else{
  75. layer.msg("请选择需要删除的图片");
  76. }
  77. })
  78. })