layui後臺管理系統的坑

 1 <script>
 2 
 3     //公共js頁
 4     //修改的iframe 接列表傳來的值， 封裝好直接調用， 具體是啥意思我也不知道 —_—||
 5     function  GetQueryString(name) {  6         var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");  7         var  r = window.location.search.substr(1).match(reg);  8         if(r != null) return   unescape(r[2]);  9         return  null;  10  }  11 
 12     //list:數組
 13     //key:主鍵名稱
 14     //val:組件的值 封裝了一個方法， 方便在edit裏面取 id， 不用每次都for循環
 15     function getListItemByKey(list, key, val) {  16         if(list != null) {  17             for(var i = 0; i < list.length; i++) {  18                 if(list[i][key] == val) {  19                     return list[i];  20  }  21  }  22  }  23  }  24 
 25     // list頁
 26     function edit(id) {  27  let obj = getListItemByKey(list, "id", id);  28         // let title = getListItemByKey(list,"title",title);
 29         // 傳輸的是中文的話，傳到下一頁會亂碼，須要encodeURI();進行轉碼
 30         // 兩次轉碼，以後到update頁再解碼， 因爲是傳id 在下一頁重查， 因此沒傳， 並且傳輸大量中文的話容易出現問題
 31         // let title = encodeURI(encodeURI(obj.title));
 32         // console.log(title)
 33  let modelName = '修改信息';  34         // var timestamp = (new Date()).getTime()/1000; //因爲瀏覽器相同地址會默認有緩存，加上時間戳變會認爲打開的不是同一個網址， 不過layui默認iframe 打開的
 35         // 不是同一個網址， 因此時間戳沒用上， 便註釋掉了
 36         var url = '../case_update/yj.html?id=' + id; //傳值將id 傳到下一頁，在下一頁從新查詢一遍須要修改的信息，顯示在頁面上
 37  x_admin_show(modelName, url); // layui自帶的方法，用來跳轉到哪一頁
 38  }  39 
 40     // update 頁
 41     // 調用封裝好的方法， 得到上一頁欻傳來的id
 42     var id = GetQueryString("id");  43 
 44  $.ajax({  45  type: 'post',  46  url: url + '',  47  dataType: "json",  48  async: true,  49  data: {  50  id: id  51  },  52  success: function(data) {  53             // 因爲修改是用form表單提交， 因此要把獲取的值放進form表單中
 54  $('input[name="case_id"]').val(data.obj[0].id); // 放入的屬性是name=""
 55  $('#title').val(data.obj[0].title); // 放入的屬性是id=""
 56  }  57  });  58 
 59     //修改圖片
 60     var photoes = [];  61 
 62  $("#photo").change(function() {  63         var file = this.files[0];  64  photoes.push(file);  65         var filereader = new FileReader();  66  filereader.onload = function(e) {  67             var base64 = e.target.result; //轉成base64 顯示在頁面上
 68  $("#photos").append("<img class=\"appedphoto\" src=\"" + base64 + "\" />");  69  }  70  filereader.readAsDataURL(file);  71  });  72 
 73  $("#upload").click(function() {  74 
 75         if (photoes.length == 0) {  76  update_case();  77             return;  78  }  79 
 80         var formData = new FormData(document.getElementById("ff")); // ff爲表單的id
 81 
 82         for (var i = 0; i < photoes.length; i++) {  83  formData.append("CaseImages", photoes[i]); // CaseImages 後臺圖片對應的字段
 84  }  85 
 86  $.ajax({  87  type: "post",  88  url: url + "add",  89  data: formData, //formData 裏面啥都有
 90  dataType: "json",  91  contentType: false,  92  processData: false,  93  success: function () {  94                 var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引
 95  parent.location.reload(); //刷新列表頁， 也就是list頁， 是update頁的父級
 96  parent.layer.close(index); //找到當前窗口，關閉當前窗口
 97  }  98  });  99  }); 100 
101     function update_case() { 102  $.post(url + "update_info.xsh", { 103  id: GetQueryString("id"), 104  case_num: $("#case_num").val(), 105  title: $("#title").val(), 106  }, 107         function() { 108             var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引
109  parent.location.reload(); //刷新列表頁， 也就是list頁， 是update頁的父級
110  parent.layer.close(index); //找到當前窗口，關閉當前窗口
111  }) 112  } 113 
114 
115     //修改時刪除已經存好的圖片
116     //得到刪除的id
117  $(document).on('click', '.del-btn', function() { 118  let id = "'" + $(this).attr('alt') + "'"; 119  let index = $(this).parent().parent().index(); 120  layer.confirm('確認要刪除嗎？', function() { 121             //刪除
122  $.ajax({ 123  type: 'post', 124  url: url + 'delete.xsh', 125  dataType: "json", 126  async: true, 127  data: { 128  id: id 129  }, 130  success() { 131  $('tbody tr:eq(' + index + ')').remove(); 132  layer.msg('刪除成功', { 133  icon: 1
134  }); 135  } 136  }); 137  }); 138  }) 139 
140 </script>