티스토리 뷰

WEB/JQuery

인사 관리 시스템 - 검색 제어 강화

silverline79 2026. 1. 22. 23:15

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인사 관리 시스템 - 검색 제어 강화</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: #f8f9fa; }
        
        .sidebar { width: 380px; background: #fff; border-right: 1px solid #e9ecef; padding: 25px; overflow-y: auto; }
        .detail-view { flex: 1; padding: 50px; background: #fff; overflow-y: auto; }

        /* 🔍 검색 영역 레이아웃 수정 */
        .search-area { display: flex; gap: 5px; margin-bottom: 15px; }
        .search-area input { flex: 1; padding: 10px; border: 1px solid #dee2e6; border-radius: 6px; outline: none; }
        
        /* 버튼 공통 스타일 */
        .btn-main { padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; 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: 5px; margin-bottom: 10px; justify-content: flex-end; }
        .btn-small { padding: 4px 8px; font-size: 11px; border: 1px solid #eee; background: white; cursor: pointer; border-radius: 4px; }

        /* 트리 메뉴 스타일 */
        ul.tree, ul.tree ul { list-style: none; padding-left: 20px; margin: 0; }
        .dept, .user { padding: 8px 10px; cursor: pointer; border-radius: 4px; display: inline-block; font-size: 14px; }
        .dept { font-weight: bold; color: #333; }
        .user { color: #555; }
        .dept.collapsed + ul { display: none; }
        .active-item { background-color: #007bff !important; color: white !important; }
        .highlight { background-color: #fff3cd !important; font-weight: bold; color: #d63031; }
        
        #no-result { display: none; text-align: center; color: #999; padding: 15px; border: 1px dashed #eee; }

        /* 우측 상세 카드 */
        .user-card { border: 1px solid #eee; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); max-width: 500px; }
    </style>
</head>
<body>

    <div class="sidebar">
        <h2>🏢 조직도 시스템</h2>
        
        <div class="control-btns">
            <button id="btn-expand" class="btn-small">모두 펼치기</button>
            <button id="btn-collapse" class="btn-small">모두 접기</button>
        </div>

        <div class="search-area">
            <input type="text" id="tree-search" placeholder="부서명 또는 이름 입력...">
            <button id="btn-search-submit" class="btn-main btn-search">검색</button>
            <button id="btn-search-reset" class="btn-main 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: 100px; color: #ccc;">
            <p style="font-size: 60px;">👤</p>
            <p>검색하거나 조직도에서 사원을 선택하세요.</p>
        </div>

        <div id="view-detail" style="display: none;">
            <div class="user-card">
                <h3 id="user-title" style="color:#007bff; margin-top:0;">직급</h3>
                <h1 id="user-name" style="margin-bottom:20px;">이름</h1>
                <hr style="border:0; border-top:1px solid #eee;">
                <p><strong>사번:</strong> <span id="user-id"></span></p>
                <p><strong>소속:</strong> <span id="user-dept"></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": "IT001", "email": "kim@co.com", "task": "UI/UX 설계" },
                        { "name": "이영희", "type": "user", "title": "선임연구원", "id": "IT002", "email": "lee@co.com", "task": "React 개발" }
                    ]
                }
            ]
        },
        {
            "name": "영업본부",
            "type": "dept",
            "children": [
                { "name": "박영업", "type": "user", "title": "본부장", "id": "SALES01", "email": "park@co.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 performSearch() {
        const query = $('#tree-search').val().toLowerCase().trim();
        const $allLi = $('#main-tree li');
        
        $('.dept, .user').removeClass('highlight');

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

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

        $allLi.each(function() {
            if ($(this).text().toLowerCase().indexOf(query) !== -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(query) !== -1;
                }).addClass('highlight');
                found = true;
            }
        });
        found ? $('#no-result').hide() : $('#no-result').show();
    }

    // [이벤트] 4. 검색 버튼 클릭 및 엔터키
    $('#btn-search-submit').on('click', performSearch);
    $('#tree-search').on('keypress', function(e) {
        if(e.which == 13) performSearch(); // 엔터키 지원
    });

    // [이벤트] 5. 초기화 버튼 클릭
    $('#btn-search-reset').on('click', function() {
        $('#tree-search').val(''); // 입력창 비우기
        $('.dept, .user').removeClass('highlight active-item'); // 하이라이트 제거
        $('#main-tree li').show(); // 전체 보이기
        $('.dept').removeClass('collapsed').next('ul').show(); // 전체 펼치기
        $('#no-result').hide(); // 결과없음 메시지 숨김
        $('#view-detail').hide(); // 상세화면 닫기
        $('#view-empty').show(); // 빈화면 노출
    });

    // [이벤트] 6. 폴더 토글 및 상세 보기
    $(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').text(d.dept);
        $('#user-email').text(d.email);
        $('#user-task').text(d.task);
    });

    // [이벤트] 7. 전체 열기/닫기
    $('#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.22
인사 관리 트리 탐색기 (검색/초기화 버튼 포함)  (0) 2026.01.22
부서 및 사용자 관리 트리 탐색기  (0) 2026.01.22
JSON 동적 트리 탐색기  (0) 2026.01.22
API 데이터 호출 및 트리 생성 로직  (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
글 보관함