ax5ui grid의 inline editor에 autocomplete 적용 문의

hkymd · 3월 8, 2018, 6:51오전

안녕하세요.
ax5ui grid의 inline editor에 autocomplete 적용을 하려고 합니다.

코딩을 아래와 같이 2가지로 했습니다.

1번째
editor: {
type: ‘ax5autocomplete’,//또는 autocomplete
config: {
removeIcon: ‘’
, onSearch: function (callback) {
var searchWord = this.searchWord;
setTimeout(function () { // like AJAX
var regExp = new RegExp(searchWord);
var myOptions = [];
options.forEach(function (n) {
if (n.text.match(regExp)) myOptions.push({ value: n.value, text: n.text });
});
callback({
options: myOptions
});
}, 150);
}

2번째(select box 처럼)

                 editor: {
	        	       type: 'ax5autocomplete',//또는 autocomplete
	        	        config: {columnKeys: {optionValue: 'value', optionText: 'text'}, options: oblation_obj}
	        	   }

위와 같이 했는데 동작을 하지 않습니다.
어떻게 적용을 해야 할까요 많은 가르침 부탁드립니다.

감사합니다.

thomasJang · 3월 8, 2018, 7:36오전

미리 정의된 inline-editor는 아래에서 확인 할 수 있습니다.

github.com

ax5ui/ax5ui-kernel/blob/master/src/ax5ui-grid/src/modules/ax5grid-inline-editor.js#L282


        _$parent.append($el = jQuery(this._getHtml(_root, _columnKey, _editor, _value)));
        // 셀에 HTML 컨텐츠 추가


        this._bindUI(_root, _columnKey, $el, _editor, _$parent, _value);
        // 이벤트 바인딩


        return $el;
    },
};


GRID.inlineEditor = {
    "text": edit_text,
    "money": edit_money,
    "number": edit_number,
    "date": edit_date,
    "select": edit_select,
    "checkbox": edit_checkbox,
    "textarea": edit_textarea
};


})();

그 외의 inline-editor는 사용자가 확장해서 사용해야 합니다.
사용자가 확장을 하려면

브라우저 콘솔에서

ax5.ui.grid.inlineEditor

를 확인해보시고 그런 구조로 ax5.ui.grid.inlineEditor를 확장해주시면 됩니다.

hkymd · 3월 8, 2018, 12:48오후

아래와 같이 하니 해결이 됩니다.
많은 팁 감사합니다.

ax5.ui.grid.inlineEditor 에 autocomplete 생성

var GRID = ax5.ui.grid;
ax5.ui.grid.inlineEditor.autocomplete = {
useReturnToSave: false
, editMode: “popup”
, getHtml: function (_root, _columnKey, _editor, _value) {
var po = [];
po.push(’

’);
po.push(’’);
return po.join(’’);
}
, 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);
return $el;
}
, bindUI: function (_root, _columnKey, _$el, _editor, _$parent, _value) {
var eConfig = {
columnKeys: {
optionValue: “value”,
optionText: “text”,
optionSelected: “selected”
}
};
jQuery.extend(true, eConfig, _editor.config);
eConfig.options.forEach(function (n) {
if (n[eConfig.columnKeys.optionValue] == _value) n[eConfig.columnKeys.optionSelected] = true;
});
var self = _root;
_$el.data(“binded-ax5ui”, “ax5autocomplete”);
_$el.ax5autocomplete($.extend(true, {
tabIndex: 1
, direction: “auto”
, removeIcon: ‘’
, onSearch: function (callBack) {
var searchWord = this.searchWord;
setTimeout(function () {
var regExp = new RegExp(searchWord);
var myOptions = [];
eConfig.options.forEach(function (n) {
if (n.text.match(regExp)) {
myOptions.push({
value: n.value,
text: n.text
})
}
});
callBack({
options: myOptions
});
}, 150);
}
, onStateChanged: function () {
if (this.state == “open”) {
this.self.activeautocompleteOptionGroup.attr(“data-ax5grid-inline-edit-picker”, “autocomplete”);
} else if (this.state == “changeValue”) {
GRID.body.inlineEdit.deActive.call(self, “RETURN”, _columnKey, this.value[0][eConfig.columnKeys.optionValue]);
} else if (this.state == “close”) {
GRID.body.inlineEdit.deActive.call(self, “RETURN”, _columnKey);
}
}
}, _editor.config));
_$el.ax5autocomplete(“setValue”, _value);
_$el.find(“a”).focus();
}
};

그리드에 에디터 설정

//옵션 값 맵에 담기
var oblationMap2 = {};
oblation_obj.forEach(function (n) {
oblationMap[n.value] = n.text;
});

{ key: “auto_cd”, label: “라벨”, width: 200 , align:“left”, sortable: true
, formatter: function () {
// 그리드에 value 값 대신 text 값 보이기
return oblationMap2[this.value];
}
, editor: {
type: ‘autocomplete’,
config: {columnKeys: {optionValue: ‘value’, optionText: ‘text’}, options: oblation_obj}
}
}