添加具有同一行上的单元格值的单元格工具提示

Question

使用 Dojo 1.9.3 和 Gridx 1.0 版。 （声明式和程序式）

我一直在尝试在我的 UName 列中的每个用户名单元格上添加一个工具提示，以显示该行中姓氏和名字的值。 目的：我想隐藏名字和姓氏列以腾出空间。聪明吧？好吧，如果我只知道如何。

我正在学习 JS 和 dojo。到目前为止，网格正在填充并且按钮工作正常。快速小提琴：http://jsfiddle.net/ysabz/17v7po76/

userColumns = [
{id:'uuid', field: 'uuid', name: 'User UUID', width: 'auto'},
{id:'user_name', field: 'user_name', name: 'UName', width: '7%',

 **// I think I need to add a function call that will get the row Index with mouseOver
etc..Just not sure how to go about dong this.**   

},
{id:'first_name', field: 'first_name', name: 'FName', width: '0px'},
{id:'last_name', field: 'last_name', name: 'LName', width: '0px'},
{id:'start_date', field: 'start_date', name: 'Start', width: '0px'},
{id:'end_date', field: 'end_date', name: 'End', width: '10%'},  
{id:'subj_info', field: 'subj_info', name: 'Subject Info', width: 'auto'},
{id:'issuer_info', field: 'issuer_info', name: 'Issuer Info',width: 'auto'},
{id:'UpdateBtn', field: 'action', name: '', width: '6%', widgetsInCell: true,
decorator:  function(){
return "<button data-dojo-type='dijit/form/Button' data-dojo-props= 
iconClass:'dijitIconEdit' " + "data-dojo-attach-point='btn'>Update</button>";
},


// setCellValue call etc....

);}}],
            userGrid = new Grid({
              id: 'userGrid',
              cacheClass: Cache,
              store: userStore,
              structure: userColumns,
              modules: [Resizer, Sort, Pagination, Filter, Bar, 
              "gridx/modules/CellWidget",
        "gridx/modules/Edit", "gridx/modules/select/Row", "gridx/modules/select/Cell",
              ]}, 'usersNode'), 

Answer 1

我建议使用http://jqueryui.com/tooltip/。

将您的数据包装在<a> 标记中。像

request.get("filename.json", {
        handleAs: "json"
    }).then(function(data){
        for(i=0;i<data.length;i++){
            data[i].first_name='<a class='ttip' title="'+ data[i].first_name +'">'+ first_name+'</a>';
            // or whatever you want to do.
        }
    }
    dataStore = new Store({ data: data.items });
    ...
    ...
    ...
});

然后

$(".ttip").tooltip();

记得在每次渲染后重新应用它或查看：Gridx/Dojo & jQuery : Is there a callback when sorting is completed?

我建议在数据存储中创建一个新字段以进行显示，而不是弄乱您的数据。

Answer 2

只需使用带有_item 字段的格式化程序。将您的 user_name 列定义更改为

{
    id:'user_name',
    field: '_item',
    ...
    formatter: function(item) {
        return "<div title='"+item.first_name+" "+item.last_name+"'>"+item.user_name+"</div>";
    },
}

使用字段_item 意味着整个项目将可供格式化程序使用。也可以使用“dijit/Tooltip”，但为此您需要 gridx1.2 的 CellWidget 模块。