使用jquery仿写后台管理系统，简单清楚！

最新推荐文章于 2023-07-30 14:30:00 发布

远方的原

最新推荐文章于 2023-07-30 14:30:00 发布

阅读量2.2k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44890362/article/details/120688154

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.上面的图片就是我写的后台管理系统的截图！该系统使用了的技术是jquery，然后使用DOM进行操作。

2.这里的话我没有使用Ajax和服务器数据库，所以页面上的数据都是我使用数组将其装起来，然后将数据渲染到页面上的。通过页面上的按钮绑定事件，然后操作数组里面的数据。

3.缺点是当我刷新页面的时候，数据会全部复原。

进入正题，接下来就给大家看看我写的源码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lib.baomitu.com/jquery/1.11.3/jquery.js"></script>
    <!-- <script src="jquery.js"></script> -->
    <style>
        .content {
            width: 1200px;
            height: 700px;
            margin: 140px 350px;
            /* background: pink; */
        }

        .content ul:nth-of-type(2) {
            display: none;
        }

        input {
            float: left;
            width: 50px;
            margin-top: 20px;
        }

        li {
            list-style-type: none;
            width: 227px;
            height: 50px;
            float: left;
            line-height: 50px;
            border: 1px solid rgb(223, 225, 231);
            /* background-color: powderblue; */
            border-right: 0;
            border-top: 0;
            text-align: center;
        }


        ul {
            margin: 0;
            padding: 0;
            height: 50px;
            /* background-color: plum; */
            border: 1px solid rgb(235, 238, 245);
            border-top: 0;
        }

        ul:nth-child(2) {
            border: 1px solid rgb(235, 238, 245);
        }

        ul:nth-child(2n+1) {
            background-color: rgba(231, 230, 230, 0.363);
        }

        button {
            width: 50px;
            height: 28px;
            border-radius: 5px;
            margin: 0 5px;
            border: 1px solid rgb(220, 223, 230);
        }

        button:hover {
            cursor: pointer;
        }

        button:nth-of-type(2) {
            border: 0;
            background-color: rgb(245, 108, 108);
        }

        button:nth-of-type(1):hover {
            border: 1px solid rgb(198, 226, 255);
            background-color: rgb(236, 245, 255);
            color: rgb(64, 158, 255);
        }

        .one {
            height: 80px;
            margin-bottom: 10px;
            /* background-color: rgb(201, 64, 255); */
        }

        .one input {
            width: 200px;
            height: 40px;
            outline: none;
            border: 0;
            float: left;
            margin: 18px 15px;
            border-radius: 10px;
            border: 1px solid rgb(220, 223, 230);
            text-indent: 0.6em;
        }

        .one span {
            display: block;
            float: left;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgb(64, 158, 255);
            border: 1px solid;
            margin: 23px 12px;
            border-radius: 9px;
            border: 1px solid rgb(220, 223, 230);
        }

        .one span:hover {
            color: #fff;
            cursor: pointer;
            background-color: rgb(21, 101, 182);
        }

        /* 弹出框 */
        .box {
            width: 297px;
            height: 210px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /* border: 1px solid; */
            background-color: #fff;
            display: none;
        }

        .box ul {
            margin: 0;
            padding: 0;
        }

        .box li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            /* background-color: pink; */
            border: 1px solid rgb(5, 5, 5);
            border-bottom: 0;
        }

        .box li:nth-child(2n) {
            width: 191px;
            border-left: 0;
        }

        .box li:last-child {
            width: 292px;
            border: 1px solid rgb(5, 5, 5);
        }

        .box li input {
            margin: 7px 4px;
            height: 20px;
            width: 170px;
            outline: none;
        }

        .box li:last-child span {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid rgb(223, 225, 231);
            background-color: rgb(239, 239, 239);
            border-radius: 10px;
            transition: all 0.5s linear;
        }

        .box li:last-child span:hover {
            cursor: pointer;
            border: 1px solid rgb(198, 226, 255);
            background-color: rgb(236, 245, 255);
            color: rgb(64, 158, 255);
        }

        /* 侧边栏 */
        .aside {
            width: 12%;
            height: 1000px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #334157;
            padding-top: 160px;
        }

        .aside h3 {
            margin: 2px auto;
            font-size: 17px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            box-sizing: border-box;
            padding-left: 30px;
            width: 118%;
        }

        .son {
            width: 192px;
            float: left;
        }

        .son:hover {
            cursor: pointer;
        }

        .son h3:hover {
            background-color: rgba(31, 31, 30, 0.356);
        }

        .son div {
            display: none;
            box-sizing: border-box;
            text-align: center;
            background-color: #3341577e;

        }

        .son div h4 {
            color: rgb(252, 215, 10);
            margin: 5px 0;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            width: 118%;
        }

        .son div h4:hover {
            background-color: rgba(29, 29, 26, 0.336);

        }

        /* 头部 */
        .header {
            width: 100%;
            height: 90px;
            background-color: #334157;
            position: absolute;
            top: 0;
            left: 0;
        }

        .header h2 {
            color: #fff;
            position: absolute;
            top: 10px;
            left: 230px;
            z-index: 1;
            display: none;
        }

        /* 动画 */
        .animate {
            width: 180px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            /* background-color: pink; */
            top: 25px;
            left: 240px;
            font-size: 35px;
            font-weight: 700;
            color: #fff;

        }

        .one em {
            display: block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-style: inherit;
            position: absolute;
            text-align: center;
            top: 164px;
            left: 1033px;
            background-color: rgb(64, 158, 255);
            border: 1px solid rgb(239, 239, 239);
            border-radius: 10px;

        }

        .one em:hover {
            color: #fff;
            cursor: pointer;
            background-color: rgb(21, 101, 182);
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>
            后台管理系统
        </h2>
        <div class="animate">
            欢 迎 登 录
        </div>
    </div>
    <div class="aside">
        <div class="son">
            <h3>公司管理</h3>
            <div>
                <h4>事务处理</h4>
                <h4>处理进度</h4>
            </div>
        </div>
        <div class="son">
            <h3>人员管理</h3>
            <div>
                <a href="http://www.baidu.com">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
            </div>
        </div>
        <div class="son">
            <h3>代码展示</h3>
            <div>
                <a href="http://www.baidu.com">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
            </div>
        </div>
        <div class="son">
            <h3>人员业绩</h3>
            <div>
                <a href="http://www.baidu.com">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
            </div>
        </div>
        <div class="son">
            <h3>季度业绩</h3>
            <div>
                <a href="http://www.baidu.com">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
                <a href="">
                    <h4>事务处理</h4>
                </a>
            </div>
        </div>
    </div>
    <div class="box">
        <ul>
            <li>部门名称</li>
            <li><input type="text"></li>
            <li>部门代码</li>
            <li><input type="text"></li>
            <li>修改时间</li>
            <li><input type="text"></li>
            <li>修改人</li>
            <li><input type="text"></li>
            <li><span class="one">确认</span> <span>取消</span></li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li>部门名称</li>
            <li><input type="text"></li>
            <li>部门代码</li>
            <li><input type="text"></li>
            <li>修改时间</li>
            <li><input type="text"></li>
            <li>修改人</li>
            <li><input type="text"></li>
            <li><span class="two">确认</span> <span>取消</span></li>
        </ul>
    </div>
    <div class="content">
        <div class="one">
            <input type="text" placeholder="部门名称">
            <input type="text" placeholder="部门代码">
            <span>搜索</span>
            <span>添加</span>
            <!-- <em>代码排序</em> -->
        </div>
        <ul>
            <input type="checkbox" class="checkall">
            <li>部门名称</li>
            <li>部门代码</li>
            <li>修改时间</li>
            <li>修改人</li>
            <li>
                操作
            </li>
        </ul>
        <ul class="model">
            <input type="checkbox" class="check-1">
            <li>上海分公司</li>
            <li>00011</li>
            <li>
                2018-05-18 22:04:51
            </li>
            <li>
                小小数
            </li>
            <li>
                <button>编辑</button>
                <button>删除</button>
            </li>
        </ul>
    </div>

</body>

</html>

上面就是我写的页面的基本结构和样式！我都使用了简单的注释，不过最重要的是接下来的内容，我们所说的后台管理系统，最重要的是什么？没错就是js的操作。

    <script>
        // 动画
        var timer = null;
        var left1 = 230;
        timer = setInterval(function () {
            $('.header .animate').eq(0)[0].style.left = `${left1}px`;
            // 当文字运动到一般时候停下
            if (left1 > $('.header')[0].offsetWidth / 2 - 30) {
                clearInterval(timer);
                //   过两秒清空内容
                timer1 = setTimeout(function () {
                    $('.header .animate').eq(0).empty();
                    $('.header h2').eq(0)[0].style.display = "block";
                }, 3000)
            } else {
                left1 += 5;
            }
        }, 20)



        // 侧边栏
        $('.aside .son h3').on('click', function (e) {
            $(this).next().slideToggle(300);
        })


        var arr = [{
                departmentName: "武汉公司",
                departmentCode: "11223",
                alterTime: "2018-05-18 22:04:51",
                people: "张三"
            },
            {
                departmentName: "北京公司",
                departmentCode: "123123",
                alterTime: "2016-10-18 22:04:51",
                people: "李四"
            },
            {
                departmentName: "南京公司",
                departmentCode: "123415",
                alterTime: "2018-05-18 22:04:51",
                people: "赵六"
            }, {
                departmentName: "上海公司",
                departmentCode: "123415",
                alterTime: "2020-07-18 22:04:51",
                people: "王五"
            }, {
                departmentName: "上海公司",
                departmentCode: "124545",
                alterTime: "2029-09-18 22:04:51",
                people: "雄安"
            }, {
                departmentName: "四川公司",
                departmentCode: "123415",
                alterTime: "2039-09-18 22:04:51",
                people: "西藏"
            }, {
                departmentName: "北京公司",
                departmentCode: "123415",
                alterTime: "2049-09-18 22:04:51",
                people: "朝阳"
            }, {
                departmentName: "青海公司",
                departmentCode: "121315",
                alterTime: "2019-09-18 22:04:51",
                people: "西宁"
            }, {
                departmentName: "内蒙古公司",
                departmentCode: "3242323",
                alterTime: "2069-09-18 22:04:51",
                people: "锡林格勒"
            }, {
                departmentName: "新疆公司",
                departmentCode: "6576323",
                alterTime: "2069-09-18 22:04:51",
                people: "库尔勒"
            }
        ]


        // 将数组里面的数据渲染到页面
        arr.forEach(function (item, index) {
            // 克隆第一个ul
            var cloneDom = $(".model").first().clone(true).removeClass(".model");
            // 修改克隆出来的值
            cloneDom.find("input").eq(0).next().text(item.departmentName).next().text(item.departmentCode)
                .next().text(item.alterTime).next().text(item.people);
            // 将修改后的克隆值添加一下
            $(".content").append(cloneDom)
        })


        // 获取button删除的对象
        var btns = $('ul').find('li').has('button');
        btns.click(function (e) {
            if ($(e.target).html() == "删除") {
                $(e.target).parent().parent().remove();
                var del = $(e.target).parent().parent().find('li').eq(0).html();
                // 从数组中删除该对象
                arr.forEach(function (item, index) {
                    if (item.departmentName == del) {
                        arr.splice(index, 1)
                    }
                })
                console.log(arr);
            } else if ($(e.target).html() == "编辑") {
                // 获取box1让其显示
                $('.box')[1].style.display = "block";
                // 让所有的输入框为空
                $('.box').eq(1).find('input').eq(0).prop("value", null);
                $('.box').eq(1).find('input').eq(1).prop("value", null);
                $('.box').eq(1).find('input').eq(2).prop("value", null);
                $('.box').eq(1).find('input').eq(3).prop("value", null);
                var ul = $(e.target).parent().parent();
                $('span').click(function () {
                    // 获取你点击的li
                    var xiu = $(e.target).parent().parent().find('li').eq(0).html();
                    var xiu1 = $(e.target).parent().parent().find('li').eq(1).html();
                    if ($(this).attr("class") == "two") {
                        // 拿到输入框的值
                        var name = $('.box').eq(1).find('input').eq(0).prop("value");
                        var code = $('.box').eq(1).find('input').eq(1).prop("value");
                        var time = $('.box').eq(1).find('input').eq(2).prop("value");
                        var people = $('.box').eq(1).find('input').eq(3).prop("value");
                        // 有值才可以添加
                        if (name[0] !== undefined && code[0] !== undefined && time[0] !== undefined) {
                            ul.find("li").eq(0).text(name).next().text(code).next().text(time).next()
                                .text(people);
                            // 修改数组中的对象
                            arr.forEach(function (item, index) {
                                if (item.departmentName == xiu && item.departmentCode == xiu1) {
                                    item.departmentName = name;
                                    item.departmentCode = code;
                                    item.alterTime = time;
                                    item.people = people;
                                }
                            })
                            console.log(arr);
                        } else {
                            // 获取box1让其显示
                            $('.box')[1].style.display = "none";
                        }
                        $('.box')[1].style.display = "none";
                    } else if ($(this).html() == "取消") {
                        // 获取box让其消失
                        $('.box')[1].style.display = "none";
                    }
                })

            }
        })


        // 获取第一个checkbox的状态
        $('.checkall').change(function () {
            $('.check-1').prop('checked', $(this).prop('checked'));
            // 把第一个被克隆的复选框改为false
            $('.check-1').eq(0).prop('checked',false);

        })
        $('.check-1').change(function () {
            //如果下面有一个按钮没被选中，则全选框按钮无法选中
            //通过下面被选中的复选框按钮的长度判断
            // console.log($('.check-1:checked').length);
            if ($('.check-1:checked').length == $('.check-1').length-1) {
                $('.checkall').prop('checked', true)
            }else{
                $('.checkall').prop('checked', false)
            }
        })


        //添加数据
        $('span').click(function () {
            if ($(this).html() == "添加") {
                // 让所有的输入框为空
                $('.box').eq(0).find('input').eq(0).prop("value", null);
                $('.box').eq(0).find('input').eq(1).prop("value", null);
                $('.box').eq(0).find('input').eq(2).prop("value", null);
                $('.box').eq(0).find('input').eq(3).prop("value", null);
                // 获取box让其显示
                $('.box')[0].style.display = "block";
            } else if ($(this).html() == "取消") {
                // 获取box让其消失
                $('.box')[0].style.display = "none";
            } else if ($(this).attr("class") == "one") {
                // 将输入框里面的值添加
                var name = $('.box').eq(0).find('input').eq(0).prop("value");
                var code = $('.box').eq(0).find('input').eq(1).prop("value");
                var time = $('.box').eq(0).find('input').eq(2).prop("value");
                var people = $('.box').eq(0).find('input').eq(3).prop("value");
                // 有值才可以添加
                if (name[0] !== undefined && code[0] !== undefined && time[0] !== undefined) {
                    // 克隆第一个ul
                    var cloneDom = $(".model").first().clone(true).removeClass(".model");
                    // 修改克隆出来的值
                    cloneDom.find("li").eq(0).text(name).next().text(code).next().text(time).next().text(
                        people);
                    // 将修改后的克隆值添加一下
                    $(".content").append(cloneDom);
                    // 创建一个空对象
                    var obj = {}
                    obj["departmentName"] = name;
                    obj["departmentCode"] = code;
                    obj["alterTime"] = time;
                    obj["people"] = people;
                    // console.log(obj); 
                    // 将对象添加到数组中去
                    arr.push(obj);
                    console.log(arr);
                }
                // 获取box让其消失
                $('.box')[0].style.display = "none";
            }
        })

        // 搜索查询模
        // 聚焦事件
        $('.one').find('input').on('focus', function () {
            $(this).prop("value", null)
        })
        // 拿到查询按钮
        var btn = $('.one').find('span').eq(0);
        var btn1 = $('.one').find('span').eq(1);
        // 绑定事件
        btn.on('click', function () {
            // 删除添加按钮
            // btn1.remove();
            // 拿到input框里面的数据    
            var value = $('.one').find('input').eq(0).prop("value");
            var value2 = $('.one').find('input').eq(1).val();
            console.log(value);
            if (value == null && value2 == null) {
                alert('您输入的为空')
            }
            var newArr = [];
            // 模糊查询
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].departmentName.indexOf(value) !== -1) {
                    newArr.push(arr[i]);
                }
            }
            if (value) {
                // 删除第一行部门下的所有数据
                $('.content').find('ul').eq(1).nextAll().remove();
                // 将新的数组里面的数据渲染到页面
                newArr.forEach(function (item, index) {
                    // 克隆第一个ul
                    var cloneDom = $(".model").first().clone(true).removeClass(".model");
                    cloneDom.css("backgroundColor", " #f9e6ff")
                    // 修改克隆出来的值
                    cloneDom.find("input").eq(0).next().text(item.departmentName).next().text(item
                            .departmentCode)
                        .next().text(item.alterTime).next().text(item.people);
                    // 将修改后的克隆值添加一下
                    $(".content").append(cloneDom);
                })
            } else {
                alert('您的搜索值为空,请输入');
            }
        })
    </script>

我这边使用了这个克隆clone的写法，这样的话表格的每行ul，会根据数组里面的对象个数进行克隆，最后将数据填充进去，渲染到页面上即可。

远方的原

关注

1
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
使用jquery仿写后台管理系统，简单清楚！

1.上面的图片就是我写的后台管理系统的截图！该系统使用了的技术是jquery，然后使用DOM进行操作。2.这里的话我没有使用Ajax和服务器数据库，所以页面上的数据都是我使用数组将其装起来，然后将数据渲染到页面上的。通过页面上的按钮绑定事件，然后操作数组里面的数据。3.缺点是当我刷新页面的时候，数据会全部复原。进入正题，接下来就给大家看看我写的源码。<!DOCTYPE html><html lang="en"><head> <m...
复制链接

扫一扫