jQuery를 이용한 List/Edit 겸용 페이지

하나의 html페이지로 Listing과 Editing을 동시에 수행하는 페이지는 다음과 만들 수 있다.

(참고:  jQuery와 themeleaf이용)

 

포인트: flag(isEditMode)를 두어서 list인지 Edit인지를 구분하고, 

 그에 따라 필요한 버튼을 hide/show

 input을 readonly or not 으로 세팅한다. 

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  $(function () {
    allReload();

    //list-edit Mode switch
    function allReload() {
      if ($('#isEditMode').val() == 'true'){
        $('.form-control').prop('readonly', false);
        $('.form-control').css('border', '1px solid #ccc');
        $('#editBtn').hide();
        $('#storeBtn').show();
        $('#cancelBtn').show();
      } else {
        $('.form-control').prop('readonly', true);
        $('.form-control').css('border', 'none');
        $('#editBtn').show();
        $('#storeBtn').hide();
        $('#cancelBtn').hide();
      }
    }

    $('#editBtn').click(function () {
      $('#isEditMode').val('true');
      allReload();
    });

    $('#cancelBtn').click(function () {
      $('#isEditMode').val('false');
      allReload();
    });
    //Button process


  });
  /*]]>*/
</script>

<input type="hidden" id="isEditMode" th:value="${isEditMode}"/>
<form id="form" method="post" enctype="multipart/form-data" th:object="${chatRankingCoefficientForm}"
      action="/app/chat/ranking/constant">
  <table class="table table-hover table-bordered"
         style="word-break: break-all;word-wrap: break-word;" border="1">
    <tr>
      <th style="text-align:center">ranking</th>
      <th style="text-align:center">Value</th>
    </tr>
    <tr>
      <td>Days of Evaluation</td>
      <td>
        <input class="form-control" readonly="true" style="border:none;background-color:transparent;"
               type="number" th:field="*{daysOfEvaluation}"/>
        <div th:classappend="${#fields.hasErrors('daysOfEvaluation')} ? 'has-error'">
          <span th:if="${#fields.hasErrors('daysOfEvaluation')}" th:errors="*{daysOfEvaluation}"
                class="help-block">error!</span>
        </div>
      </td>
    </tr>
..중략
  <p> <!-- BUTTONS -->
    <a class="btn btn-primary" id="editBtn">edit</a>
    <input type="submit" class="btn btn-primary" id="storeBtn" value="save" />
    <a th:href="@{/app/chat/ranking/constant}" class="btn btn-secondary" id="cancelBtn">cancel</a>
  </p>
</form>