Dgrid 树向每个单元格添加 html 工具提示答案

【问题标题】：Dgrid tree adding html tooltip to each cellDgrid 树向每个单元格添加 html 工具提示
【发布时间】：2015-12-15 14:19:53
【问题描述】：

dojo 和 dgrid 的新手。我的代码中使用了一个 dgrid 树，并希望显示 dgrid 中每个单元格的工具提示。

我尝试向树中添加格式化程序，但是它破坏了树。下面是带有格式化程序的示例代码

this.OneGrid = new OneGridMixin({
            columns:{
                fieldname : tree({field:"name", width: "auto", sortable: false, formatter: function(data){return "<span title="+data+">"+data+"</span>";}})
            },  
            showHeader: false,
            minRowsPerPage: 25000,
            maxRowsPerPage: 25000
        }, "options_OneGrid");

我还尝试将title:"Title", 添加到对象，但它不起作用。我不确定网格函数还可以接受哪些其他参数。

谢谢

【问题讨论】：

标签： tree dojo dgrid

【解决方案1】：

看看下面的 jsfiddle dijit.Tree 实现，包括一个工具提示：

 var treeControl = new dijit.Tree({
        model: treeModel,
        showRoot: false,
        _createTreeNode: function( /*Object*/
        args) {
            var tnode = new dijit._TreeNode(args);
            tnode.labelNode.innerHTML = args.label;
            return tnode;
        },
        onMouseOver: function(event) {
            var node = dijit.getEnclosingWidget(event.target);

            dijit.showTooltip("Tooltip for: " + this.model.store.getValue(node.item, "label"), node.labelNode);
        }
    }, "treeOne");

我不知道dgrid tree，但我希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用 mouseover 和 mouseout 事件在 dgrid 中显示工具提示。

this.toolTipGrid.on(".dgrid-cell:mouseover", lang.hitch(this, this.showGridTooltip));
this.toolTipGrid.on(".dgrid-cell:mouseout", lang.hitch(this, this.hideGridTooltip)); 

showGridTooltip: function(event){
    var cell=this.toolTipGrid.cell(event);
    var toolTipText="Tooltip text will go here";
    dijit.showTooltip(toolTipText, cell.element);
},

hideGridTooltip: function(event){
    var cell=this.batchStatusGrid.cell(event);
    dijit.hideTooltip(cell.element);
},

【讨论】：