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