allUsers.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. layui.config({
  2. base : "js/"
  3. }).use(['form','layer','jquery','laypage'],function(){
  4. var form = layui.form(),
  5. layer = parent.layer === undefined ? layui.layer : parent.layer,
  6. laypage = layui.laypage,
  7. $ = layui.jquery;
  8. //加载页面数据
  9. var usersData = '';
  10. $.get("../../json/usersList.json", function(data){
  11. usersData = data;
  12. if(window.sessionStorage.getItem("addUser")){
  13. var addUsers = window.sessionStorage.getItem("addUser");
  14. usersData = JSON.parse(addUsers).concat(usersData);
  15. }
  16. //执行加载数据的方法
  17. usersList();
  18. })
  19. //查询
  20. $(".search_btn").click(function(){
  21. var userArray = [];
  22. if($(".search_input").val() != ''){
  23. var index = layer.msg('查询中,请稍候',{icon: 16,time:false,shade:0.8});
  24. setTimeout(function(){
  25. $.ajax({
  26. url : "../../json/usersList.json",
  27. type : "get",
  28. dataType : "json",
  29. success : function(data){
  30. if(window.sessionStorage.getItem("addUsers")){
  31. var addUsers = window.sessionStorage.getItem("addUsers");
  32. usersData = JSON.parse(addUsers).concat(data);
  33. }else{
  34. usersData = data;
  35. }
  36. for(var i=0;i<usersData.length;i++){
  37. var usersStr = usersData[i];
  38. var selectStr = $(".search_input").val();
  39. function changeStr(data){
  40. var dataStr = '';
  41. var showNum = data.split(eval("/"+selectStr+"/ig")).length - 1;
  42. if(showNum > 1){
  43. for (var j=0;j<showNum;j++) {
  44. dataStr += data.split(eval("/"+selectStr+"/ig"))[j] + "<i style='color:#03c339;font-weight:bold;'>" + selectStr + "</i>";
  45. }
  46. dataStr += data.split(eval("/"+selectStr+"/ig"))[showNum];
  47. return dataStr;
  48. }else{
  49. dataStr = data.split(eval("/"+selectStr+"/ig"))[0] + "<i style='color:#03c339;font-weight:bold;'>" + selectStr + "</i>" + data.split(eval("/"+selectStr+"/ig"))[1];
  50. return dataStr;
  51. }
  52. }
  53. //用户名
  54. if(usersStr.userName.indexOf(selectStr) > -1){
  55. usersStr["userName"] = changeStr(usersStr.userName);
  56. }
  57. //用户邮箱
  58. if(usersStr.userEmail.indexOf(selectStr) > -1){
  59. usersStr["userEmail"] = changeStr(usersStr.userEmail);
  60. }
  61. //性别
  62. if(usersStr.userSex.indexOf(selectStr) > -1){
  63. usersStr["userSex"] = changeStr(usersStr.userSex);
  64. }
  65. //会员等级
  66. if(usersStr.userGrade.indexOf(selectStr) > -1){
  67. usersStr["userGrade"] = changeStr(usersStr.userGrade);
  68. }
  69. if(usersStr.userName.indexOf(selectStr)>-1 || usersStr.userEmail.indexOf(selectStr)>-1 || usersStr.userSex.indexOf(selectStr)>-1 || usersStr.userGrade.indexOf(selectStr)>-1){
  70. userArray.push(usersStr);
  71. }
  72. }
  73. usersData = userArray;
  74. usersList(usersData);
  75. }
  76. })
  77. layer.close(index);
  78. },2000);
  79. }else{
  80. layer.msg("请输入需要查询的内容");
  81. }
  82. })
  83. //添加会员
  84. $(".usersAdd_btn").click(function(){
  85. var index = layui.layer.open({
  86. title : "添加会员",
  87. type : 2,
  88. content : "addUser.html",
  89. success : function(layero, index){
  90. layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
  91. tips: 3
  92. });
  93. }
  94. })
  95. //改变窗口大小时,重置弹窗的高度,防止超出可视区域(如F12调出debug的操作)
  96. $(window).resize(function(){
  97. layui.layer.full(index);
  98. })
  99. layui.layer.full(index);
  100. })
  101. //全选
  102. form.on('checkbox(allChoose)', function(data){
  103. var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
  104. child.each(function(index, item){
  105. item.checked = data.elem.checked;
  106. });
  107. form.render('checkbox');
  108. });
  109. //通过判断文章是否全部选中来确定全选按钮是否选中
  110. form.on("checkbox(choose)",function(data){
  111. var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
  112. var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
  113. if(childChecked.length == child.length){
  114. $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
  115. }else{
  116. $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
  117. }
  118. form.render('checkbox');
  119. })
  120. //操作
  121. $("body").on("click",".users_edit",function(){ //编辑
  122. layer.alert('您点击了会员编辑按钮,由于是纯静态页面,所以暂时不存在编辑内容,后期会添加,敬请谅解。。。',{icon:6, title:'文章编辑'});
  123. })
  124. $("body").on("click",".users_del",function(){ //删除
  125. var _this = $(this);
  126. layer.confirm('确定删除此用户?',{icon:3, title:'提示信息'},function(index){
  127. //_this.parents("tr").remove();
  128. for(var i=0;i<usersData.length;i++){
  129. if(usersData[i].usersId == _this.attr("data-id")){
  130. usersData.splice(i,1);
  131. usersList(usersData);
  132. }
  133. }
  134. layer.close(index);
  135. });
  136. })
  137. function usersList(){
  138. //渲染数据
  139. function renderDate(data,curr){
  140. var dataHtml = '';
  141. currData = usersData.concat().splice(curr*nums-nums, nums);
  142. if(currData.length != 0){
  143. for(var i=0;i<currData.length;i++){
  144. dataHtml += '<tr>'
  145. + '<td><input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose"></td>'
  146. + '<td>'+currData[i].userName+'</td>'
  147. + '<td>'+currData[i].userEmail+'</td>'
  148. + '<td>'+currData[i].userSex+'</td>'
  149. + '<td>'+currData[i].userGrade+'</td>'
  150. + '<td>'+currData[i].userStatus+'</td>'
  151. + '<td>'+currData[i].userEndTime+'</td>'
  152. + '<td>'
  153. + '<a class="layui-btn layui-btn-mini users_edit"><i class="iconfont icon-edit"></i> 编辑</a>'
  154. + '<a class="layui-btn layui-btn-danger layui-btn-mini users_del" data-id="'+data[i].usersId+'"><i class="layui-icon">&#xe640;</i> 删除</a>'
  155. + '</td>'
  156. +'</tr>';
  157. }
  158. }else{
  159. dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
  160. }
  161. return dataHtml;
  162. }
  163. //分页
  164. var nums = 13; //每页出现的数据量
  165. laypage({
  166. cont : "page",
  167. pages : Math.ceil(usersData.length/nums),
  168. jump : function(obj){
  169. $(".users_content").html(renderDate(usersData,obj.curr));
  170. $('.users_list thead input[type="checkbox"]').prop("checked",false);
  171. form.render();
  172. }
  173. })
  174. }
  175. })