Question

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

我试图在我的UName列中的每个用户名单元格上添加工具提示，该列表将显示该行中的姓氏和名字的值。目的：我想隐藏First＆amp;要创建空间的姓氏列。聪明吧？好吧，如果我只知道如何。

我正在学习JS和道场。到目前为止网格正在填充，按钮工作正常。快速小提琴：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模块。

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

2 个答案: