카테고리 없음

220118_개발일지

VIPeveloper 2022. 1. 18. 22:22
728x90
반응형

1. 역할에 해당하는 체크박스 구현

listRoles : 모든 역할

tl : 계정에 해당하는 역할

th:checked 가 중요했음.

<th:block th:each="role: ${listRoles}" th:with="tl=${account.roleList}, r=${role.id}">
    <input type="checkbox" th:checked="${#lists.contains(tl, role)}"
           th:text="${role.name}" th:value="r" class="m-2" />
</th:block>

2. bootstrap-toggle 사용

- node_modules 이동해서 npm install bootstrap-toggle 실행

https://www.bootstraptoggle.com/#usage

 

Bootstrap Toggle

offstyle string "default" Style of the off toggle.Possible values are:default,primary,success,info,warning,danger Refer to Bootstrap Button Options documentation for more information.

www.bootstraptoggle.com

<th:block th:each="role: ${listRoles}" th:with="tl=${account.roleList}, r=${role.id}">
    <td class="align-middle border-top-0">
    <input type="checkbox" th:checked="${#lists.contains(tl, role)}"
           data-toggle="toggle"
           data-onstyle="primary"
           data-style="slow"
           data-width="80" data-height="50"
           class="m-2"
           th:value="r"/>
    </td>
</th:block>
728x90
반응형