0

動的に入力される Dojo データグリッドがあります。このデータグリッドのテーブル ヘッダーにツールチップを追加したいと考えています。どうすればできますか?私のデータグリッドは、単純にテーブルとテーブル ヘッダーの構造を持っています。フィールドは動的に入力されます。

ありがとう、スリーニバス

4

3 に答える 3

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 ヘッダーを作成したい場合があります。

また。ヘッダーはデータの再描画/変更のたびに常に再構築されるため、ツールチップを一度だけ作成することはできません。

正しい方法

正しい方法は、ヘッダーの Grid テンプレートをオーバーライドし、そこにツールチップを含めることです。次に、ヘッダーに相当するものonStyleRow（覚えていません）を拡張しますが、基本的にはヘッダーを配置するメソッドを拡張し、ツールチップを作成します。

テンプレートをオーバーライドすることで、間違いなく 2 番目のオプションを使用します。そうしないと、グリッドにグリッチが発生するためです。

于 2013-06-06T12:46:46.990 に答える
0

同様の要件がありました。列の幅が圧迫されることがあるために 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 に追加される可能性がある場合は、そこからテキストのみを抽出してツールチップにする条件を追加するか、何らかの方法でスローしないツールチップを生成する必要があることに注意してください表示エラー、またはその列のツールチップを完全に設定しないでください。

于 2015-05-01T17:21:08.167 に答える
0

AMD Dojo より前のバージョンの場合、これはグローバル スコープの JavaScript リソースに含まれているモンキー パッチです。私のもう 1 つの答えは、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('');
};
于 2015-05-04T17:57:48.267 に答える