1
html 페이지에서 w2ui 격자를 사용하고 있습니다. 이미지 경로가있는 툴팁 + 셀 마우스의 데이터가 표시됩니다. 이미지 경로를 제거하고이를 사용자 정의하고 싶습니다. 아래 코드를 참조하십시오. 아래마우스를 가져 가면 w2ui 표 도구 설명을 사용자 정의하는 방법
페이지 번호 : ---
<div id="grid" style="width: 100%; height: 114px; margin-top: 5px;">
</div>
function bind(value) {
var columns;
records = {
values: []
};
var arrcolumns;
var arrrecords;
var count = 0;
var finalarray = [];
var bindImgUrl;
var bindImgTitle;
if (value == 'BP') {
arrrecords = new Array(
["1", "01/02/2014", callImage(bindImgUrl, bindImgTitle) + "Siting", "141/78"],
["2", "01/03/2014", callImage(bindImgUrl, bindImgTitle) + "Lying", "142/78"],
["3", "01/04/2014", callImage(bindImgUrl, bindImgTitle) + "Siting", "143/78"],
["4", "01/05/2014", callImage(bindImgUrl, bindImgTitle) + "Siting", "144/78"]
)
coulmns = [
{ field: 'Date1', caption: 'Date/Time', size: '30%' },
{ field: 'Measured', caption: 'Measured', size: '30%' },
{ field: 'sys', caption: 'Systolic/Diastolic', size: '30%' }
]
for (var i = 0; i < arrrecords.length - 1; i++) {
switch (arrrecords[i][2].split(">")[1]) {
case "Siting":
bindImgUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAABZklEQVR42u3Tv0sCcRjH8acfJmgQSBhESyBRiwQNRdjQFEKLkzQFBQ01BUU5CIFC0BbU0B/QGAVNDf0aIlqqpaAlApe0ot9qVF7vo0e4wVOvuQdew3Hf53P3ved7IqWrHgFMYhs7WMYQvFKh6hDSpjwMiwym0VguoA2b+NSmNG6Q0+sUoqi1C4jgRRefow9BJPGEL6zDbxeQ1Oa8hhXLhwO9d4Juu4CELsrqqxarBYfVBES12dAn9qITMdzhGxtotQtox64GmPu9xhUeUcA9xnVaJasG/RryZhmhGXaLebgqnQVzRF1YsgQcYwTu8q1Jo0EShUHEJTSzYglYrOYUMoNCAKeSMLIym8qJu8lhQCwTlPjrMwGGLHy8i6fZYYAvMCoDc2mZOruUsb1V51sQ2RKX50g6wmHx+nucBAzr6Mx5P+h/cFFtwAD2LX9cKWUDJiwL12xEyp0Ba8Cf6j/gd4zFr+2ofgC6ioxXTw/G3QAAAABJRU5ErkJggg==';
bindImgTitle = 'Siting';
//arrrecords[i][2] = arrrecords[i][2].split("<")[0] + " " + callImage(bindImgUrl, bindImgTitle);
arrrecords[i][2] = callImage(bindImgUrl, bindImgTitle) + " " + arrrecords[i][2].split(">")[1];
//callImage(bindImgUrl);
break;
case "Standing":
bindImgUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAYAAADOMhxqAAABVUlEQVR42u3STSgEYRzH8T+WteQgiotwsZclxMXLis3NSUp5CeWsnGSzWTvl4OJMKZzWRW2JuwMp2YODZMvFXiwHbMIy4zvbs+00apzcPPWpeZ7n/3veGpF8c8OHCA5xhFW0oVRsrQTDOIdhc4kxa6gAnTjFFzJI4k5967hAj6oVDxbwqlbcQwfasaXG3hBGuRmoxq6aMEMNlqPW4lHN7at+NrCjBtPwWgL1eLAHyhDCu5rYQCtasG651xoqcpfuVa+RO1YCN2pHc+wagyjMbW1+jCCOD8uTZtRCE3DlT7psuGTuqkbqugL0YpbAAbpRnC/WdA9GRTOiWd6hTUtgSn60iN5I4IxiHYaMx56dA4spn4TS99li0+zxk3Ogqmla+sMpmU8kZeXzRALatnNA5FY8lXHpC07K0kuzFLlnfgsEMaD+WFFFjgF7+w/8ScCPqOK3T34DjKiOj8OQProAAAAASUVORK5CYII=';
bindImgTitle = 'Standing';
//arrrecords[i][2] = arrrecords[i][2].split("<")[0] + " " + callImage(bindImgUrl, bindImgTitle);
arrrecords[i][2] = callImage(bindImgUrl, bindImgTitle) + " " + arrrecords[i][2].split(">")[1];
break;
case "Lying":
bindImgUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAYAAAB4MH11AAABWUlEQVR42q3UQShDcRwH8J9lzJDaiBtFYWmxzIFxc3IyDpIiZ5ddRpnYVg4uym1JsYO4qF0oXJxcxMFJdhwpHEjC2vv5/vVT/5Z6rz3/+tR77/f6/f7v9///H5H9UQZuqBdV8uxfhgMGYQl2IA3zEIQKu8nLYRyu4RNYvMM5hKHSToFeuNISv0lydV2AC+hSLw7BdAky8CVJU9AOLbAPeSmUUAX2tFmUIgvdRV92J7FDawVcdUydo0z9EaYGX3H8FvxagQDkJHZk3iKne5ZGNnYpel+g2CvTzIlBntYzxI6lFar369AMTbCltWjVfCkT7KEkbwL/iOcfKJJVu2dAdtDvoj7Bs9wbEusxL+Cf8NJYepsWHlmKnKJoGyJOmIIbbcbKB1zCJLisbMcw1TTmKBTNUOxljpJGHy2zQzsLw7AGB2IFQlaTq+GDReiQk/vXaa6V/ivV+q/iG0jgigi8cNb7AAAAAElFTkSuQmCC';
bindImgTitle = 'Lying';
//arrrecords[i][2] = arrrecords[i][2].split("<")[0] + " " + callImage(bindImgUrl, bindImgTitle);
arrrecords[i][2] = callImage(bindImgUrl, bindImgTitle) + " " + arrrecords[i][2].split(">")[1];
break;
default: break;
}
//records.values.push({ recid: arrrecords[i][0], Date1: arrrecords[i][1], Measured: arrrecords[i][2], Image: arrrecords[i][4], sys: arrrecords[i][3] });
records.values.push({ recid: arrrecords[i][0], Date1: arrrecords[i][1], Measured: arrrecords[i][2], sys: arrrecords[i][3] });
}
bindtable(coulmns, records.values);
}
else {
arrrecords = new Array(
["1", "01/02/2014", callImage(bindImgUrl, bindImgTitle) + "Siting", "165cm"],
["2", "01/03/2014", callImage(bindImgUrl, bindImgTitle) + "Lying", "185cm"],
["3", "01/04/2014", callImage(bindImgUrl, bindImgTitle) + "Siting", "150cm"],
["4", "01/05/2014", callImage(bindImgUrl, bindImgTitle) + "Siting", "144cm"]
)
coulmns = [
{ field: 'Date1', caption: 'Date/Time', size: '30%' },
{ field: 'Measured', caption: 'Measured', size: '30%' },
{ field: 'Height', caption: 'Height', size: '30%' }
]
for (var i = 0; i < arrrecords.length - 1; i++) {
switch (arrrecords[i][2].split(">")[1]) {
case "Siting":
bindImgUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAABZklEQVR42u3Tv0sCcRjH8acfJmgQSBhESyBRiwQNRdjQFEKLkzQFBQ01BUU5CIFC0BbU0B/QGAVNDf0aIlqqpaAlApe0ot9qVF7vo0e4wVOvuQdew3Hf53P3ved7IqWrHgFMYhs7WMYQvFKh6hDSpjwMiwym0VguoA2b+NSmNG6Q0+sUoqi1C4jgRRefow9BJPGEL6zDbxeQ1Oa8hhXLhwO9d4Juu4CELsrqqxarBYfVBES12dAn9qITMdzhGxtotQtox64GmPu9xhUeUcA9xnVaJasG/RryZhmhGXaLebgqnQVzRF1YsgQcYwTu8q1Jo0EShUHEJTSzYglYrOYUMoNCAKeSMLIym8qJu8lhQCwTlPjrMwGGLHy8i6fZYYAvMCoDc2mZOruUsb1V51sQ2RKX50g6wmHx+nucBAzr6Mx5P+h/cFFtwAD2LX9cKWUDJiwL12xEyp0Ba8Cf6j/gd4zFr+2ofgC6ioxXTw/G3QAAAABJRU5ErkJggg==';
bindImgTitle = 'Siting';
//bindImgUrl = 'blueButton.png';
arrrecords[i][2] = callImage(bindImgUrl, bindImgTitle) + " " + arrrecords[i][2].split(">")[1];
//callImage(bindImgUrl);
break;
case "Standing":
bindImgUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAYAAADOMhxqAAABVUlEQVR42u3STSgEYRzH8T+WteQgiotwsZclxMXLis3NSUp5CeWsnGSzWTvl4OJMKZzWRW2JuwMp2YODZMvFXiwHbMIy4zvbs+00apzcPPWpeZ7n/3veGpF8c8OHCA5xhFW0oVRsrQTDOIdhc4kxa6gAnTjFFzJI4k5967hAj6oVDxbwqlbcQwfasaXG3hBGuRmoxq6aMEMNlqPW4lHN7at+NrCjBtPwWgL1eLAHyhDCu5rYQCtasG651xoqcpfuVa+RO1YCN2pHc+wagyjMbW1+jCCOD8uTZtRCE3DlT7psuGTuqkbqugL0YpbAAbpRnC/WdA9GRTOiWd6hTUtgSn60iN5I4IxiHYaMx56dA4spn4TS99li0+zxk3Ogqmla+sMpmU8kZeXzRALatnNA5FY8lXHpC07K0kuzFLlnfgsEMaD+WFFFjgF7+w/8ScCPqOK3T34DjKiOj8OQProAAAAASUVORK5CYII=';
bindImgTitle = 'Standing';
//bindImgUrl = 'blueButton.png';
//arrrecords[i][2] = arrrecords[i][2].split("<")[0] + " " + callImage(bindImgUrl, bindImgTitle);
arrrecords[i][2] = callImage(bindImgUrl, bindImgTitle) + " " + arrrecords[i][2].split(">")[1];
break;
case "Lying":
bindImgUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAYAAAB4MH11AAABWUlEQVR42q3UQShDcRwH8J9lzJDaiBtFYWmxzIFxc3IyDpIiZ5ddRpnYVg4uym1JsYO4qF0oXJxcxMFJdhwpHEjC2vv5/vVT/5Z6rz3/+tR77/f6/f7v9///H5H9UQZuqBdV8uxfhgMGYQl2IA3zEIQKu8nLYRyu4RNYvMM5hKHSToFeuNISv0lydV2AC+hSLw7BdAky8CVJU9AOLbAPeSmUUAX2tFmUIgvdRV92J7FDawVcdUydo0z9EaYGX3H8FvxagQDkJHZk3iKne5ZGNnYpel+g2CvTzIlBntYzxI6lFar369AMTbCltWjVfCkT7KEkbwL/iOcfKJJVu2dAdtDvoj7Bs9wbEusxL+Cf8NJYepsWHlmKnKJoGyJOmIIbbcbKB1zCJLisbMcw1TTmKBTNUOxljpJGHy2zQzsLw7AGB2IFQlaTq+GDReiQk/vXaa6V/ivV+q/iG0jgigi8cNb7AAAAAElFTkSuQmCC';
bindImgTitle = 'Lying';
//bindImgUrl = 'blueButton.png';
arrrecords[i][2] = callImage(bindImgUrl, bindImgTitle) + " " + arrrecords[i][2].split(">")[1];
break;
default: break;
}
//records.values.push({ recid: arrrecords[i][0], Date1: arrrecords[i][1], Measured: arrrecords[i][2], Image: arrrecords[i][4], sys: arrrecords[i][3] });
records.values.push({ recid: arrrecords[i][0], Date1: arrrecords[i][1], Measured: arrrecords[i][2], Height: arrrecords[i][3] });
}
// for (var i = 0; i < arrrecords.length-1; i++) {
// records.values.push({ recid: arrrecords[i][0], Date1: arrrecords[i][1], Measured: arrrecords[i][2], Height: arrrecords[i][3] });
// }
bindtable(coulmns, records.values);
}
}
function bindtable(columns, record) {
// debugger;
if (w2ui['grid'] != undefined || w2ui['grid'] != null) {
w2ui['grid'].destroy();
}
$(function() {
$('#grid').w2grid({
name: 'grid',
//url: 'data/list.json',
//url:'JSON/Array.js',
columns: coulmns,
//total: 4,
records: record,
onShow: null,
onClick: function (event) {
document.location.href = "https://www.google.com", "_blank";
}
});
});
}
function callImage(url, title) {
//var doc = ("<img src="+url+">");
var doc = ("<img src='" + url + "' title='" + title + "' height='18px' width='18px'>");
return doc;
}
감사합니다.
$().w2grid({
name: 'grid',
show: {
recordTitles: false
}
...
}
여기에서 자세한 내용을 참조하십시오
I. 설정 grid.show.recordTitles = 거짓 :