Studio for ASP.NET Wijmo: 设置 C1GridView 选择行头图片

选择是 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 = "";
 }
}