简体   繁体   English

JQX网格中的工具提示

[英]tooltip in JQX grid

I have a jqx grid, i have already enabled the tooltips for all the columns in the grid. 我有一个jqx网格,我已经为网格中的所有列启用了工具提示。 one of the column in the grid will have images . 网格中的一列将具有图像。 how can i show text value in the tooltips 如何在工具提示中显示文本值

Please find the sample code 请找到示例代码

columns: [
                {
                    text: '',
                    dataField: 'valid',
                    width: '4%',
                    hidden: false,
                    editable: false,
                    enabletooltips:true,
                    filterable: false,
                    cellsrenderer: statusCellRenderer,
                    rendered: tooltipRenderer
                },

functions of the column : 列的功能:

   var statusCellRenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowData) {
    console.log("row---------------->",this.uielement);
    //console.log("value---------->",value);
    //value =   false;
    //console.log("element------------>",element);
    if (rowData.errorMessage != ''){
        this.uielement.jqxTooltip({disabled:false,position: 'mouse', content: 'testing' });
        return '<div class="errorIcon">&#x26a0;</div>';
    }
    else
        return '';
}

var tooltipRenderer =   function(element) {
    $(element).jqxTooltip({disabled:false,position: 'mouse', content: 'testing' });
    element.textContent =   'Test';
    console.log("element------>",element);
}
  $('#grid').jqxGrid({
    cellhover: function (element, pageX, pageY, record) {
              var cellValue = $(element.innerHTML).find('span').html(); // you can remove if any element not required in tooltip here
              var tooltipContent = "<div>" + cellValue + "</div>";
              if (cellValue && cellValue.trim().length > 0) {
                $(element).jqxTooltip({ content: tooltipContent });
                $(element).jqxTooltip('open', pageX + 15, pageY + 15);
              } else {
                $('#grid').jqxTooltip('close');
              }           
          }
});

As you said this snippet will show tooltip for your entire grid cell. 正如您所说,此代码段将显示整个网格单元的工具提示。 I hope this will help you. 我希望这能帮到您。 If you have any queries let me know. 如果您有任何疑问,请告诉我。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM