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

选择 是 C1GridView 最基本的操作之一,选择时 C1GridView 会自动将选择行高亮突出显示效果。但是,有用户向我们询问如何更加突出选择效果。例如在行头中显示“>>”等符号,本篇文章中我们就将阐述如何设置选择行头的图片。

发布于 2014/04/29 00:00

ComponentOne Enterprise

选择 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:

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台,并完美集成于 Visual Studio 的第三方控件集,包含 300 多种 .NET开发控件,提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能,被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务,并由技术支持工程师为您1对1解答。>> 发帖提问

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态