들어가며

이 강좌에서는 DataColumn에 연결된 Field의 실제 값과 다른 값을 셀에 표시하는 Lookup을 구현하는 방법에 대해서 알아봅니다.

이론

Lookup을 구현하는 방법은 실제 값과 표시할 값이 대칭(예, a일 경우 b로 표시) 여부에 따라 두가지의 구현 방법이 있습니다.

  • 대칭일 때 : LookupSource을 사용하여 values에 해당하는 순번과 동일한 labels중의 값으로 표시
  • 비대칭일 때 : 표시할 값을 갖고 있는 Field를 별도로 생성하고 이 Field를 Column.labelField 속성으로 지정

LookupSource를 이용하는 방법은 DataColumn의 values, labels 속성을 지정하는 방법이 있고 별도의 Lookup Source를 동적으로 구성하는 방법이 있습니다. LookupSource를 동적으로 사용하는 방법은 별로 강좌에서 설명하겠습니다.

이 강좌에서는 실제 값이 “1”일 때 “A”, “2”일 때 “B”, “3”일 때 “C”, “4”일 때 “D”로 표시하는 컬럼과, 실제 값이 1000미만일 때 원래 값을 표시하고 1000이상일 때는 “초과”라는 문자열을 표시하는 컬럼 두가지를 예로 실습하도록 해보겠습니다.

실습

  1. 전역 변수 선언

    GridBase와 DataProvider객체를 담기 위한 기본 변수와 FilterAction이 선택된 컬럼을 담기위한 filterColumn변수를 전역으로 선언합니다.

     var gridView;
 var dataProvider;

  2. Field 구성

    컬럼과 매칭될 두개의 컬럼 “fieldA”, “fieldB”와 labelField로 사용할 “fieldC”를 선언

     dataProvider.setFields([{
   fieldName: "fieldA"
 }, {
   fieldName: "fieldB",
   dataType: "number"
 }, {
   fieldName: "fieldC"
 }]);

  3. Column 구성

    첫번째 컬럼은 Lookup Source를 적용하기 위해 한쌍의 values, labels를 정의합니다. 이 때 values의 값이 아닌 labels의 값으로 표시하기 위해 lookupDisplay를 true로 설정합니다. 두번째 컬럼은 “fieldC”를 labelField를 사용합니다.

     gridView.setColumns([{
   fieldName: "fieldA",
   width: 200,
   header: {text: "Lookup Source"},
   values: ["1","2","3","4"],
   labels: ["A","B","C","D"],
   lookupDisplay: true
 }, {
   fieldName: "fieldB",
   width: 200,
   header: {text: "Label Field"},
   labelField: "fieldC"
 }]);

  4. 기초 데이터 구성

    fieldC는 fieldB에 해당하는 컬럼에 표시할 값입니다.

     dataProvider.setRows([{
   fieldA: "1",
   fieldB: 987,
   fieldC: "987"
 }, {
   fieldA: "1",
   fieldB: 102,
   fieldC: "102"
 }, {
   fieldA: "1",
   fieldB: 1003,
   fieldC: "초과"
 }, {
   fieldA: "2",
   fieldB: 1203,
   fieldC: "초과"
 }, {
   fieldA: "2",
   fieldB: 204,
   fieldC: "204"
 }, {
   fieldA: "2",
   fieldB: 1021,
   fieldC: "초과"
 }]);

  5. 버튼 핸들러

     $("#btnFieldAValue").click(function() {
   gridView.setValue(gridView.getCurrent().dataRow, "fieldA", $("#selFieldAValue").val());
 });

 $("#btnFieldBValue").click(function() {
   gridView.setValue(gridView.getCurrent().dataRow, "fieldB", parseInt($("#txtFieldBValue").val()) );
 });

  6. fieldB값이 바뀔 때 fieldC값을 변경하기 위한 LocalDataProvider.onValueChanged() 콜백 함수

     dataProvider.onValueChanged = function (provider, row, field) {
   if (field == 1) { // fieldB
     var value = dataProvider.getValue(row, field);
     if (value < 1000) {
       dataProvider.setValue(row, "fieldC", value+"");
     } else {
       dataProvider.setValue(row, "fieldC", "초과");
     }
   }
 };

실행화면


전체 소스코드

SCRIPT
<script language="javascript">
  var gridView;
  var dataProvider;

  $(document).ready( function() {
    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");

    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);

    dataProvider.setFields([{
      fieldName: "fieldA"
    }, {
      fieldName: "fieldB",
      dataType: "number"
    }, {
      fieldName: "fieldC"
    }]);

    gridView.setColumns([{
      fieldName: "fieldA",
      width: 200,
      header: {text: "Lookup Source"},
      values: ["1","2","3","4"],
      labels: ["A","B","C","D"],
      lookupDisplay: true
    }, {
      fieldName: "fieldB",
      width: 200,
      header: {text: "Label Field"},
      labelField: "fieldC",
      lookupDisplay: true
    }]);

    dataProvider.setRows([{
      fieldA: "1",
      fieldB: 987,
      fieldC: "101"
    }, {
      fieldA: "1",
      fieldB: 102,
      fieldC: "102"
    }, {
      fieldA: "1",
      fieldB: 1003,
      fieldC: "초과"
    }, {
      fieldA: "2",
      fieldB: 1203,
      fieldC: "초과"
    }, {
      fieldA: "2",
      fieldB: 204,
      fieldC: "204"
    }, {
      fieldA: "2",
      fieldB: 1021,
      fieldC: "초과"
    }]);

    dataProvider.onValueChanged = function (provider, row, field) {
      if (field == 1) { // fieldB
        var value = dataProvider.getValue(row, field);
        if (value < 1000) {
          dataProvider.setValue(row, "fieldC", value+"");
        } else {
          dataProvider.setValue(row, "fieldC", "초과");
        }
      }
    };

    $("#btnFieldAValue").click(function() {
      gridView.setValue(gridView.getCurrent().dataRow, "fieldA", $("#selFieldAValue").val());
    });

    $("#btnFieldBValue").click(function() {
      gridView.setValue(gridView.getCurrent().dataRow, "fieldB", parseInt($("#txtFieldBValue").val()) );
    });

  })
</script>
HTML
<button type="button" id="btnFieldAValue" class="btn btn-primary btn-xs">fieldA value change</button>
<select id="selFieldAValue">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<label>현재 행의 fieldA 필드 값을 선택한 값으로 변경</label><br/>

<button type="button" id="btnFieldBValue" class="btn btn-primary btn-xs">fieldB value change</button>
<input type="number" id="txtFieldBValue" value="0" />
<label>현재 행의 fieldB 필드 값을 입력한 값으로 변경</label>

<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지

API 참조