AX5GRID 인라인 에디터 관련 문의입니다 .

ax5ui

(장재영) #1

editor : textarea에 formatter을 적용시키고 싶습니다.

{ label: ‘라벨’, key: ‘키’, align: ‘left’, width: 200 , editor: {type: “textarea” }
, formatter : function(){ return this.item.value1!=‘checkValue’?‘값1’ :‘값2’ }
}

현재 위의 코드처럼 formatter로 특정 데이터에 값에 따라 출력값을 다르게 주고 있는 상황인데

화면에서 editor 실행시 다르게 된 출력값이 보이는게 아니라 원래 key에 해당하는 값이 나와버리는지라…

혹시 editor의 textarea에서 formatter을 적용시킬 수 있을까요…?


(Thomas) #2

editor를 함수로 선언할 수가 있습니다.
예제가… 어디 있더라…


여기 코드를 보시면 에디터를 선언해주고 있습니다.
이런형태의 에디터 함수를 column,editor의 값으로 사용할 수 있습니다.
그럼 그리드에서 editor가 미리 타입으로 정의된 것인지. 사용자가 정의한 것인지 판단하여 처리합니다. (하지만 결국엔 같은 인터페이스의 editor를 사용하게 되겠죠.

원하시는 기능을 구현하시려면

{ key: "key", editor: {
        useReturnToSave: true,
        editMode: "popup",
        getHtml: function (_root, _columnKey, _editor, _value) {
            if(typeof _editor.attributes !== "undefined"){
                var attributesText  = "";
                for (var k in _editor.attributes){
                    attributesText += ` ${k}='${_editor.attributes[k]}'`;
                }
            }
            return `<input type="text" data-ax5grid-editor="text" value="${_value}" ${attributesText}>`;
        },
        init: function (_root, _columnKey, _editor, _$parent, _value) {
            var $el;
            _$parent.append($el = jQuery(this.getHtml(_root, _columnKey, _editor, _value)));
            this.bindUI(_root, _columnKey, $el, _editor, _$parent, _value);
            $el.on("blur", function () {
                GRID.body.inlineEdit.deActive.call(_root, "RETURN", _columnKey);
            });
            return $el;
        },
        bindUI: function (_root, _columnKey, _$el, _editor, _$parent, _value) {
            _$el.focus().select();
        }
    }
}

init코드를 살펴보니 조금 아쉽게도 item을 인자로 주고 있지 않네요.
이부분은 _root안에 값을 찾아서 처리할 수도 있습니다.


(장재영) #3

오… 친절한 설명 감사합니다!

참고하여 해결해보겠습니당 ^^ 감사합니다