|
阅读：12180回复：2
前台页面对数据的增删除改查操作
后台管理中，基本就是对数据的增删改查，今天写了一个DEMO，把它分享出来，如下图：
图片：manage.png 
图片：add.jpg
JS代码如下： var user = [
{id: 1, cardId: "6225880287860549", pwd: "909090", money: 9000},
{id: 2, cardId: "6225880287862345", pwd: "666666", money: 100},
{id: 3, cardId: "6225880287861234", pwd: "888888", money: 5000},
{id: 4, cardId: "6225880287860549", pwd: "909090", money: 9000},
{id: 5, cardId: "6225880287862345", pwd: "666666", money: 100},
{id: 6, cardId: "6225880287861234", pwd: "888888", money: 5000},
{id: 7, cardId: "6225880287860549", pwd: "909090", money: 9000},
{id: 8, cardId: "6225880287862345", pwd: "666666", money: 100},
{id: 9, cardId: "6225880287861234", pwd: "888888", money: 5000}
]
var operid = -1;
var perSize = 4; //每页显示的条数
var currentPage = 1; //当前显示的页数
var totalPage = -1; //总共的页数
window.onload=function(){
displayUserTable();
checkAll(); //添加全选事件
checkItemAll();
add();
del();
edit();
pagebar();
pageClick();
}
function edit(){
$("#userTable").on('click','.edit',function(){
var index = $(this).attr('data-index');
operid = index;
$("#addUser").modal('show');
$("#txtId").val(user[index].id);
$("#txtCard").val(user[index].cardId);
$("#txtPwd").val(user[index].pwd);
$("#txtMoney").val(user[index].money);
})
}
function del(){
$("#userTable").on('click','.del',function(){
console.log(this);
var index = $(this).attr('data-index');
user.splice(index,1);
pagebar();
displayUserTable();
})
}
function add(){
$("#btnAddForm").click(function(){
operid= -1;
$("#addUser").modal('show');
})
$("#btnAdd").click(function(){
//添加数据
//获取表单数据
var id = $("#txtId").val();
var card = $("#txtCard").val();
var pwd = $("#txtPwd").val();
var money = $("#txtMoney").val();
var obj = {"id":id,"cardId":card,"pwd":pwd,"money":Number(money)};
if(operid==-1){
user.push(obj);
}else{
user.splice(operid,1,obj);
}
displayUserTable();
pagebar();
$("#addUser").modal('hide');
})
$("#btnCancel").click(function(){
$("#addUser").modal('hide');
})
}
function checkAll(){
$("#checkAll").click(function(){
var checked = this.checked;
$("input[name='checkItem']").each(function(index,item){
item.checked =checked;
})
})
}
function checkItemAll(){
$("#userTable").on('click','input[name=\'checkItem\']',function(){
var isAll = true;
$("input[name='checkItem']").each(function(index,item){
if(!item.checked){
isAll = false;
}
})
if(isAll){
$("#checkAll")[0].checked=true;
}else{
$("#checkAll")[0].checked=false;
}
})
}
function displayUserTable(){
$("#userTable").html("");
$("#checkAll")[0].checked=false;
var start = (currentPage -1 )*perSize;
var end = start + perSize;
var outHtml = "";
for(var i=start;i<end&&i<user.length;i++){
outHtml+="<tr>"+
"<td><input type='checkbox' name=\"checkItem\" /></td>"+
"<td>"+user<i>.id+"</td>"+
"<td>"+user<i>.cardId+"</td>"+
"<td>"+user<i>.pwd+"</td>"+
"<td>"+user<i>.money+"</td>"+
"<td><button class=\"btn btn-default del\" data-index='"+i+"'>删除</button><button class=\"btn btn-default edit\" data-index='"+i+"'>编辑</button></td>"+
"</tr>";
}
$("#userTable").html(outHtml);
}
//用于显示页码 5
function pagebar(){
totalPage = Math.ceil(user.length / perSize);
if(currentPage>totalPage){
currentPage = totalPage;
}
$("#divPage").html("");
var str = "";
for(var i = 0;i<totalPage;i++){
if(currentPage==(i+1)){
str+="<button class=\"btn btn-primary page\">"+(i+1)+"</button>";
}else{
str+="<button class=\"btn btn-default page\">"+(i+1)+"</button>";
}
}
$("#divPage").html(str);
}
function pageClick(){
$("#divPage").on("click",".page",function(){
$(".page").each(function(index,item){
$(this).removeClass('btn-primary');
});
$(this).addClass('btn-primary');
currentPage = Number(this.innerText);
displayUserTable();
});
}
HTML代码如下： <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
#addUser{
width: 400px;
height: 400px;
margin: auto;
position: absolute;
top:0;
right: 0;
left:0;
bottom: 0;
background-color: white;
padding: 50px 20px;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<section>
<div class="left"></div>
<div class="right">
<div>
<button class="btn btn-primary" id="btnAddForm">添加</button>
</div>
<div>
<div></div>
<div>
<table class="table table-hover">
<thead>
<tr>
<th><input type="checkbox" id="checkAll"/></th>
<th>id</th>
<th>卡号</th>
<th>密码</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody id="userTable">
</tbody>
</table>
</div>
<div id="divPage">
</div>
</div>
<form action="" class="form-horizontal modal fade" id="addUser" >
<p >ID:<input type="text" class="form-control" id="txtId"/></p>
<p >卡号：<input type="text" class="form-control" id="txtCard"/></p>
<p >密码：<input type="password" class="form-control" id="txtPwd"/></p>
<p >金额：<input type="text" class="form-control" id="txtMoney"/></p>
<p ><button class="btn btn-primary" id="btnAdd" type="button">保存</button> <button class="btn btn-default" id="btnCancel" type="button">取消</button></p>
</form>
</div>
</section>
<footer>
</footer>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/userManage.js"></script>
</body>
</html> |
|
|
公众号
