将工具提示添加到 dojo 中的数据网格标题答案

【问题标题】：adding tooltip to datagrid headers in dojo将工具提示添加到 dojo 中的数据网格标题
【发布时间】：2013-06-02 00:32:28
【问题描述】：

我有一个动态填充的 dojo 数据网格。我想向这个数据网格的表头添加工具提示。我该怎么做？我的数据网格只有表和表头的结构。这些字段是动态填充的。

谢谢，斯雷尼瓦斯

【问题讨论】：

【解决方案1】：

我也有类似的要求。我希望每个 DataGrid 列标题都使用为列指定的名称作为工具提示，因为我们的 DataGrid 并不总是显示完整的列名，因为列的宽度有时会被压缩。我添加了一个使用 AMD Dojo 版本完成的猴子补丁（如下）：

 require(
  [
"dojo/dom",
"dojox/grid/DataGrid",
"dijit/_Widget",
"dijit/form/FilteringSelect",
"dijit/form/MultiSelect",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojox/grid/_Grid",
"dijit/MenuItem",
"dijit/MenuSeparator",
"dojox/grid/_Builder",
"dojox/grid/cells/_base",
"dojox/grid/util",

"dojo/parser",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/ready",
"dojo/query",
"dijit/registry",

  ],
  function(dom, dojox_grid_DataGrid, dijit__Widget, dijit_form_FilteringSelect,
	  dijit_form_MultiSelect, dijit_layout_ContentPane, dijit_layout_TabContainer,
	  dojox_grid__Grid, MenuItem, MenuSeparator, dojox_grid__Builder,
	  dojox_grid_cells__Base, dojox_grid_util,
	  
	  parser, array, dojoLang, ready, dojoQuery, registry) {

var old_HeaderBuilder_generateHtml = dojox_grid__Builder._HeaderBuilder.prototype.generateHtml;	
dojox_grid__Builder._HeaderBuilder.prototype.generateHtml =  function(inGetValue, inValue){
	var html = this.getTableArray(), cells = this.view.structure.cells;
	
	dojox_grid_util.fire(this.view, "onBeforeRow", [-1, cells]);
	for(var j=0, row; (row=cells[j]); j++){
		if(row.hidden){
			continue;
		}
		html.push(!row.invisible ? '<tr>' : '<tr class="dojoxGridInvisible">');
		for(var i=0, cell, markup; (cell=row[i]); i++){
			cell.customClasses = [];
			cell.customStyles = [];
			if(this.view.simpleStructure){
				if(cell.headerClasses){
					if(cell.headerClasses.indexOf('dojoDndItem') == -1){
						cell.headerClasses += ' dojoDndItem';
					}
				}else{
					cell.headerClasses = 'dojoDndItem';
				}
				if(cell.attrs){
					if(cell.attrs.indexOf("dndType='gridColumn_") == -1){
						cell.attrs += " dndType='gridColumn_" + this.grid.id + "'";
					}
				}else{
					cell.attrs = "dndType='gridColumn_" + this.grid.id + "'";
				}
			}
			markup = this.generateCellMarkup(cell, cell.headerStyles, cell.headerClasses, true);
			// content
	  		markup[5] = (inValue != undefined ? inValue : inGetValue(cell));
			// set the tooltip for this header to the same name as the header itself
			markup[5] = markup[5].replace("class","title='"+cell.name+"' class");
			// styles
			markup[3] = cell.customStyles.join(';');
			// classes
			markup[1] = cell.customClasses.join(' '); //(cell.customClasses ? ' ' + cell.customClasses : '');
			html.push(markup.join(''));
		}
		html.push('</tr>');
	}
	html.push('</table>');
	return html.join('');
};
   }
   );

请注意，如果有可能将任何标记添加到 cell.name 中，那么您需要添加一个条件，该条件将以某种方式仅从中提取文本作为工具提示，或者以某种方式生成一个获胜的工具提示'不要抛出渲染错误，或者完全避免为该列设置工具提示。

【讨论】：

【解决方案2】：

对于 AMD Dojo 之前的版本，这是我们在全球范围的 javascript 资源中包含的猴子补丁。我的另一个答案是在我们切换到 AMD Dojo 版本之后。

// HeaderBuilder.generateHtml
//      If showTooltips is true, the header contents will be used as the tooltip text.
var old_HeaderBuilder_generateHtml = dojox.grid._HeaderBuilder.prototype.generateHtml;  
dojox.grid._HeaderBuilder.prototype.generateHtml =  function(inGetValue, inValue){
    var html = this.getTableArray(), cells = this.view.structure.cells;

    dojox.grid.util.fire(this.view, "onBeforeRow", [-1, cells]);
    for(var j=0, row; (row=cells[j]); j++){
        if(row.hidden){
            continue;
        }
        html.push(!row.invisible ? '<tr>' : '<tr class="dojoxGridInvisible">');
        for(var i=0, cell, markup; (cell=row[i]); i++){
            cell.customClasses = [];
            cell.customStyles = [];
            if(this.view.simpleStructure){
                if(cell.headerClasses){
                    if(cell.headerClasses.indexOf('dojoDndItem') == -1){
                        cell.headerClasses += ' dojoDndItem';
                    }
                }else{
                    cell.headerClasses = 'dojoDndItem';
                }
                if(cell.attrs){
                    if(cell.attrs.indexOf("dndType='gridColumn_") == -1){
                        cell.attrs += " dndType='gridColumn_" + this.grid.id + "'";
                    }
                }else{
                    cell.attrs = "dndType='gridColumn_" + this.grid.id + "'";
                }
            }
            markup = this.generateCellMarkup(cell, cell.headerStyles, cell.headerClasses, true);
            // content
            markup[5] = (inValue != undefined ? inValue : inGetValue(cell));

            // set the tooltip for this header to the same name as the header itself
            try {
                markup[5] = markup[5].replace("class","title='"+cell.name+"' class");
            } catch(e) {
                console.debug(e);
            }
            // styles
            markup[3] = cell.customStyles.join(';');
            // classes
            markup[1] = cell.customClasses.join(' '); //(cell.customClasses ? ' ' + cell.customClasses : '');
            html.push(markup.join(''));
        }
        html.push('</tr>');
    }
    html.push('</table>');
    return html.join('');
};

【讨论】：

【解决方案3】：

最简单的方法

最简单的方法（不覆盖模板）是在布局标题定义中添加一个 domNode。因此，例如，当您在布局中为列设置“名称”时，您可以使用类似 ...

var layout = [
    {
       cells: [
          {
             name:"<i id="sometooltip" class='icon-large icon-edit'></i> Col",
             field: "_item",
             formatter: lang.hitch( this, this.formatter )
          }
       ]
}];

然后您要做的是在您的格式化程序中，您想检查“sometooltip”是否已被初始化为工具提示，然后进行连接。您可以使用任何工具提示......而不仅仅是 dijit.Tooltip。

不过有几句话要小心。因为格式化程序将在每次重绘网格时运行，所以您可能需要想出更好的方法来创建工具提示。例如，您可能希望将其添加到 onGridRowHeaderHover，或者您可能只想使用 CSS3 并使用 [title] 属性来创建 CSS3 标题。

还有。您不能只创建一次工具提示，因为每次重绘/更改数据时都会不断重建标题。

正确的方法

正确的方法是覆盖标题的 Grid 模板，并在其中包含您的工具提示。然后，您将扩展与 onStyleRow 等效的标题（我不记得了），但基本上是放置标题的方法，然后创建您的工具提示。

我肯定会通过覆盖模板来使用第二个选项。因为否则你会发现网格出现故障。

【讨论】：