select2 적용
This commit is contained in:
@@ -44,6 +44,8 @@ String connector = person.getUserId();
|
||||
.inspection-ok { color: #28a745; font-weight: bold; }
|
||||
/* 공통에서 추가되는 초기화, Excel Download 버튼 숨기기 */
|
||||
.resetBtn, .excelBtn { display: none !important; }
|
||||
/* select2 드롭다운이 Tabulator 그리드 위에 표시되도록 */
|
||||
.select2-container--open .select2-dropdown { z-index: 99999 !important; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
@@ -165,6 +167,62 @@ function fn_getPartListByProject(projectNo) {
|
||||
return partList;
|
||||
}
|
||||
|
||||
// select2 기반 Tabulator 커스텀 에디터 (프로젝트/품번용)
|
||||
function fn_select2Editor(cell, onRendered, success, cancel, editorParams) {
|
||||
var cellValue = cell.getValue() || "";
|
||||
var values = (typeof editorParams.values === "function") ? editorParams.values(cell) : editorParams.values;
|
||||
var valueId = editorParams.valueId || "CODE";
|
||||
var labelId = editorParams.labelId || "NAME";
|
||||
var placeholder = editorParams.placeholder || "검색...";
|
||||
|
||||
var container = document.createElement("div");
|
||||
container.style.width = "100%";
|
||||
container.style.position = "relative";
|
||||
|
||||
var select = document.createElement("select");
|
||||
select.style.width = "100%";
|
||||
|
||||
// 옵션 생성
|
||||
if(values && values.length > 0) {
|
||||
values.forEach(function(item) {
|
||||
var option = document.createElement("option");
|
||||
option.value = item[valueId];
|
||||
option.text = item[labelId];
|
||||
if(item[valueId] == cellValue) option.selected = true;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
container.appendChild(select);
|
||||
|
||||
onRendered(function() {
|
||||
$(select).select2({
|
||||
dropdownParent: $("body"),
|
||||
placeholder: placeholder,
|
||||
allowClear: true,
|
||||
width: "100%"
|
||||
});
|
||||
$(select).select2("open");
|
||||
|
||||
$(select).on("select2:select select2:clear", function(e) {
|
||||
var selectedVal = $(select).val() || "";
|
||||
|
||||
// 콜백 호출 (프로젝트 변경 시 연동 처리 등)
|
||||
if(typeof editorParams.onSelect === "function") {
|
||||
editorParams.onSelect(cell, selectedVal);
|
||||
}
|
||||
|
||||
success(selectedVal);
|
||||
});
|
||||
|
||||
$(select).on("select2:close", function() {
|
||||
setTimeout(function() { success($(select).val() || ""); }, 100);
|
||||
});
|
||||
});
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
// 그리드 초기화 및 조회
|
||||
function fn_search(){
|
||||
// 파일 팝업이 열려있는 동안에는 새로고침 방지
|
||||
@@ -190,59 +248,24 @@ function fn_search(){
|
||||
editorParams: {valueId:"CODE", labelId:"NAME", values:_PROCESS_LIST}
|
||||
},
|
||||
{title:'프로젝트번호', field:'PROJECT_OBJID', headerHozAlign:'center', hozAlign:'center', width:130,
|
||||
editor: function(cell, onRendered, success, cancel, editorParams) {
|
||||
var cellValue = cell.getValue();
|
||||
var select = document.createElement("select");
|
||||
select.style.width = "100%";
|
||||
select.style.boxSizing = "border-box";
|
||||
|
||||
// 옵션 생성
|
||||
_PROJECT_LIST.forEach(function(item) {
|
||||
var option = document.createElement("option");
|
||||
option.value = item.CODE;
|
||||
option.text = item.NAME;
|
||||
if(item.CODE == cellValue) option.selected = true;
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
// 선택 변경 시 즉시 적용 및 제품구분 업데이트
|
||||
select.addEventListener("change", function() {
|
||||
var selectedValue = select.value;
|
||||
editor: fn_select2Editor,
|
||||
editorParams: {
|
||||
valueId: "CODE", labelId: "NAME", values: _PROJECT_LIST,
|
||||
placeholder: "프로젝트 검색...",
|
||||
onSelect: function(cell, selectedValue) {
|
||||
var productName = "";
|
||||
|
||||
// 제품구분 찾기
|
||||
for(var i = 0; i < _PROJECT_LIST.length; i++) {
|
||||
if(_PROJECT_LIST[i].CODE == selectedValue) {
|
||||
productName = _PROJECT_LIST[i].PRODUCT_NAME || "";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 파트 목록 미리 로드
|
||||
if(selectedValue) {
|
||||
fn_getPartListByProject(selectedValue);
|
||||
}
|
||||
|
||||
// 제품구분 및 파트 초기화
|
||||
if(selectedValue) fn_getPartListByProject(selectedValue);
|
||||
cell.getRow().update({
|
||||
"PART_OBJID": "",
|
||||
"PART_NO": "",
|
||||
"PART_NAME": "",
|
||||
"PART_OBJID": "", "PART_NO": "", "PART_NAME": "",
|
||||
"PRODUCT_NAME": productName
|
||||
});
|
||||
|
||||
success(selectedValue);
|
||||
});
|
||||
|
||||
select.addEventListener("blur", function() {
|
||||
success(select.value);
|
||||
});
|
||||
|
||||
onRendered(function() {
|
||||
select.focus();
|
||||
});
|
||||
|
||||
return select;
|
||||
}
|
||||
},
|
||||
formatter: function(cell) {
|
||||
return fnc_customSelectFormatter(cell, {valueId:"CODE", labelId:"NAME", values:_PROJECT_LIST});
|
||||
@@ -252,16 +275,19 @@ function fn_search(){
|
||||
editor: false
|
||||
},
|
||||
{title:'품번', field:'PART_OBJID', headerHozAlign:'center', hozAlign:'left', width:250,
|
||||
editor: fnc_customSelectEditor,
|
||||
editor: fn_select2Editor,
|
||||
editorParams: function(cell) {
|
||||
var projectObjid = cell.getData().PROJECT_OBJID;
|
||||
var partList = fn_getPartListByProject(projectObjid);
|
||||
return {
|
||||
valueId: "CODE", labelId: "NAME", values: partList,
|
||||
placeholder: "품번 검색..."
|
||||
};
|
||||
},
|
||||
formatter: function(cell) {
|
||||
var projectObjid = cell.getData().PROJECT_OBJID;
|
||||
var partList = fn_getPartListByProject(projectObjid);
|
||||
return fnc_customSelectFormatter(cell, {valueId:"CODE", labelId:"NAME", values: partList});
|
||||
},
|
||||
editorParams: function(cell) {
|
||||
var projectObjid = cell.getData().PROJECT_OBJID;
|
||||
var partList = fn_getPartListByProject(projectObjid);
|
||||
return {valueId:"CODE", labelId:"NAME", values: partList};
|
||||
}
|
||||
},
|
||||
{title:'품명', field:'PART_NAME', headerHozAlign:'center', hozAlign:'left', width:180,
|
||||
|
||||
Reference in New Issue
Block a user