js实战员工管理

最新推荐文章于 2023-09-23 22:25:18 发布

幻像

最新推荐文章于 2023-09-23 22:25:18 发布

阅读量465

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/csdnxy/article/details/113757107

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html+js部分index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <section class="wrap">
        <header class="header">
            <h2 class="title">员工信息管理</h2>
            <a href="javascript:;" class="addBtn">添加</a>
        </header>
        <form class="add">
            <input type="text" class="name" placeholder="姓名" />
            <label class="genderWrap">
                <input type="checkbox" class="gender" />
                <div class="genderIco">
                    <div class="genderInner"><span>男</span><span>女</span></div>
                </div>
            </label>
            <input type="number" class="age" placeholder="年龄" step="1" min="18" max="80" />
            <label class="stateWrap">
                <input type="checkbox" class="state" />
                <div class="stateIco">
                    <div class="stateInner"><span>在职</span><span>离职</span></div>
                </div>
            </label>
            <button type="button" class="submit">录入信息</button>
        </form>
        <!-- <nav class="nav">
            <a href="javascript:;">所有员工信息</a>
            <a href="javascript:;">女员工信息</a>
            <a href="javascript:;">男员工信息</a>
            <a href="javascript:;">在职员工信息</a>
            <a href="javascript:;">离职员工信息</a>
        </nav> -->
        <ul class="list">
            <!-- <li>
                <span>
                    <input type="checkbox" class="checkAll" />
                </span>
                <span>姓名</span>
                <span>性别</span>
                <span>年龄</span>
                <span>状态</span>
                <span>操作</span>
            </li> -->
            <!-- <li>
                <span>
                    <input type="checkbox" class="checkAll" />
                </span>
                <span>Leo</span>
                <span>男</span>
                <span>40</span>
                <span><a href="javascript:;">在职</a></span>
                <span><a href="javascript:;">删除</a></span>
            </li>
            <li>
                <span>
                    <input type="checkbox" class="checkAll" />
                </span>
                <span>小美</span>
                <span>女</span>
                <span>18</span>
                <span><a href="javascript:;">在职</a></span>
                <span><a href="javascript:;">删除</a></span>
            </li>
            <li>
                <span>
                    <input type="checkbox" class="checkAll" />
                </span>
                <span>张三</span>
                <span>男</span>
                <span>24</span>
                <span><a href="javascript:;">在职</a></span>
                <span><a href="javascript:;">删除</a></span>
            </li> -->
        </ul>
        <p class="operate">
            <a href="javascript:;">删除选中项</a>
            <a href="javascript:;">入职选中项</a>
            <a href="javascript:;">离职选中项</a>
        </p>
    </section>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript">
    (function(){
        let list=document.querySelector('.list');
        let add=document.querySelector('.add');
        let operate=document.querySelector('.operate');
        let addBtn=document.querySelector('.addBtn');
        let addData=add.querySelectorAll('input');

        let showFrom=false;
        render();
        addBtn.onclick=function(){
            showFrom=!showFrom
            render();
        }
        add.children[4].onclick=function(){
            addInfo(addData[0].value,addData[2].value,addData[1].checked?"女":"男",!addData[3].checked)
        }
        // 添加数据
        // {
        //  id:Symbol(),
        //  name:"红五",
        //  age:"19",
        //  gender:"女",
        //  state:false,
        //  checked:false
        // },
        function addInfo(name,age,gender,state){
            data.push({
                id:Symbol(),
                name,
                age,
                gender,
                state,
                checked:false
            });
            render();
        }
        // 判断是否全选
        function isGroupChecked(){
            return data.length==getGroupChecked().length;
        }
       
        // 获取所有选中的
        function getGroupChecked(){
           return data.filter((item)=>item.checked);
        }
        // 切换全选和全不选状态
        function setGroupChecked(state){
            data.forEach((item)=>{
                item.checked=state
            })
            // console.log(data)
        }
        // 切换单条数据的选中和不选中
        function setChecked(id,state){
            data.forEach((item)=>{
                if(item.id==id){
                    item.checked=state;
                    
                }
                
            })
        }
        // 删除选中项
        function removeChecked(){
            data=data.filter((item)=>!item.checked);
        }
        // 切换选中项职位状态
        function changeCheckedState(state){
            getGroupChecked().forEach((item)=>{
                item.state=state
            })
        }
        // 根据数据生成视图
        function render(){
            if(data.length==0){
                showFrom=true;
                list.style.display="none";
            }else{
                list.style.display="block";
            }
            if(showFrom){
                add.style.display="flex";
                // list.style.display="none";
            }else{
                add.style.display="none";
                // list.style.display="block";
            }
            // 渲染列表
            list.innerHTML=`
                <li>
                    <span>
                        <input type="checkbox" ${isGroupChecked()?"checked":""} class="checkAll" />
                    </span>
                    <span>姓名</span>
                    <span>性别</span>
                    <span>年龄</span>
                    <span>状态</span>
                    <span>操作</span>
                </li>
            `;
            data.forEach((item,index)=>{
                list.innerHTML+=`
                    <li>
                        <span>
                            <input type="checkbox" ${item.checked?"checked":""} class="check" />
                        </span>
                        <span>${item.name}</span>
                        <span>${item.gender}</span>
                        <span>${item.age}</span>
                        <span><a href="javascript:;">${item.state?"在职":"离职"}</a></span>
                        <span><a href="javascript:;">删除</a></span>
                    </li>
                `;
                
            });
            // 添加事件
            let checkAll=document.querySelector('.checkAll');
            checkAll.onchange=function(){
                setGroupChecked(this.checked);
                render();
                // M(数据模型) V(视图) VM(数据视图-虚拟DOM)
            }
            let check=document.querySelectorAll('.check');

            check.forEach((item,index)=>{
                item.onchange=function(){
                    setChecked(data[index].id,this.checked);
                    render();
                }
            })
            // 渲染操作面板
            if(getGroupChecked().length>0){
                operate.style.display="flex";
            }else{
                operate.style.display="none";
            }
        }
        // 批量操作
        operate.children[0].onclick=function(){
            removeChecked()
            render();
        }
        operate.children[1].onclick=function(){
            changeCheckedState(true)
            render();
        }
        operate.children[2].onclick=function(){
            changeCheckedState(false)
            render();
        }
    })();
    </script>
</body>
</html>

css部分index.css

h2{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap{
    position: relative;
    width: 600px;
    margin: 30px auto;
    font: 12px "宋体";
}
.addBtn{
    position: absolute;
    right: 0;
    top: 0;
}
input{
    margin: 0;
}
a{
    color: #337ab7;
    text-decoration: none;
}
a:hover{
    columns: #23527c;
}
a.selected{
    color: #ccc;
}
.header{
    border-bottom: 2px solid #666;
}
.title{
    text-align: center;
    font: 14px/32px "宋体";
}
.nav{
    display: flex;
    font: 12px/26px "宋体";
    justify-content: space-between;
    border-bottom: 2px solid #666;
}
.add{
    display: flex;
    height: 40px;
    align-items: center;
    font: 12px/24px "宋体";
    justify-content: space-between;
    border-bottom: 2px solid #666;
}
.name,
.age,
.submit{
    width: 80px;
    text-align: center;
    height: 24px;
    padding: 0;
    border: 1px solid #ccc;
}
.genderWrap,
.stateWrap{
    width: 44px;
    padding: 1px;
    border: 1px solid #ccc;
}
.stateWrap{
    width: 88px;
}
.gender,
.state{
    display: none;
}
.genderIco,
.stateIco{
    width: 22px;
    height: 22px;
    background: #666;
    overflow: hidden;
    transition: .3s;
}
.stateIco{
    width: 44px;
}
.genderInner,
.stateInner{
    transition: .3s;
    display: flex;
    width: 44px;
    font: 12px/22px "宋体";
    color: #fff;
}
.stateInner{
    width: 88px;
}
.genderInner span,
.stateInner span{
    margin: auto;
}
.gender:checked ~ .genderIco{
    margin-left: 22px;
}
.gender:checked ~ .genderIco .genderInner{
    margin-left: -22px;
}
.state:checked ~ .stateIco{
    margin-left: 44px;
}
.state:checked ~ .stateIco .stateInner{
    margin-left: -44px;
}
.list{
    margin: 0 auto;
    width: 90%;
}
.list li{
    display: flex;
    font: 12px/24px "宋体";
    border-bottom: 1px solid #ccc;
}
.list span{
    display: block;
    margin: 0 auto;
    flex: 1;
    text-align: center;
}
.list li span:nth-of-type(1){
    width: 40px;
    flex: none;
}
.operate{
    display: flex;
    justify-content: space-around;
    font: 12px/24px "宋体";
    border-top: 2px solid #000;
}

数据部分data.js

let data=[
    {
        id:Symbol(),
        name:"张三",
        age:"18",
        gender:"男",
        state:true,
        checked:false
    },
    {
        id:Symbol(),
        name:"李四",
        age:"19",
        gender:"男",
        state:false,
        checked:false
    },
    {
        id:Symbol(),
        name:"红五",
        age:"19",
        gender:"女",
        state:false,
        checked:false
    },

]

幻像

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实战员工管理

html+js部分index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="st..
复制链接

扫一扫