0

使用 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'),
4

2 回答 2

0

只需在_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 模块。

于 2014-10-03T18:54:16.743 回答
0

我建议使用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：排序完成时是否有回调？

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

于 2014-09-10T01:23:52.987 回答