테이블 편집 가능

Bootstrap Table의 인라인 편집 확장 기능으로, 셀 편집 기능을 지원합니다.

이 페이지에서

인라인 편집 확장 기능은 x-editable 플러그인을 기반으로 하여 테이블에 인라인 편집 기능을 추가합니다. 사용자는 직접 셀을 클릭하여 편집할 수 있습니다.

사용법

<script src="extensions/editable/bootstrap-table-editable.js"></script>

옵션

editable

속성: data-editable
유형: Boolean
세부 정보:

전역적으로 편집 가능한 기능을 활성화할지 여부를 제어합니다. false로 설정하면 모든 열의 편집 기능이 비활성화됩니다. true로 설정하면 편집 기능이 활성화됩니다(열별로 개별 구성이 필요합니다).
기본값: true

열 옵션

alwaysUseFormatter

속성: data-always-use-formatter
유형: Boolean
세부 정보:

true로 설정하면 해당 열이 이미 편집되었더라도 항상 formatter를 사용합니다.
기본값: false

editable

속성: data-editable
유형: Object | Function

세부 정보:

x-editable의 구성 옵션입니다. 전체 구성은 http://vitalets.github.io/x-editable/docs.html#editable를 참조하세요.

함수 유형인 경우 테이블의 각 행에서 호출되며, index, row, element를 매개변수로 받아 x-editable의 구성 객체를 반환해야 합니다.

모든 옵션은 data-editable-* HTML 속성을 통해 정의할 수 있습니다. 테이블 수준의 옵션은 모든 열에 적용되며, 열에서 재정의할 수 있습니다:

<table id="my_table_id"
  data-url="data/url.json"
  data-id-field="id"
  data-editable-emptytext="기본 빈 텍스트."
  data-editable-url="/my/editable/update/path">
  <thead>
    <tr>
      <th class="col-md-1" data-field="id" data-sortable="true" data-align="center">#</th>
      <th class="col-md-4" data-field="name" data-editable="true">이름</th>
      <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="사용자 정의 빈 텍스트.">설명</th>
    </tr>
  </thead>
</table>

noEditFormatter를 사용하여 일부 값을 편집할 수 없도록 만들 수 있습니다. 예:

{
  editable: {
    noEditFormatter (value, row, index) {
      if (value === 'noEdit') {
        return '편집 불가'
      }
      return false
    }
  }
}

기본값: undefined

이벤트

onEditableInit (editable-init.bs.table)

모든 열이 $().editable() 메서드를 통해 초기화가 완료되면 발생합니다.

onEditableSave (editable-save.bs.table)

편집 가능한 셀이 저장될 때 발생합니다.

매개변수: field, row, rowIndex, oldValue, $el

onEditableShown (editable-shown.bs.table)

편집 가능한 셀이 편집을 위해 열릴 때 발생합니다.

매개변수: field, row, $el

onEditableHidden (editable-hidden.bs.table)

편집 가능한 셀이 숨겨지거나 닫힐 때 발생합니다.

매개변수: field, row, $el, reason

알려진 문제

Table Editable 확장 기능은 select 유형에서 검색을 지원하지 않습니다.