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

时间:2013-06-06 05:58:37

标签: datagrid dojo

我有一个动态poulated的dojo数据网格。我想将工具提示添加到此数据网格的表头。我该怎么做?我的数据网格只有表格和表格标题的结构。这些字段会动态填充。

谢谢, Sreenivas

3 个答案:

答案 0 :(得分:1)

最简单的方法

最简单的方法是(不覆盖模板)将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的标题(我不记得了),但基本上是放置标题的方法,然后创建工具提示。

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

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

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

答案 2 :(得分:0)

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