티스토리 뷰

WEB/JQuery

인사 관리 트리 탐색기 (검색/초기화 버튼 포함)

silverline79 2026. 1. 22. 23:21 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HR 조직도 관리 시스템</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* [1] 디자인 스타일 */
        body { font-family: 'Pretendard', sans-serif; margin: 0; display: flex; height: 100vh; background: #f4f7f6; }
        
        .sidebar { width: 400px; background: #fff; border-right: 1px solid #e0e0e0; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; }
        .detail-view { flex: 1; padding: 50px; background: #fff; display: flex; flex-direction: column; }

        /* 검색 영역 레이아웃 */
        .search-container { display: flex; gap: 6px; margin-bottom: 20px; }
        .search-container input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; outline: none; transition: 0.2s; }
        .search-container input:focus { border-color: #007bff; }

        /* 버튼 스타일 */
        .btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.2s; }
        .btn-search { background: #007bff; color: white; }
        .btn-search:hover { background: #0056b3; }
        .btn-reset { background: #6c757d; color: white; }
        .btn-reset:hover { background: #5a6268; }

        .control-btns { display: flex; gap: 10px; margin-bottom: 15px; justify-content: flex-end; }
        .btn-text { background: none; border: none; color: #007bff; cursor: pointer; font-size: 12px; text-decoration: underline; }

        /* 트리 메뉴 스타일 */
        ul.tree, ul.tree ul { list-style: none; padding-left: 20px; margin: 0; }
        .tree li { margin: 8px 0; }
        .dept, .user { padding: 8px 12px; cursor: pointer; border-radius: 6px; display: inline-block; font-size: 14px; }
        .dept { font-weight: bold; color: #333; background: #f8f9fa; }
        .user { color: #555; }
        .dept:hover, .user:hover { background: #e9ecef; }
        .dept.collapsed + ul { display: none; }
        .active-item { background-color: #007bff !important; color: white !important; }
        .highlight { background-color: #fff3cd !important; border: 1px solid #ffeeba; }

        /* 결과 없음 안내 */
        #no-result { display: none; text-align: center; padding: 30px; border: 1px dashed #ddd; border-radius: 8px; color: #999; }

        /* 우측 카드 디자인 */
        .user-card { border: 1px solid #eee; padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); max-width: 550px; line-height: 2; }
    </style>
</head>
<body>

    <div class="sidebar">
        <h2 style="margin-top: 0;">🏢 조직도 탐색</h2>
        
        <div class="control-btns">
            <button id="btn-expand" class="btn-text">전체 펼치기</button>
            <button id="btn-collapse" class="btn-text">전체 접기</button>
        </div>

        <div class="search-container">
            <input type="text" id="tree-search" placeholder="부서명 또는 이름 입력...">
            <button id="btn-search-trigger" class="btn btn-search">검색</button>
            <button id="btn-search-reset" class="btn btn-reset">초기화</button>
        </div>

        <div id="no-result">일치하는 정보가 없습니다.</div>
        <ul class="tree" id="main-tree">
            </ul>
    </div>

    <div class="detail-view">
        <div id="view-empty" style="text-align: center; margin-top: 150px; color: #ccc;">
            <p style="font-size: 80px; margin: 0;">👥</p>
            <p style="font-size: 20px;">검색하거나 조직도에서 사원을 선택하세요.</p>
        </div>

        <div id="view-detail" style="display: none;">
            <div class="user-card">
                <span id="user-dept-tag" style="background:#e7f1ff; color:#007bff; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:bold;">소속부서</span>
                <h1 id="user-name" style="margin: 15px 0 5px 0; font-size: 32px;">이름</h1>
                <p id="user-title" style="margin: 0 0 25px 0; color: #666; font-size: 18px;">직급</p>
                <hr style="border:0; border-top:1px solid #eee; margin-bottom:25px;">
                <p><strong>사번:</strong> <span id="user-id"></span></p>
                <p><strong>이메일:</strong> <span id="user-email"></span></p>
                <p><strong>담당업무:</strong> <span id="user-task"></span></p>
            </div>
        </div>
    </div>

<script>
$(document).ready(function() {
    // 1. 샘플 데이터
    const orgData = [
        {
            "name": "플랫폼사업부",
            "type": "dept",
            "children": [
                {
                    "name": "개발팀",
                    "type": "dept",
                    "children": [
                        { "name": "최자바", "type": "user", "title": "수석연구원", "id": "IT-101", "email": "java@work.com", "task": "서버 아키텍처 설계" },
                        { "name": "김리액", "type": "user", "title": "선임연구원", "id": "IT-105", "email": "react@work.com", "task": "프론트엔드 UI 개발" }
                    ]
                }
            ]
        },
        {
            "name": "전략기획실",
            "type": "dept",
            "children": [
                { "name": "박기획", "type": "user", "title": "실장", "id": "PLAN-01", "email": "plan@work.com", "task": "연간 사업 계획 수립" }
            ]
        }
    ];

    // 2. 트리 생성 함수
    function buildTree(data, path = "") {
        let html = "";
        data.forEach(item => {
            if (item.type === "dept") {
                html += `<li><div class="dept">🏢 ${item.name}</div><ul>${buildTree(item.children, item.name)}</ul></li>`;
            } else {
                html += `<li class="user" data-name="${item.name}" data-title="${item.title}" data-id="${item.id}" data-dept="${path}" data-email="${item.email}" data-task="${item.task}">👤 ${item.name} ${item.title}</li>`;
            }
        });
        return html;
    }
    $('#main-tree').html(buildTree(orgData));

    // 3. 검색 핵심 로직
    function runSearch() {
        const val = $('#tree-search').val().toLowerCase().trim();
        const $items = $('#main-tree li');
        
        $('.dept, .user').removeClass('highlight');

        if (!val) {
            $items.show();
            $('#no-result').hide();
            return;
        }

        $items.hide();
        let found = false;

        $items.each(function() {
            if ($(this).text().toLowerCase().indexOf(val) !== -1) {
                $(this).show().parents('li').show();
                $(this).parents('ul').show().prev('.dept').removeClass('collapsed');
                
                $(this).children('.dept, .user').filter(function() {
                    return $(this).text().toLowerCase().indexOf(val) !== -1;
                }).addClass('highlight');
                found = true;
            }
        });
        found ? $('#no-result').hide() : $('#no-result').show();
    }

    // 4. 이벤트 연결
    $('#btn-search-trigger').click(runSearch);
    $('#tree-search').on('keypress', (e) => { if(e.which == 13) runSearch(); });

    $('#btn-search-reset').click(function() {
        $('#tree-search').val('');
        $('.dept, .user').removeClass('highlight active-item');
        $('#main-tree li').show();
        $('.dept').removeClass('collapsed').next('ul').show();
        $('#no-result, #view-detail').hide();
        $('#view-empty').show();
    });

    $(document).on('click', '.dept', function() {
        $(this).toggleClass('collapsed').next('ul').slideToggle(200);
    });

    $(document).on('click', '.user', function(e) {
        e.stopPropagation();
        $('.dept, .user').removeClass('active-item');
        $(this).addClass('active-item');

        const d = $(this).data();
        $('#view-empty').hide();
        $('#view-detail').fadeIn(200);
        $('#user-name').text(d.name);
        $('#user-title').text(d.title);
        $('#user-id').text(d.id);
        $('#user-dept-tag').text(d.dept);
        $('#user-email').text(d.email);
        $('#user-task').text(d.task);
    });

    $('#btn-expand').click(() => $('.dept').removeClass('collapsed').next('ul').show());
    $('#btn-collapse').click(() => $('.dept').addClass('collapsed').next('ul').hide());
});
</script>
</body>
</html>

인사 관리 트리 탐색기 (검색_초기화 버튼 포함).html
0.01MB

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JQuery' 카테고리의 다른 글

프로필 이미지 기능이 포함된 인사 관리 시스템  (0) 2026.01.23
검색 결과 바로 선택 기능이 추가된 통합 코드  (0) 2026.01.22
인사 관리 시스템 - 검색 제어 강화  (0) 2026.01.22
부서 및 사용자 관리 트리 탐색기  (0) 2026.01.22
JSON 동적 트리 탐색기  (0) 2026.01.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함