728x90
datagrid 내의 컬럼에 툴팁을 사용하고 싶을 경우 formatter를 이용해 정의하는 것을 생각해볼 수 있다. 그런데, formatter 내에서 tooltip 생성 코드를 바로 사용해도 생성이 되지 않는다. 아마도 datagrid 내의 formatter 내에서 구성한 엘리먼트가 formatter 코드가 모두 실행된 후에야 생성되기 때문일 것이다.( formatter 코드가 실행 완료되기 전에는 아직 존재하지 않는 엘리먼트여서 툴팁을 붙일 엘리먼트가 존재하지 않기 때문일 것으로 생각된다.)
때문에 formatter 내에서는 툴팁을 띄울 이벤트에 대신 툴팁을 생성하는 함수를 연결해 놓는다. 이벤트가 발생할 때는 이미 요소가 있으므로 툴팁 생성이 가능하다.
- 툴팁에 노출할 데이터는 글로벌 변수에 저장한다.(datagrid를 그리면서 툴팁 생성까지 되지 않기 때문에 분리해서 실행이 되도록 데이터를 별도영역에 저장해 놓는다.)
- formatter를 이용해 툴팁이 필요한 컬럼의 엘리먼트에 고유한 아이디를 생성하고, 툴팁 생성 이벤트를 설정한다.
- 툴팁이 필요한 곳에 마우스이벤트가 발생하면, 툴팁을 생성한다.(현재로서는 엘리먼트에 EasyUI의 tooltip이 생성되었는지 따로 판단할 방법이 없다. 때문에 오류가 발생하면 생성되지 않은 것으로 판단하고 생성하도록 한다.)
<html>
<table id="dg" title="Example" style="width:600px" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th data-options="field:'tupleId',width:100,align:'right'">Tuple ID</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'files',width:200,formatter:uiService.fileFormatter">Files</th>
</tr>
</thead><JavaScript>
/**
* 데이터.
*/
var gData = {};
gData.files = [];
/**
* UI서비스.
*/
var uiService = {};
/**
* 파일 정보 엘리먼트에 고유한 아이디를 생성하고, 툴팁 생성 이벤트를 설정한다.
*/
uiService.fileFormatter = function(value, row) {
let result = null;
gData.files[row.tupleId] = row.files;
if (row.files) {
const len = row.files.length;
if(len > 0){
const $tempElem = $('<div id="temp'+ row.tupleId + '"></div>');
const fileListDiv = '<a href="javascript:void(0)" id="tipFile' + row.tupleId
+ '"onmouseover="uiService.buildFilesTooltip(\''+ row.tupleId + '\')"><font color="blue"><u>첨부파일 : ' + len + ' 건</u></font></a>';
$tempElem.html(fileListDiv);
result = $tempElem.html();
}
} else {
result = '';
}
return result;
};
/**
* 툴팁을 생성한다.
*/
uiService.buildFilesTooltip = function(tupleId) {
try {
const opts = $('#tipFile'+tupleId).tooltip('options');
// EasyUI에 tooltip이 생성되어 있는지 여부를 판단할 방법이 지원되지 않기에, try~catch를 이용한다.
} catch (e) {
// tooltip이 없으면 오류가 발생하므로 생성한다.
const files = gData.files[tupleId];
var fileIds = [];
var html = "";
$.each(files, function(index, value) {
html += '<div style="margin:5 5 10 5px;">';
html += '<a href="javascript:void(0)" style="color:#c60;" onClick="fileService.downloadFile(\''
+ value.fileId
+ '\')"><u><b>'
+ value['fileName'] + '</b></u></a>';
html += '</div>';
fileIds.push(value.fileId);
if (index > 0 && (files.length - 1) == index) {
html += '<div style="margin:5px;">'
+ '<a href="javascript:void(0)" style="color:#c60;" '
+ 'onClick="fileService.downloadAllFile([' + fileIds + '])"><u><b>일괄 다운로드</b></u></a></div>';
}
});
const $tipFile = $('#tipFile'+ tupleId);
$tipFile.tooltip({
position : 'right',
content : '<span style="color:#fff;">' + html + '</span>',
onShow : function() {
var t = $(this);
t.tooltip('tip').unbind().bind('mouseenter', function() {
t.tooltip('show');
}).bind('mouseleave', function() {
t.tooltip('hide');
}).css({
backgroundColor : '#d9d9d9',
borderColor : '#d9d9d9',
opacity : 1
});
}
});
$tipFile.tooltip('show');
}
}
/**
* 파일서비스.
*/
var fileService = {};
fileService.downloadFile = function(fileId) {
// 예시이므로 실제로 파일을 다운로드하지는 않음.
alert("fileId:" + fileId);
};
fileService.downloadAllFile = function(fileIds) {
// 예시이므로 실제로 파일을 다운로드하지는 않음.
alert("fileIds:" + fileIds);
};
/**
* 초기화.
*/
$(document).ready(function() {
const list = [
{"tupleId":"2", "name": "홍길동", "files":[{"fileId":1, "fileName": "증명사진1"}]},
{"tupleId":"4", "name": "홍길일", "files":[{"fileId":2, "fileName": "증명사진2"},{"fileId":3, "fileName": "여권사진"}]},
{"tupleId":"8", "name": "홍길삼"},
{"tupleId":"16", "name": "홍길사"}
];
$('#dg').datagrid().datagrid('loadData', list);
});반응형
'컴 이것저것 > Java Script' 카테고리의 다른 글
| JavaScript에 StringUtils를 만들어보자 (0) | 2023.01.12 |
|---|---|
| EasyUI - tabs/tab 현재 선택된 인덱스|id 확인하기 (0) | 2022.11.14 |
| jQuery Ajax -프로그레스바 토글 (0) | 2022.11.11 |
| EasyUI -options : Properties 조회 (0) | 2022.11.10 |
| 정규표현식 시각화 테스트 regex101.com (0) | 2022.07.18 |