doubleyong
管理员
管理员
  • 最后登录2021-09-29
  • 发帖数1035
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:5448回复:2

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

楼主#
更多 发布于:2018-06-05 23:13
后台管理中,基本就是对数据的增删改查,今天写了一个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>
附件名称/大小 下载次数 最后更新
manage.rar (397KB)  74 2018-06-13 21:42
知识需要管理,知识需要分享
function
贫民
贫民
  • 最后登录2021-09-01
  • 发帖数1
沙发#
发布于:2021-08-05 14:18
写的太好了
a81492654
贫民
贫民
  • 最后登录2019-09-15
  • 发帖数2
板凳#
发布于:2019-03-19 16:30
doubleyong
游客


返回顶部

公众号

公众号