flexgrid栏位列头如何定义title悬浮显示

登录

如题，我想要实现的功能是栏位列头上显示中文字段名称，title悬浮显示的是英文字段名称，请问有能实现如div title一样功能的方法吗

KevinChen · KevinChen

您好，可以给FlexGrid添加鼠标事件，如代码所示：

// monitor and log mouse moves
var logEl = document.getElementById('log');
theGrid.addEventListener(theGrid.hostElement, 'click', function(e) {
var ht = theGrid.hitTest(e);
alert("点击行："+ ht.row);
});

复制代码

通过hitTest方法可以获取到行、列坐标，然后用tooltip进行显示，参考API：

https://www.grapecity.com/wijmo/api/classes/wijmo.tooltip.html

oraclexp79 · oraclexp79

目前我的版本是wijmo-5.20183.550 ，是否支持es6写法?你给我的参考是es6写法

KevinChen · KevinChen

您好，这个不影响的，您可以用ES5的语法来实现，示例代码如下：

onload = function() {
// create some random data
var countries = 'US,Germany,UK,Japan'.split(',');
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
id: i,
country: countries[i % countries.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
overdue: i % 4 == 0
});
}
// bind a grid to the data
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: new wijmo.collections.CollectionView(data, {
groupDescriptions: [ 'country' ] // group data by country
}),
formatItem: function(s, e) { // add 'button' to country cells
if (e.panel == s.cells) {
if (s.columns[e.col].binding == 'country') {
var html = '<span class="my-button">⬤</span> ' + e.cell.innerHTML;
e.cell.innerHTML = html;
}
}
}
});
theGrid.addEventListener(theGrid.hostElement, 'mouseover', function(e) {
var ht = theGrid.hitTest(e);
var cellType = ht.cellType;
// 判断是否为列头的cellType
if(cellType === 2){
console.log(theGrid.getClipString(ht.range, true, true));
}
});
}

复制代码

KevinChen · KevinChen

完整示例我上传到附件中了，您可以下载参考一下。

oraclexp79 · oraclexp79

谢谢，经过你们的帮助，问题解决，不过我没用tooltip,用了自己的方法
   var columnHeaderList=[{"id":"Executant","name":"执行者"}];//对应中英文
   this.eventGrid.addEventListener(this.eventGrid.hostElement,'mousemove', function (e) {
   var ht = _this.eventGrid.hitTest(e);
               // 判断是否为列头的cellType
   if(ht.cellType==2){
   $(".wj-colheaders .wj-row .wj-header").each(function() {
                        var txt =$(this).text() ;
            if (txt != "") {
            var item = columnHeaderList.find(p=>p.id==txt);
            if(item!=null) txt = item.name;
            $(this).attr("title", txt);
            }

      })
   }
});

KevinChen · KevinChen

不客气，很高兴您最终解决了问题，本帖结贴了~

		自动登录	找回密码
密码			立即注册

[已处理] flexgrid栏位列头如何定义title悬浮显示

本帖子中包含更多资源

6 个回复

本帖子中包含更多资源

评分

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章