选择 是 C1GridView 最基本的操作之一,选择时 C1GridView 会自动将选择行高亮突出显示效果。
但是,有用户向我们询问如何更加突出选择效果。例如在行头中显示“>>”等符号,本篇文章中我们就将阐述如何设置选择行头的图片。
以下是我们将要实现的效果:
捕捉选择行事件
添加图片到行头,我们需要从 OnClientSelectionChanged 事件中获取索引。
获取选择行索引
代码如下,我们使用两个变量 rowIndex 和 removedRowIndex。它们分别代表选择行和移除行。
function C1GridView_OnSelectionChange(e, args) {
var rowIndex = args.addedCells._getSelectedRowsIndicies()[0];
var removedRowIndex = args.removedCells._getSelectedRowsIndicies();
}
向行头插入图片
使用 : jQuery 选择器我们可以获取特定索引行。在下面的代码中<img src=’right.bmp’ 设置了行头图片。
在行取消选择后,我们需要移除行头图片,代码如下:
$(".wijmo-wijgrid-rowheader:eq(" + (rowIndex) + ")").find("div")[0].innerHTML = "<img alt="a" src="right.bmp" />";
if (removedRowIndex != undefined) {
for (var x = 0; x < removedRowIndex.length; x++) {
$(".wijmo-wijgrid-rowheader:eq(" + (removedRowIndex[x]) + ")").find("div")[0].innerHTML = "";
}
}
目前为止,我们就完成了行头选择指示器的功能,赶快下载 Demo 体验吧!
VS2012 + C# + Studio for ASP.NET Wijmo: