如何在鼠标悬停时自定义 w2ui 网格工具提示
Posted
技术标签:
【中文标题】如何在鼠标悬停时自定义 w2ui 网格工具提示【英文标题】：how to customize w2ui grid tooltip in mouse hover 【发布时间】：2014-04-09 06:28:12 【问题描述】：我在 html 页面上使用 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;
谢谢。
【问题讨论】：
【参考方案1】：你有两个选择：
我。设置 grid.show.recordTitles = false
$().w2grid(
name: 'grid',
show:
recordTitles: false
...
在此处查看更多信息：http://w2ui.com/web/docs/w2grid.show
二。为列定义自定义标题，可以是文本或函数。如果为空，则将标题全部隐藏。
$().w2grid(
name: 'grid',
columns: [
field: 'some', caption: 'Caption', title: ''
]
...
http://w2ui.com/web/docs/w2grid.columns
【讨论】：
以上是关于如何在鼠标悬停时自定义 w2ui 网格工具提示的主要内容，如果未能解决你的问题，请参考以下文章