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

Question

我有一个动态轮询的dojo datagrid。我想将工具提示添加到此数据网格的表头。我该怎么做呢?我的datagrid只有表和表头的结构。字段是动态填充的。

谢谢，Sreenivas

Answer 1

最简单的方法

最简单的方法(不覆盖模板)是将domNode添加到布局标头定义中。因此，例如，当您在布局中为列设置"name“时，您可以使用类似于...

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 (我记不清了)等效的头部，但基本上是放置头部的方法，然后创建您的工具提示。

我肯定会通过覆盖模板来使用第二种选择。因为不然的话，你会发现网格有问题。

Answer 2

我也有类似的要求。我希望每个DataGrid列标题都使用指定给列的名称作为工具提示，因为我们的DataGrids并不总是显示完整的列名称，因为列的宽度有时会受到挤压。我添加了一个猴子补丁(下面)，它是用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中，那么您需要添加一个条件，以便以某种方式仅从中提取文本作为工具提示，或者以某种方式生成一个不会抛出呈现错误的工具提示，或者避免为该列完全设置工具提示。

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