SMART datagrid v1.4 > Examples

[ grids ver.1.3.5]   Back  Forward

Object Field  Example

ValueType.OBJECT 형의 데이터필드에는 JSON 객체를 바로 저장할 수 있다. 

Object 형 필드에 연결된 그리드 데이터셀에는 기본적으로 해당 필드에 지정된 keyPathkeyCallback 속성에서 리턴되는 값이 표시되고, 다른 자료형의 경우와 마찬가지로 ValueColumn.displayCallback을 이용해서 표시값을 생성할 수도 있다. 

아래 "회사" 컬럼은 아래 같은 형태의 객체들을 저장하는 필드에 연결되어 있다. 

Code -1
    { name: 'Apple', addr: 'NewYork' }

그리고 해당 필드의 keyPath"name"이 지정되어 있다. 

"판매량/증가율" 컬럼과 "판매량" 컬럼은 아래 형태의 객체를 지정하는 필드에 연결되어 있고, keyCallback을 설정하거나 ValueColumn.displayCallback을 지정해서 데이터셀에 표시한다. 

Code -2
    { amount: '1234', growth: '1.3' }
Code -3
    ds.setFields([{
        "fieldName": "sales",
        "dataType": "object",
        "keyCallback": function (field, value) {
            return value.amount + ' / ' + value.growth;
        }
    },
    ...
Code -4
    grid.setColumns([{
        "fieldName": "sales",
        "displayCallback": function (index, value) {
            return value.amount;
        }
    },
    ...
Grid - 1
rows

또, 이런 데이터셀에서 기본적으로 사용자가 직접 값을 수정할 수 없고, 별도의 입력 방식을 제공해서 GridDataSet.setValue 등으로 저장해야 한다. 이 때, 데이터셋에 저장되는 JSON 객체의 변경은 객체 수준에서만 확인된다. 즉, 데이터셋에 저장된 객체를 가져와서(getValue) 그 속성들을 변경한 후, 다시 저장(setValue)하더라도 기본적으로 변경 이벤트가 발생하지 않는다. 객체 자체의 변경이 있을 때만 변경 이벤트들이 발생한다. 

아래에서 'SetValue'를 실행하면 데이터셋 이벤트가 발생하지 않으므로 그리드에 변경 내용이 바로 반영되지 않지만, 변경 이벤트가 발생하는 'SetValueEx'를 호출하면 바로 반영되게 할 수 있다. 

   선택 중인 "회사" 컬럼 셀의 값을 변경한다. 

객체형 컬럼의 정렬은 필드에 설정된 DataField.compareCallback에서 리턴되는 비교값을 기준으로 설정된다. 콜백을 지정한 않은 경우 표시할 때와 마찬가지로 keyCallback이 리턴하는 값이나 keyPath로 지정한 객체의 속성 값으로 정렬한다. 

Code -5
    {
        "fieldName": "sales",
        "dataType": "object",
        compareCallback: function (v1, v2) {
            return v1.growth - v2.growth;
        }
    }

엑셀 내보기를 할 때, 객체형의 값은 표시의 경우와 마찬가지로 keyPathkeyCallback에서 리턴되는 값을 기준으로, 리턴값의 자료형에 따라 내보내기 옵션에 지정된 objectCallback 등의 변환 방식에 따라 저장된다. 

Code -6
    DataLudi.exportToExcel(grdMain, {
        fileName: "dlgrid.xlsx",
        objectCallback: function (row, column, v) {
            if (column.name() == 'Sales3') {
                return v.amount;
            }
            return v;
        }
    });   

 

소스보기 JSP 

See Also
데이터필드 개요
DataField.keyPath
DataField.keyCallback
DataField.compareCallback
ValueColumn.displayCallback
GridDataSet.setValue
GridDataSet.setValueEx
GridExportOptions.objectCallback
Examples
Number Value
Datetime Value
Boolean Value