리스트 동적 편집기
lookupTree구조가 아닌 하나의 컬럼에서 dropdown목록을 동적으로 출력할 수 있습니다.
listCallback 적용
editor.listCallback 함수에 value와 label에 해당하는 값을 직접 채워서 동적으로 사용하거나 DB에서 가져온 값으로 반환 하면 원하는 목록의 값을 동적으로 리스트 출력이 가능합니다.
templateCallback에서는 listCallback에서 가져온 정보로 직접 화면에 출력할 이미지나 값을 가공해서 출력할 수 있습니다.
listCallback은 lookupDisplay가 적용되지 않기에 선택된 value값이 기본적으로 출력됩니다. 동적 리스트와 lookup이 필요하다면 lookupTree기능을 사용 해야합니다.
var columns = [{
name: "Country",
fieldName: "Country",
width: "150",
editButtonVisibility: "always",
editor:{
type: "list",
listCallback: function(grid, index) {
return {
value: "value", // column.listData와 동일한 형태. value, label 속성은 생략가능.
label: "label", //
list: [ {value: "Korea", label: "한국", flag: "KR", country: "Korea", currency: "KRW"},
{value: "USA", label: "미국", flag: "US", country: "USA", currency: "USD"},
{value: "Brazil", label: "브라질", flag: "BR", country: "Brazil", currency: "BRL"},
{value: "Argentina", label: "아르헨티나", flag: "AR", country: "Argentina", currency: "ARS"},
{value: "China", label: "중국", flag: "CN", country: "China", currency: "CNY"},
{value: "Japan", label: "일본", flag: "JP", country: "Japan", currency: "JPY"}
]
}
},
templateCallback: function(grid, index, div, value, label, item) {
div.innerHTML = `<span style='width:100px'>value: ${value}</span>
<span style='width:100px'>, label: ${label}</span>`
}
},
header: {
text: "나라",
}
}
...
]
//값 변경 이벤트
gridView.onGetEditValue = (grid,index,result)=>{
if (index.column === "Country" && result["item"]) {
grid.setValue(index.itemIndex, "Currency", result["item"].currency);
grid.setValue(index.itemIndex, "CountryCode", result["item"].flag);
}
}labelField적용
value값이 아닌 label에 해당하는 값으로 그리드에출력되도록 적용하기 위해서는 labelField기능을 적용하고 labelField에 값을 세팅해야합니다.
//컬럼 설정, 라벨필드 적용
var columns = [{
name: "Country",
fieldName: "Country",
width: "150",
lookupDisplay: true,
labelField: "labelField",
editButtonVisibility: "always",
editor:{
type: "list",
listCallback: function(grid, index) {
return {
value: "value", // column.listData와 동일한 형태. value, label 속성은 생략가능.
label: "label", //
list: [ {value: "Korea", label: "한국", flag: "KR", country: "Korea", currency: "KRW"},
{value: "USA", label: "미국", flag: "US", country: "USA", currency: "USD"},
{value: "Brazil", label: "브라질", flag: "BR", country: "Brazil", currency: "BRL"},
{value: "Argentina", label: "아르헨티나", flag: "AR", country: "Argentina", currency: "ARS"},
{value: "China", label: "중국", flag: "CN", country: "China", currency: "CNY"},
{value: "Japan", label: "일본", flag: "JP", country: "Japan", currency: "JPY"}
]
}
},
templateCallback: function(grid, index, div, value, label, item) {
div.innerHTML = `<span style='width:100px'>value: ${value}</span>
<span style='width:100px'>, label: ${label}</span>`
}
},
header: {
text: "나라",
}
},
...
]
//값 변경 시 라벨필드 값 적용
gridView.onGetEditValue = (grid,index,result)=>{
if (index.column === "Country" && result["item"]) {
grid.setValue(index.itemIndex, "Currency", result["item"].currency);
grid.setValue(index.itemIndex, "CountryCode", result["item"].flag);
grid.setValue(index.itemIndex, "labelField", result["item"].label);
}
}
//조회 시 라벨필드 값채우기
dataProvider.setRows([
{Country: "Korea", Currency: "KRW", CountryCode: "KR", labelField: "한국"},
{Country: "USA", Currency: "USD", CountryCode: "US", labelField: "미국"},
{Country: "Brazil", Currency: "BRL", CountryCode: "BR", labelField: "브라질"},
{Country: "Argentina", Currency: "ARS", CountryCode: "AR", labelField: "아르헨티나"},
{Country: "Korea", Currency: "KRW", CountryCode: "KR", labelField: "한국"},
{Country: "USA", Currency: "USD", CountryCode: "US", labelField: "미국"},
{Country: "Brazil", Currency: "BRL", CountryCode: "BR", labelField: "브라질"},
{Country: "Argentina", Currency: "ARS", CountryCode: "AR", labelField: "아르헨티나"}
])비동기처리를 통한 리스트 설정
listCallback을 사용하면 비동기 처리를 통해 원하는 데이터로 리스트를 구성할 수 있습니다.
주로 서버에서 데이터를 받아와 리스트를 동적으로 생성해야 할 때 활용할 수 있습니다.
var columns = [
{
name: "Menu",
fieldName: "Menu",
width: "150",
lookupDisplay: true,
labelField: "MenuLabelField", // 라벨 필드를 통해 value 값이 아닌 label 값이 화면에 보여질 수 있도록 연결
editButtonVisibility: "always",
editor: {
type: "list",
listCallback: async (grid, index) => {
const category = grid.getValue(index.itemIndex, 'Category');
const categoryIndex = getCategoryIndex(category);
return await getLists(categoryIndex, grid);
},
},
header: {
text: "메뉴",
},
},
...
];
function getCategoryIndex(category) {
const categories = ["한식", "중식", "일식", "양식", "디저트", "패스트푸드"];
return categories.indexOf(category) + 1;
}
async function getLists(categoryIndex, grid) {www
return new Promise((resolve, reject) => {
grid.showLoading(true);
const url = `list${categoryIndex}.json`
$.ajax({
url: url,
type: "GET",
dataType: "json",
success: function (data) {
setTimeout(() => {
grid.closeLoading();
resolve({
value: "value",
label: "label",
list: data,
});
}, 500);
},
error: function (xhr, status, error) {
grid.closeLoading();
reject(error);
},
});
});
}