[shop] 회원목록 및 이름 클릭 시 회원정보 보기

1. html

<th:block th:unless="${#lists.size(memberList) == 0}">
	<tr th:each="member, status : ${memberList}">
		<th th:text="${status.count}"></th>
		<!-- memberStat.cont와 동일함 -->
		<td th:text="${member.memberId}"></td>
		<td><span th:text="${member.memberName}"
		th:onclick="memberDetail([[${member.memberId}]]);"></span>
		</td>
		<td th:text="${member.memberRole}"></td>
	</tr>
</th:block>

 

2. mapper

<select id="memberDetail" resultMap="member">

SELECT MEMBER_ID
	 , MEMBER_NAME
	 , MEMBER_ADDR||' '|| ADDR_DETAIL AS MEMBER_ADDR
	 , MEMBER_EMAIL
	 , DECODE(MEMBER_ROLE, 'MEMBER', '일반회원','관리자')AS MEMBER_ROLE
	 , DECODE(MEMBER_STATUS, 'ACTIVE', '활동중','휴면계정') AS MEMBER_STATUS
FROM SHOP_MEMBER
WHERE MEMBER_ID = #{memberId}

</select>

@Override
public MemberVO memberDetail(String memberId) {

	return sqlSession.selectOne("memberMapper.memberDetail", memberId);
}

 

3. controller, js

@PostMapping("/memberDetail")
@ResponseBody
public MemberVO memberDetail(String memberId) {
		
	MemberVO detail = memberService.memberDetail(memberId);
	
	return detail;
}

function memberDetail(memberId){

    $.ajax({
       url: '/admin/memberDetail', //요청경로
        type: 'post',
        data:{'memberId':memberId}, //필요한 데이터
        success: function(result) {

        const memberDetail = document.querySelector('#detail');

        memberDetail.innerHTML='';

        let str = '';

        str += `<tr>`;
        str += `<th>회원ID</th>`;
        str += ` <td>${result.memberId}</td> `;
        str += `</tr>`;
        str += `<tr>`;
        str += `<th>회원이름</th> `;
        str += `<td>${result.memberName}</td>`;
        str += `</tr>`;
        str += `<tr> `;
        str += `<th>주소</th> `;
        str += ` <td>${result.memberAddr}</td> `;
        str += `</tr> `;
        str += `<tr>`;
        str += `<th>Email</th> `;
        str += `<td>${result.memberEmail}</td>`;
        str += `</tr>`;
        str += `<tr>`;
        str += `<th>권한</th>`;
        str += ` <td>${result.memberRole}</td>`;
        str += `</tr>`;
        str += ` <tr>`;
        str += ` <th>상태</th>`;
        str += `<td>${result.memberStatus}</td>`;
        str += `</tr>`;

        memberDetail.insertAdjacentHTML('afterbegin',str);

        },
        error: function(){
           alert('실패');
        }
    });


}

 

<div layout:fragment="content">
	
<style>
#scrollTest{
/* overflow: scroll; */ /* 스크롤 생김 상하만 하고 싶을땐 overflow-y 좌우면 overflow-x*/
overflow-y: scroll; 
}
 ::-webkit-scrollbar {
 width: 10px;
}
       
 ::-webkit-scrollbar-track {
 background: #eeeeee;
 border-radius: 5px;
}
::-webkit-scrollbar-thumb {
 /* background: linear-gradient(#c2e59c, #64b3f4); */
 background: #dcdcdc;
/* background: #0d6efd; */
 border-radius: 5px;
 }   
</style>

<div class="row">
<div class="col-5 ms-4">
<div class="row g-3">
    <div class="col-12 mb-3">
        <h5>회원목록</h5>
    </div>
<!-- 제목은 고정 아래에는 스크롤 달고 싶다면 테이블을 두개 만들어서 적용시킨다 -->
    <div class="col-12 mb-3">
        <div class="row" >
            <div class="col-12 mb-3">
                <div>
                    <div class="col-12 mb-3">
                        <!-- 테이블 제목 부분  -->
                            <table class="table" style="margin-bottom: -1rem;">
                                <thead>
                                    <tr>
                                        <th scope="col">No.</th>
                                        <th scope="col">회원ID</th>
                                        <th scope="col">이름</th>
                                        <th scope="col">권한</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="row" style="height: 250px; overflow-y: scroll;">
                        <div class="col-12 mb-3" >

                        <table class="table table-striped table-hover text-center">

                                <colgroup>
                                <col width="10%">
                                <col width="40%">
                                <col width="20%">
                                <col width="30%">
                                </colgroup>
                                <tbody>
                                    <th:block th:if="${#lists.size(memberList) == 0}">
                                        <tr>
                                            <td colspan="4">회원이 없습니다.</td>
                                        </tr>
                                    </th:block>

                                    <th:block th:unless="${#lists.size(memberList) == 0}">
                                            <tr th:each="member, status : ${memberList}">
                                                <th th:text="${status.count}"></th>
                                                <!-- memberStat.cont와 동일함 -->
                                                <td th:text="${member.memberId}"></td>
                                                <td><span th:text="${member.memberName}"
                                                    th:onclick="memberDetail([[${member.memberId}]]);"></span>
                                                </td>
                                                <td th:text="${member.memberRole}"></td>
                                            </tr>
                                        </th:block>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="col-5 ms-4">
        <div class="row g-3">
            <div class="col-12 mb-3">
            <h5>회원상세</h5>
            </div>
            <div class="col-12 mb-3">
            <table class="table">
              <colgroup>
              <col width="25%">
              <col width="75%">
              </colgroup>

              <tbody id="detail">

              </tbody>
            </table>

        </div>
    </div>

</div>




<script type="text/javascript" th:src="@{/js/admin/mem_manage.js}"></script>

</div>
</div>