flexGrid多列排序如何只显示一个箭头？

登录

1.我在 flexGrid的 onSorted事件里添加了多列排序。但是排序后的列都有小箭头，我只想保留最新的一个，该如何处理？我尝试过排完序后查找到<span>元素直接删除，发现不行，删除后还是要刷新一下，小箭头又回来了。

2.我想在flexGrid初始化的时候，某一列（比如startDate)就按照Desc排序，好像wijmo没有提供相应方法？

3.在IE浏览器里，鼠标第二次点击排序时，toolTip（提示说明)会跳一下，这个有什么好的解决方案？

Alice · Alice

谢谢您的反馈。
当默认的不满足需求，Sort排序可以自定义。
1.在sortingColumn事件里能够获取到时哪些列参与了排序，记录下来，然后通过itemFormatter方法，判断cellType是ColumnHeader。然后通过panel.Columns[c]可以拿到列，根据你的需求来重新设置ColumnHeader的cell的文字和排序符号。
代码参考

// formatter to show sort icon in header
grid.itemFormatter = function (panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
var col = panel.columns[c];
if (//一些可以满足的条件) {
//包含sort图标
cell.innerHTML = col.header + ' <span class="wj-glyph-up"></span>';
}
}
}

复制代码

2.可以拿到flexgrid的CollectionView，直接使用SortDescription针对某些进行排序。
CollectionView的排序可以参考产品文档：
http://wijmo.com/5/docs/topic/wi ... tionView.Class.html

3.闪烁问题没重现，还请提供可以重现的Demo。

songjiefa · songjiefa

Alice 发表于 2016-6-28 09:42
谢谢您的反馈。
当默认的不满足需求，Sort排序可以自定义。
1.在sortingColumn事件里能够获取到时哪些列 ...

谢谢你的解答。

<html>
<head>
<style>
.wj-flexgrid {
height: 300px;
background-color: white;
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
margin-bottom: 12px;
}
</style>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/app.css" />
<script src="http://code.jquery.com/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
<script src="scripts/wijmo.culture.de.js" type="text/javascript"></script>
</head>
<body>
<div id="gsFlexGrid"></div>
<script>
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < 100; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 === 0
});
}
// create the grid and give it some data
var grid = new wijmo.grid.FlexGrid('#gsFlexGrid');
grid.itemsSource = data;
grid.formatItem.addHandler(addToolTip);
function addToolTip(grid, event){
var tooltip = new wijmo.Tooltip();
tooltip.setTooltip(event.cell, event.cell.innerHTML);
};
</script>
</body>

复制代码

这是我的demo，不是闪烁问题，而是 toolTip会上下跳动

Alice · Alice

songjiefa 发表于 2016-6-28 19:37
谢谢你的解答。

你用formatItem来设置的Tooltip，click header的时候会刷新，会在鼠标点击的位置重新出现ToolTip。不是你说的跳动问题。

如果你想更好的控制ToolTip。可以在你的addToolTip方法里加一些判断条件，比如当cellType的类型是Cell的时候，才设置ToolTip。

另外你也可以使用鼠标事件，比如MouseMove/MouseOut来自己定义Tooltip的展示。

songjiefa · songjiefa

Alice 发表于 2016-6-29 09:37
你用formatItem来设置的Tooltip，click header的时候会刷新，会在鼠标点击的位置重新出现ToolTip。不是你 ...

是跳动问题吧，我把tooltip.gap = 0也是这样。在chrome里没问题，IE 10或IE11就出现了tooltip调到左上角的问题。

songjiefa · songjiefa

Alice 发表于 2016-6-29 09:37
你用formatItem来设置的Tooltip，click header的时候会刷新，会在鼠标点击的位置重新出现ToolTip。不是你 ...

我试着设置showDelay =0; hideDelay =0;
有点效果，用mouseover事件也是可以的，但改动大。

再次感谢

Alice · Alice

songjiefa 发表于 2016-6-29 17:20
我试着设置showDelay =0; hideDelay =0;
有点效果，用mouseover事件也是可以的，但改动大。

好的，谢谢您的反馈。
ToolTip的产品文档，供您参考：
http://wijmo.com/5/docs/topic/wijmo.Tooltip.Class.html

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

flexGrid多列排序如何只显示一个箭头？

本帖子中包含更多资源

6 个回复

评分

活字格认证

微信认证勋章

元老葡萄