最简单的方法

最简单的方法是（不覆盖模板）将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标题。

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

正确的方式

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

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

Answer 2

我有类似的要求。我希望每个DataGrid列标题都使用为列提供的名称作为工具提示，因为我们的DataGrids并不总是显示完整的列名称，因为列＆＃39;宽度有时会受到挤压。我添加了一个使用AMD Dojo版本的猴子补丁（下面）：

＆＃13;

 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('');
};
   }
   );

＆＃13;

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

Answer 3

对于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('');
};

将工具提示添加到dojo中的datagrid标头

3 个答案:

最简单的方法

正确的方式