HTML 렌더러
HTML 셀 렌더러는 셀에 표시되는 데이터를 HTML형태로 표현할 수 있습니다. 표시하고 싶은 데이터를 inline HTML의 형태로 return 하면 됩니다.
제한사항: onEditCommit 이벤트에서 return false 반환 시 html렌더러 셀의 편집을 제어할 수는 없습니다.
통화컬럼을 멀티 체크로 구현한 예제
//컬럼설정
var columns = [
... 생략 ...
{
name: "Monetary",
fieldName: "Monetary",
width: "200",
values: ["EUR", "USD", "HKD", "KRW"],
labels: ["EUR", "USD", "HKD", "KRW"],
renderer:{
type:"html",
callback: function(grid, cell, w, h) {
var str = "";
var data = (cell.value && cell.value.split(",")) || [];
var labels = cell.dataColumn.labels;
var values = cell.dataColumn.values;
for (var i = 0; i < labels.length; i++) {
var checked = data.indexOf(values[i]) >= 0 ? "checked": "";
str = str + "<input type='checkbox' value = '"+values[i]+"'" + checked + " onclick='javascript:valuecheck("+cell.index.dataRow+", event)' />"+labels[i];
}
return str;
}
},
... 생략 ...
];
gridView.setColumns(columns);
//체크 이벤트 설정
function valuecheck(dataRow, event) {
var target = event.target;
var value = target.value;
if(dataProvider.getValue(dataRow, "Monetary")){
var dataValue = dataProvider.getValue(dataRow, "Monetary").split(",");
var idx = dataValue.indexOf(value);
if (target.checked) {
if (idx < 0) {
dataValue.push(value);
}
} else {
if (idx >= 0)
dataValue.splice(idx, 1);
}
dataProvider.setValue(dataRow, "Monetary", dataValue.join(","));
}else{
dataProvider.setValue(dataRow, "Monetary", value);
}
}
통화컬럼을 인라인 HTML을 사용하여 구현한 예제
var columns = [
... 생략 ...
{
{
name: "Monetary",
fieldName: "Monetary",
width: "200",
editable: false,
renderer:{
type:"html",
callback: function(grid, cell, w, h) {
var str = '<p>화폐 종류는 <span style={{color: 'royalblue'}} >cell.value</span> 입니다.</p>';
return str;
}
},
header: {
text: "통화"
}
},
... 생략 ...
];
gridView.setColumns(columns);
inputbox를 적용한 데이터 편집 예제
var columns = [
{
name: "KorName",
fieldName: "KorName",
header: {
text: "이름",
styleName: "orange-column",
},
width: "200",
editable: false,
renderer: {
type: "html",
inputFocusable: true,
callback: function (grid, cell, w, h) {
var cellValue = cell.value;
if (cell.value === undefined) {
cellValue = "";
}
var str = "";
str = "<input type='text' value='" + cellValue + "' onblur='valuecheck(" + cell.index.dataRow + ", event)' />";
return str;
},
},
},
];
gridView.setColumns(columns);
function valuecheck(dataRow, event) {
var target = event.target;
var value = target.value;
dataProvider.setValue(dataRow, "KorName", value);
}
- 엔터, 방향키로 포커스를 이동시킬 수 없습니다.
- 마우스로 직접 다른 셀을 클릭해서 사용 해주셔야 합니다.
한개의 셀에 여러개의 버튼을 넣는 예제
var columns = [
...
{
name: "Monetary",
fieldName: "Monetary",
width: "200",
renderer: {
type: "html",
callback: function (grid, cell, w, h) {
var str = `<button onclick="firstBtnClicked(${cell.index.itemIndex})">버튼1</button> <button onclick="secondBtnClicked(${cell.index.itemIndex})">버튼2</button>`;
return str;
},
},
header: {
text: "버튼",
},
},
...
];
gridView.setColumns(columns);
function firstBtnClicked(itemIndex) {
alert(itemIndex + 1 + "번째 행의 버튼1이 클릭되었습니다!");
// 행 정보를 가지고오고 싶을때는 아래와 같이 작성하여 가지고 올 수 있습니다.
// alert(gridView.getValues(itemIndex))
}
function secondBtnClicked(itemIndex) {
alert(itemIndex + 1 + "번째 행의 버튼2가 클릭되었습니다!");
// alert(gridView.getValues(itemIndex))
}
동적으로 버튼을 생성하는 예제
성별이 남자인 경우 버튼을 생성하는 예제 입니다.
var columns = [
...
{
name: "BtnField",
fieldName: "BtnField",
width: "200",
editable: false,
renderer: {
type: "html",
callback: function (grid, cell, w, h) {
var gender = grid.getValue(cell.index.itemIndex, "Gender");
var str = gender == '남' ? `<button onclick="BtnClicked(${cell.index.itemIndex})">남자버튼</button>`: ``;
return str;
},
},
header: {
text: "버튼",
styleName: "orange-column"
},
},
...
];
gridView.setColumns(columns);
function BtnClicked(itemIndex) {
alert(itemIndex + 1 + "번째 행의 남자버튼이 클릭되었습니다!");
// 행 정보를 가지고오고 싶을때는 아래와 같이 작성하여 가지고 올 수 있습니다.
// alert(gridView.getValues(itemIndex))
}