前台页面对数据的增删除改查操作


 
 
 
 
 
 
后台管理中，基本就是对数据的增删改查，今天写了一个DEMO，把它分享出来，如下图：







JS代码如下：

复制代码
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 = [
    {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代码如下： 复制代码
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>
<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;
            
            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>
 
posted @ 2019-09-16 20:23  蜡笔小程序猿  阅读(483)  评论(0)    收藏  举报