들어가며

이번 강좌에서는 동적으로 에디터를 바꾸는 방법에 대해 배워보도록 하겠습니다. 이 기능은 1.1.31버전 이상에서 동작합니다.

이론

동적스타일 데모에서도 간단하게 에디터를 변경하는 예제를 확인할 수 있습니다.
이 경우는 같은 text에디터에서 mask만 변경하는 예제입니다.

이번 강좌는 특정 구분값에 따라 text에디터와 dropDown에디터를 표시해보도록 하겠습니다. 동적으로 에디터를 변경하는 방법은 dynamicStyles에서 표시하고 싶은 editor 반환해주면 됩니다.

그러나 dropDown에디터를 반환하는 경우 생각해보아야할 것이 있습니다. dropDown의 경우 value와 label로 구분되어 있다는 점 입니다. 그렇기 때문에 화면 조회시 그리드에 담겨있는 value(코드값)가 그대로 표시되는 문제가 발생합니다. 이 문제를 해결하려면 displayCallback을 사용하면 됩니다. displayCallback에서 value값에 맞는 label값을 return하여 표시하도록 처리하면 됩니다.

실습을 통해 코드를 만들어보도록 하겠습니다.

실습

1. 아래와 같은 구조의 그리드가 있습니다. field1에는 에디터의 구분값을 넣도록 하겠습니다.(D: dropDown, T: text)

    var gridView;
    var dataProvider;
   
    window.onload = function () {
        console.log("==> RealGrid loaded.");
   
        RealGridJS.setRootContext("scripts");
        dataProvider = new RealGridJS.LocalDataProvider();
        gridView = new RealGridJS.GridView("realgrid");
        gridView.setDataSource(dataProvider);
   
        setFields(dataProvider);
        setColumns(gridView);
               
        loadData(dataProvider);
    };
       
    function setFields(provider) {
        var fields = [{
            "fieldName": "field1"
        }, {
            "fieldName": "field2"
        }]      
        provider.setFields(fields);
    };
       
    function setColumns(grid) {
        var columns = [{
            "fieldName": "field1",
            "name": "field1",
            "width": 90,
            "header": { "text": "구분" },
            "styles": { "textAlignment": "near", "font": "Tahoma" }
        }, {
            "fieldName": "field2",
            "name": "field2",
            "width": 150,
            "header": { "text": "text/dropdown" },
            "styles": { "textAlignment": "near", "font": "Tahoma" }
        }];
   
        grid.setColumns(columns);
    }       
                   
    function loadData(provider) {
        var datas = [
            ["T", "텍스트텍스트1"],
            ["T", "텍스트텍스트2"],
            ["D", "A01"],
            ["T", "텍스트텍스트3"],
            ["D", "A02"],
            ["D", "A03"],
            ["T", "텍스트텍스트4"],
            ["D", "A01"],
            ["T", "텍스트텍스트5"]
        ];
   
        dataProvider.setRows(datas);
    }

2. 구분값이 D인 행을 보면 value(코드)값이 표시되고 있고 편집해보려 해도 아직까지는 text에디터가 표시되고 있습니다. dynamicStyles를 설정하여 에디터를 변경해보도록 하겠습니다.

3. 두번째 컬럼에 아래와 같이 dynamicStyles을 설정합니다. (setColumn()시 직접 지정하거나 setColumnProperty()를 사용하여 동적으로 변경)

        ...생략...
        }, {
            "fieldName": "field2",
            "name": "field2",
            "width": 150,
            "header": { "text": "text/dropdown" },
            "styles": { "textAlignment": "near", "font": "Tahoma" },
            "dynamicStyles": function (grid, index, value) {
                var gubun = grid.getValue(index.itemIndex, "field1");
                var ret = {};
   
                switch (gubun) {
                    //구분값이 T이면 text에디터를 표시
                    case 'T':  
                        ret.editor = {
                            type: "text"
                        };
                        break;
                    //구분값이 D이면 드롭다운 에디터를 표시
                    case 'D':  
                        ret.editor = {
                            type: "dropDown",
                            values: ['A01', 'A02', 'A03', 'A04', 'A05'],
                            labels: ['감자', '고구마', '오이', '토마토', '당근']
                        }
                }
                return ret;
            }
        }];   
   
        or 
   
        gridView.setColumnProperty("field2", "dynamicStyles", 
            function (grid, index, value) {
                var gubun = grid.getValue(index.itemIndex, "field1");
                var ret = {};
   
                switch (gubun) {
                    //구분값이 T이면 text에디터를 표시
                    case 'T':  
                        ret.editor = {
                            type: "text"
                        };
                        break;
                    //구분값이 D이면 드롭다운 에디터를 표시
                    case 'D':  
                        ret.editor = {
                            type: "dropDown",
                            values: ['A01', 'A02', 'A03', 'A04', 'A05'],
                            labels: ['감자', '고구마', '오이', '토마토', '당근']
                        }
                }
                return ret;
            }
        );         
    

4. 구분값이 D인 행의 두번째 컬럼을 클릭해보면 dropDown에디터가 잘 표시되고 있습니다. 그러나 화면에는 여전히 value값으로 표시되고 있습니다. displayCallback을 사용하여 label값으로 표시해보도록 하겠습니다.

5. 두번째 컬럼에 아래와 같이 displayCallback을 설정합니다. (setColumn()시 직접 지정하거나 setColumnProperty()를 사용하여 동적으로 변경)

        ...생략...
        }, {
            "fieldName": "field2",
            "name": "field2",
            "width": 150,
            "header": { "text": "text/dropdown" },
            "styles": { "textAlignment": "near", "font": "Tahoma" },
            "dynamicStyles": function (grid, index, value) {
                var gubun = grid.getValue(index.itemIndex, "field1");
                var ret = {};
   
                switch (gubun) {
                    //구분값이 T이면 text에디터를 표시
                    case 'T':  
                        ret.editor = {
                            type: "text"
                        };
                        break;
                    //구분값이 D이면 드롭다운 에디터를 표시
                    case 'D':  
                        ret.editor = {
                            type: "dropDown",
                            values: ['A01', 'A02', 'A03', 'A04', 'A05'],
                            labels: ['감자', '고구마', '오이', '토마토', '당근']
                        }
                }
                return ret;
            },
            //기본적으로 드롭다운 데이터의 경우 코드값으로 표시되기에 라벨값으로 표시되게 처리
            "displayCallback": function (grid, index, value) {
                var retValue = value;
                var gubun = grid.getValue(index.itemIndex, "field1");
   
                if (gubun === 'D') {
                    var idx = ['A01', 'A02', 'A03', 'A04', 'A05'].indexOf(value);
   
                    retValue = ['감자', '고구마', '오이', '토마토', '당근'][idx];
                }
   
                return retValue;
            }
        }];   
   
        or 
   
        gridView.setColumnProperty("field2", "displayCallback", 
            function (grid, index, value) {
                var retValue = value;
                var gubun = grid.getValue(index.itemIndex, "field1");
   
                if (gubun === 'D') {
                    var idx = ['A01', 'A02', 'A03', 'A04', 'A05'].indexOf(value);
   
                    retValue = ['감자', '고구마', '오이', '토마토', '당근'][idx];
                }
   
                return retValue;
            }
        );              
    

실행화면

1. 화면의 구분값이 D인 행을 보면 value(코드)값이 표시되고 있고 편집해보려 해도 아직까지는 text에디터가 표시되고 있습니다. dynamicStyles를 설정하여 에디터를 변경해보도록 하겠습니다.

2. dynamicStyles 적용 버튼을 클릭하면 두번째 컬럼에 dynamicStyles가 적용됩니다.

3. 두번째 컬럼을 클릭해보면서 구분값에 맞는 에디터가 뜨는지 확인 합니다.

4. 에디터는 구분값에 맞게 잘 표시되지만 조회된 화면에는 여전히 value값으로 보이고 있습니다.

5. displayCallback 적용 버튼을 클릭하면 두번째 컬럼에 displayCallback이 적용됩니다.

6. 조회된 화면이 더 이상 value값이 아닌 label값으로 보입니다.

전체 소스코드

SCRIPT

<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.1.31.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.31.js"></script>

<script>
    var gridView;
    var dataProvider;

    window.onload = function () {
        $("#btnDynamicStyles").click(function () {
            gridView.setColumnProperty("field2", "dynamicStyles", 
                function (grid, index, value) {
                    var gubun = grid.getValue(index.itemIndex, "field1");
                    var ret = {};

                    switch (gubun) {
                        //구분값이 T이면 text에디터를 표시
                        case 'T':  
                            ret.editor = {
                                type: "text"
                            };
                            break;
                        //구분값이 D이면 드롭다운 에디터를 표시
                        case 'D':  
                            ret.editor = {
                                type: "dropDown",
                                values: ['A01', 'A02', 'A03', 'A04', 'A05'],
                                labels: ['감자', '고구마', '오이', '토마토', '당근']
                            }
                    }
                    return ret;
                }
            );   
        });

        $("#btnDisplayCallback").click(function () {
            gridView.setColumnProperty("field2", "displayCallback", 
                function (grid, index, value) {
                    var retValue = value;
                    var gubun = grid.getValue(index.itemIndex, "field1");

                    if (gubun === 'D') {
                        var idx = ['A01', 'A02', 'A03', 'A04', 'A05'].indexOf(value);

                        retValue = ['감자', '고구마', '오이', '토마토', '당근'][idx];
                    }

                    return retValue;
                }
            );   
        });         
        console.log("==> RealGrid loaded.");

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

        setFields(dataProvider);
        setColumns(gridView);
            
        loadData(dataProvider);        
    };
    
    function setFields(provider) {
        var fields = [{
            "fieldName": "field1"
        }, {
            "fieldName": "field2"
        }]      
        provider.setFields(fields);
    };
    
    function setColumns(grid) {
        var columns = [{
            "fieldName": "field1",
            "name": "field1",
            "width": 90,
            "header": { "text": "구분" },
            "styles": { "textAlignment": "near", "font": "Tahoma" }
        }, {
            "fieldName": "field2",
            "name": "field2",
            "width": 150,
            "header": { "text": "text/dropdown" },
            "styles": { "textAlignment": "near", "font": "Tahoma" }
        }];

        grid.setColumns(columns);
    }       
                
    function loadData(provider) {
        var datas = [
            ["T", "텍스트텍스트1"],
            ["T", "텍스트텍스트2"],
            ["D", "A01"],
            ["T", "텍스트텍스트3"],
            ["D", "A02"],
            ["D", "A03"],
            ["T", "텍스트텍스트4"],
            ["D", "A01"],
            ["T", "텍스트텍스트5"]
        ];

        dataProvider.setRows(datas);
    }

   
</script>

HTML

1. 화면의 구분값이 D인 행을 보면 value(코드)값이 표시되고 있고 편집해보려 해도 아직까지는 text에디터가 표시되고 있습니다. dynamicStyles를 설정하여 에디터를 변경해보도록 하겠습니다.        

2. <button type="button" class="btn btn-primary btn-xs" id="btnDynamicStyles">dynamicStyles 적용</button> 버튼을 클릭하면 두번째 컬럼에 dynamicStyles가 적용됩니다.       

3. 두번째 컬럼을 클릭해보면서 구분값에 맞는 에디터가 뜨는지 확인 합니다. 

4. 에디터는 구분값에 맞게 잘 표시되지만 조회된 화면에는 여전히 value값으로 보이고 있습니다.

4. <button type="button" class="btn btn-primary btn-xs" id="btnDisplayCallback">displayCallback 적용</button> 버튼을 클릭하면 두번째 컬럼에 displayCallback이 적용됩니다.   

5. 조회된 화면이 더 이상 value값이 아닌 label값으로 보입니다.       

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

참조

• 동적 스타일