← 返回所有博客文章

选择 C1GridView 最基本的操作之一,选择时 C1GridView 会自动将选择行高亮突出显示效果。

但是,有用户向我们询问如何更加突出选择效果。例如在行头中显示“>>”等符号,本篇文章中我们就将阐述如何设置选择行头的图片。

以下是我们将要实现的效果:

 

捕捉选择行事件

添加图片到行头,我们需要从 OnClientSelectionChanged 事件中获取索引。

获取选择行索引

代码如下,我们使用两个变量 rowIndexremovedRowIndex。它们分别代表选择行和移除行。

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: