关灯
开启左侧

DOM实践:前台页面对数据的增删除改查操作

[复制链接]
doubleyong 发表于 2019-3-5 11:39:55 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
后台管理中,基本就是对数据的增删改查,今天写了一个DEMO,把它分享出来,如下图:
1.png 2.jpg

js代码:
  1. var user = [
  2.     {id: 1, cardId: "6225880287860549", pwd: "909090", money: 9000},
  3.     {id: 2, cardId: "6225880287862345", pwd: "666666", money: 100},
  4.     {id: 3, cardId: "6225880287861234", pwd: "888888", money: 5000},
  5.     {id: 4, cardId: "6225880287860549", pwd: "909090", money: 9000},
  6.     {id: 5, cardId: "6225880287862345", pwd: "666666", money: 100},
  7.     {id: 6, cardId: "6225880287861234", pwd: "888888", money: 5000},
  8.     {id: 7, cardId: "6225880287860549", pwd: "909090", money: 9000},
  9.     {id: 8, cardId: "6225880287862345", pwd: "666666", money: 100},
  10.     {id: 9, cardId: "6225880287861234", pwd: "888888", money: 5000}
  11. ]
  12. var operid = -1;
  13. var perSize = 4; //每页显示的条数
  14. var currentPage = 1; //当前显示的页数
  15. var totalPage = -1; //总共的页数
  16. window.onload=function(){
  17.     displayUserTable();
  18.     checkAll(); //添加全选事件
  19.     checkItemAll();
  20.     add();
  21.     del();
  22.     edit();
  23.     pagebar();
  24.     pageClick();
  25. }
  26. function edit(){
  27.     $("#userTable").on('click','.edit',function(){
  28.         var index = $(this).attr('data-index');
  29.         operid = index;
  30.         $("#addUser").modal('show');
  31.         $("#txtId").val(user[index].id);
  32.         $("#txtCard").val(user[index].cardId);
  33.         $("#txtPwd").val(user[index].pwd);
  34.         $("#txtMoney").val(user[index].money);
  35.     })
  36. }
  37. function del(){
  38.     $("#userTable").on('click','.del',function(){
  39.         console.log(this);
  40.         var index = $(this).attr('data-index');
  41.         user.splice(index,1);
  42.         pagebar();
  43.         displayUserTable();
  44.     })
  45. }
  46. function add(){
  47.     $("#btnAddForm").click(function(){
  48.         operid= -1;
  49.         $("#addUser").modal('show');
  50.     })
  51.     $("#btnAdd").click(function(){
  52.         //添加数据
  53.         //获取表单数据
  54.         var id = $("#txtId").val();
  55.         var card = $("#txtCard").val();
  56.         var pwd = $("#txtPwd").val();
  57.         var money = $("#txtMoney").val();
  58.         var obj = {"id":id,"cardId":card,"pwd":pwd,"money":Number(money)};
  59.         if(operid==-1){
  60.             user.push(obj);
  61.         }else{
  62.             user.splice(operid,1,obj);
  63.         }
  64.         displayUserTable();
  65.         pagebar();
  66.         $("#addUser").modal('hide');
  67.     })
  68.     $("#btnCancel").click(function(){
  69.         $("#addUser").modal('hide');
  70.     })
  71. }
  72. function checkAll(){
  73.     $("#checkAll").click(function(){
  74.         var checked = this.checked;
  75.         $("input[name='checkItem']").each(function(index,item){
  76.             item.checked =checked;
  77.         })
  78.     })
  79. }
  80. function checkItemAll(){
  81.     $("#userTable").on('click','input[name=\'checkItem\']',function(){
  82.         var isAll = true;
  83.         $("input[name='checkItem']").each(function(index,item){
  84.             if(!item.checked){
  85.                 isAll = false;
  86.             }
  87.         })
  88.         if(isAll){
  89.             $("#checkAll")[0].checked=true;
  90.         }else{
  91.             $("#checkAll")[0].checked=false;
  92.         }
  93.     })
  94. }
  95. function displayUserTable(){
  96.     $("#userTable").html("");
  97.     $("#checkAll")[0].checked=false;
  98.     var start = (currentPage -1 )*perSize;
  99.     var end = start + perSize;
  100.     var outHtml = "";
  101.     for(var i=start;i<end&&i<user.length;i++){
  102.         outHtml+="<tr>"+
  103.         "<td><input type='checkbox' name="checkItem" /></td>"+
  104.         "<td>"+user<i>.id+"</td>"+
  105.         "<td>"+user<i>.cardId+"</td>"+
  106.         "<td>"+user<i>.pwd+"</td>"+
  107.         "<td>"+user<i>.money+"</td>"+
  108.         "<td><button class="btn btn-default del" data-index='"+i+"'>删除</button><button class="btn btn-default edit"  data-index='"+i+"'>编辑</button></td>"+
  109.         "</tr>";
  110.     }
  111.     $("#userTable").html(outHtml);
  112. }
  113. //用于显示页码 5
  114. function pagebar(){
  115.     totalPage = Math.ceil(user.length / perSize);
  116.     if(currentPage>totalPage){
  117.         currentPage = totalPage;
  118.     }
  119.     $("#divPage").html("");
  120.     var str = "";
  121.     for(var i = 0;i<totalPage;i++){
  122.         if(currentPage==(i+1)){
  123.             str+="<button class="btn btn-primary page">"+(i+1)+"</button>";
  124.         }else{
  125.             str+="<button class="btn btn-default page">"+(i+1)+"</button>";
  126.         }
  127.     }
  128.     $("#divPage").html(str);
  129. }
  130. function pageClick(){
  131.     $("#divPage").on("click",".page",function(){
  132.         $(".page").each(function(index,item){
  133.             $(this).removeClass('btn-primary');
  134.         });
  135.         $(this).addClass('btn-primary');
  136.         currentPage = Number(this.innerText);
  137.         displayUserTable();
  138.     });
  139. }
复制代码
html代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="css/bootstrap.css"/>
  7.     <style>
  8.         #addUser{
  9.             width: 400px;
  10.             height: 400px;
  11.             margin: auto;
  12.             position: absolute;
  13.             top:0;
  14.             right: 0;
  15.             left:0;
  16.             bottom: 0;
  17.             background-color: white;
  18.             padding: 50px 20px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div class="container">
  24.     <header></header>
  25.     <section>
  26.         <div class="left"></div>
  27.         <div class="right">
  28.             <div>
  29.                  <button class="btn btn-primary" id="btnAddForm">添加</button>
  30.             </div>
  31.             <div>
  32.                 <div></div>
  33.                 <div>
  34.                     <table class="table table-hover">
  35.                         <thead>
  36.                         <tr>
  37.                             <th><input type="checkbox" id="checkAll"/></th>
  38.                             <th>id</th>
  39.                             <th>卡号</th>
  40.                             <th>密码</th>
  41.                             <th>金额</th>
  42.                             <th>操作</th>
  43.                         </tr>
  44.                         </thead>
  45.                         <tbody id="userTable">
  46.                         </tbody>
  47.                     </table>
  48.                 </div>
  49.                 <div id="divPage">
  50.                 </div>
  51.             </div>
  52.                 <form action="" class="form-horizontal modal fade"  id="addUser" >
  53.                     <p >ID:<input type="text" class="form-control" id="txtId"/></p>
  54.                     <p >卡号:<input type="text" class="form-control" id="txtCard"/></p>
  55.                     <p >密码:<input type="password" class="form-control" id="txtPwd"/></p>
  56.                     <p >金额:<input type="text" class="form-control" id="txtMoney"/></p>
  57.                     <p ><button class="btn btn-primary" id="btnAdd" type="button">保存</button> <button class="btn btn-default" id="btnCancel" type="button">取消</button></p>
  58.                 </form>
  59.         </div>
  60.     </section>
  61.     <footer>
  62.     </footer>
  63. </div>
  64. <script src="js/jquery-1.11.3.js"></script>
  65. <script src="js/bootstrap.js"></script>
  66. <script src="js/userManage.js"></script>
  67. </body>
  68. </html>
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )