C1WebGrid应用-改变当前选定行的背景色

╰+攻爆jí腚メ 2021-11-09 15:32 366阅读 0赞

在呈现数据时使C1WebGrid可以对当前鼠标指定的行突出显示可以带来很好的用户体验,更重要的是这个功能实现起来也不是很困难,下面来介绍其中的一个实现方法.采用的语言是ASP.NET(C\#)和Javascript.  
           首先定义两个Javascript函数来控制指定项目的背景色,其定义如下:

![None.gif][]   // 鼠标指向时调用   
![None.gif][] function  MouseOn(startIndex,colcount,cm)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]     ![dot.gif][] \{   
![InBlock.gif][]        var ID;  
![InBlock.gif][]        for(var j=startIndex;j<colcount;j\++)   
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{   
![InBlock.gif][]            ID="a"\+j\+cm;  
![InBlock.gif][]              
![InBlock.gif][]            eval(ID\+".style.background='\#CCCC66'");   
![InBlock.gif][]            eval(ID\+".style.cursor='hand'");   
![ExpandedSubBlockEnd.gif][]        \}   
![ExpandedBlockEnd.gif][]    \}   
![None.gif][] // 鼠标离开时调用   
![None.gif][]      function  MouseOut(startIndex,colcount,cm,indx)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]     ![dot.gif][] \{  
![InBlock.gif][]        var ID;  
![InBlock.gif][]        var precolor;  
![InBlock.gif][]        precolor="\#D3D3D3";//记录该行原来的颜色  
![InBlock.gif][]        //由于我的Grid相邻行是用不同颜色显示的  
![InBlock.gif][]//所以如果行号是双数,使用下面的颜色  
![InBlock.gif][]        if (indx % 2==0)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{            
![InBlock.gif][]           precolor="\#F5F5F5";  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]        //设置对象属性  
![InBlock.gif][]        for(var j=startIndex;j<colcount;j\++)   
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{   
![InBlock.gif][]            ID="a"\+j\+cm;  
![InBlock.gif][]            eval(ID\+".style.background='"\+precolor\+"'");   
![ExpandedSubBlockEnd.gif][]        \}   
![ExpandedBlockEnd.gif][]    \}

添加对上面函数的调用

![None.gif][] // 在ItemDataBound函数中添加处理   
![None.gif][] protected  void  C1WGridResult\_ItemDataBound(object sender, C1.Web.C1WebGrid.C1ItemEventArgs e)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]     ![dot.gif][] \{  
![InBlock.gif][]  
![InBlock.gif][]        ///改变背景颜色  
![InBlock.gif][]//如果当前行不是WebGrid的Header也不是Footer  
![InBlock.gif][]        if (e.Item.ItemType != C1.Web.C1WebGrid.C1ListItemType.Header && e.Item.ItemType != C1.Web.C1WebGrid.C1ListItemType.Footer)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{     
![InBlock.gif][]            //定义一个可以唯一表示当前行的字符串,这里使用的是该行的客户端id  
![InBlock.gif][]            string cm = e.Item.ClientID;  
![InBlock.gif][]            //指定该行包含的单元格数  
![InBlock.gif][]            Int32 colcount = e.Item.Cells.Count;  
![InBlock.gif][]            //指定从第几个单元格开始作用,这里主要是为了处理前面有合并列的情况,不然就不用一个一个格的处理了.  
![InBlock.gif][]            Int32 startIndex = 1;  
![InBlock.gif][]            for (int idx = startIndex; idx < e.Item.Cells.Count; idx \++)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]            ![dot.gif][]\{  
![InBlock.gif][]//为每个单元格指定id,这里的名字可以随便起的  
![InBlock.gif][]                e.Item.Cells\[idx \].Attributes.Add("id", "a" \+ idx .ToString() \+ cm);  
![InBlock.gif][]//为当前单元格指定onmouseover的处理函数  
![InBlock.gif][]                e.Item.Cells\[idx \].Attributes.Add("onmouseover", "javascript:MouseOn(" \+ startIndex\+ "," \+ colcount.ToString() \+ ",'" \+ c\+ "')");  
![InBlock.gif][]//为当前单元格指定onmouseout的处理函数  
![InBlock.gif][]                e.Item.Cells\[idx \].Attributes.Add("onmouseout", "javascript:MouseOut(" \+ startIndex\+ "," \+ colcount.ToString() \+ ",'" \+ c\+ "','" \+ e.Item.ItemIndex \+ "')");  
![ExpandedSubBlockEnd.gif][]            \}  
![ExpandedSubBlockEnd.gif][]        \}  
![ExpandedBlockEnd.gif][]    \}

经过上面的处理后,我们的基本目的就算达到了,当然还有很大的改进空间,这里只是提供一种思路.

转载于:https://www.cnblogs.com/hjzhang/archive/2006/09/16/2043595.html

[None.gif]: /images/20211109/0e28d3f34345406bb07c552bbfc0dbe7.png
[ExpandedBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: /images/20211109/860d8c678c8544289930f2df6fc27da0.png
[InBlock.gif]: /images/20211109/54af4a4073d54eb58d45a697e168fff3.png
[ExpandedSubBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif
[ExpandedSubBlockEnd.gif]: /images/20211109/8c11dc69bee145b9ba3ffdfde82d7c6b.png
[ExpandedBlockEnd.gif]: /images/20211109/5822bfda553647bc8dd71eda699d4d58.png