AX5UI - GRID 5 (인라인 에디트)

그리드의 내용을 바로 수정할 수 있는 inline edit 를 테스트 해 보았습니다.

 

인라인 에디터는 다음과 같은 7가지 타입이 있습니다.

 

- text 타입 : 한줄 입력 필드입니다.

- money 타입 : money포맷 숫자 입니다.

- number 타입 : 숫자만 입력됩니다.

- date 타입 : 캘린더로 날짜를 입력할 수 있습니다. 날짜 포맷은 yyyy-mm-dd 입니다.

- select 타입 : 셀렉트 박스로 아이템을 선택할 수 있습니다.

- checkbox 타입 : 체크박스로 선택 할 수 있습니다. 값은 문자열 "true" 또는 "false" 입니다.

- textarea 타입 : 여러행의 글을 입력할 수 있습니다.

 

 

 

사용방법을 보도록 하겠습니다.

 

1. 필요한 스트일시트와 js 파일을 불러 들입니다.

 

ax5ui.all.min.js 를 사용할 경우 textarea 가 동작을 하지 않았습니다. 뭔가 CDN에 동기화가 안되어 있거나 한 모양입니다.

 

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-calendar/master/dist/ax5calendar.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-select/master/dist/ax5select.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-calendar/master/dist/ax5calendar.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-formatter/master/dist/ax5formatter.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-select/master/dist/ax5select.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>

 

2. 그리드의 컬럼 설정에 inline 에디터를 사용하도록 설정합니다.

 

각 컬럼 설정에 editor: {type: "date" } 처럼 editor 항목을 넣으 줍니다. 

특정 조건에 따라 editor를 동작하지 않게 하려면 editor: {type: "text"}, disabled: function() { return true; } } 으로 

disabled에 true 를 반환하면 에디터가 비활성화 됩니다.

 

columns: [
  {key: "date", label: "날짜", formatter: "date", align: "center", editor: {type: "date"}},
  {key: "type", label: "구분", align: "center",
    editor: {type: "select",
      config: {
        columnKeys: {optionValue: "CD", optionText: "NM"},
        options: [{CD: "O", NM: "O: 주유"}, {CD: "R", NM: "R: 정비"}]
      },
      disabled: function () {
        // 활성화 여부를 item.complete 의 값으로 런타임 판단.
        return this.item.complete == "true";
      }
    }
  },
  {key: "amount", label: "주유량", align: "center", editor: {type: "number"}},
  {key: "mileage", label: "주행거리(km)", align: "center", editor: {type:"number"}},
  {key: "price", label: "금액(원)", formatter: "money", align: "center", editor: {type:"money"}},
  {key: "repair", label: "정비내역", align: "center", editor:{type: "text"}},
  {key: "complete", label: "완료", align: "center", editor:{type: "checkbox"}},
  {key: "note", label: "비고", align: "center", editor:{type: "textarea"}}
]

 

- "날짜" 컬럼은 editor: {type: "date"} 로 캘린더를 사용해서 값을 입력합니다. 캘린더의 날짜를 선택해서 입력되는 값은 문자열로 "yyyy-mm-dd" 형식입니다.

 

- "구분" 컬럼은 콤보박스입니다. {type:"select"} 이고, config 속성으로 콤보 박스 를 보여줍니다. config 속성은 안에 다시 columnKeys와 options 속성을 가지는데, columnKeys는 콤보박스의 value와 text를 지정하는 키 값을 가집니다. options 는 콤보박스에 보여질 내용 즉, 선택할 수 있는 값들이 되겠습니다. 선택시에는 콤보박스를 이용하더라도 그리드에 보여지는 값은 CD 값입니다. NM 값이보여지도록 하려면 formatter 를 사용해야 합니다.

 

- "구분" 컬럼에는 disabled 속성을 사용하여 "완료"컬럼이 체크 되어있으면 값을 변경하지 못하도록 하였습니다.

 

- "주유량" 컬럼은 editor: {type: "number"} 를 사용하여 숫자만 입력할 수 있도록 되어 있습니다.

 

- "금액(원)" 컬럼은 editor: {type:"money"} 를 사용하여 money 형식으로 입력되도록 되어 있습니다.

 

- "정비내역" 컬럼은 editor:{type: "text"} 를 사용하여 한줄 텍스트를 입력할 수 있도록 되어 있습니다.

 

- "완료" 컬럼은 editor:{type: "checkbox"} 를 사용하여 체크박스로 값을 선택할 수 있도록 되어 있습니다.

 

- chcekbox를 체크하거나 체크 해제하면 들어가는 값은 문자열로 "true"와 "false" 입니다.

 

- "비고" 컬럼은 editor:{type: "textarea"} 를 사용하여 여러줄의 텍스트를 입력할 수 있도록 되어 있습니다.

 

 

※ 소스

inline_edit.zip

다운로드