满分求解-关于GridView的行高亮问题

Question

GRIDVIEW要实现的功能是单击：单击某一行 高亮显示,单击另一行 之前一行取消高亮，当前行高亮CTRL+单击：单击过的行都高亮显示SHIFT+单击：单击过的两行 之间的所有行高亮显示其实说穿了就是类似windows的文件操作那种的功能哪位高手指点下怎么做？当然有代码最好小弟拜谢！

Answer 1

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='';this.style.color=''");
            e.Row.Attributes.Add("OnMouseOver", "this.style.backgroundColor='#50638D';this.style.color='#FFFFFF'");
e.Row.Attributes.Add("onclick", "style.backgroundColor='red");         }    }或 
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
    {  
        if (e.Row.RowType == DataControlRowType.DataRow)  
        {  
            e.Row.Attributes.Add("onMouseOver", "SetNewColor(this);");  
            e.Row.Attributes.Add("onMouseOut", "SetOldColor(this);");  
        }  
    } 
var _oldColor;  
      function SetNewColor(source)  
      {  
          _oldColor=source.style.backgroundColor;  
          source.style.backgroundColor='#E8F4FF';  
      }  
      function SetOldColor(source)  
      {  
        source.style.backgroundColor=_oldColor;  
      }  .Row.Attributes.Add("onclick", "tog(this,'#00A9FF'); 
var tgs; 
function tog(n,flags) 
{ 
if(tgs) 
{ 
tgs.style.background=''; 
} 
n.style.background=''; 
tgs=n; 
} 

Answer 2

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
        if (e.Row.RowType == DataControlRowType.DataRow) 
        { 
            e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='';this.style.color=''"); 
            e.Row.Attributes.Add("OnMouseOver", "this.style.backgroundColor='#50638D';this.style.color='#FFFFFF'"); 这个比较简单咯。。 也好理解

Answer 3

第一的个问题还是简单的,关键是后两个问题:CTRL+单击：单击过的行都高亮显示 
SHIFT+单击：单击过的两行 之间的所有行高亮显示 这两个问题有难度,楼上答的都是第一个问题!!!!

Answer 4

Jquery简单，定义好css只要几句话
<script type="text/javascript">
        $(function() {
            $("#tblName tr:gt(0):odd").attr("class", "odd");
            $("#tblName tr:gt(0):even").attr("class", "even");
            $("#tblName tr:gt(0)").hover(function() {
                $(this).addClass('mouseover');
            }, function() {
                $(this).removeClass('mouseover');
            });
        })
    </script>

Answer 5

var currTR=this;
    function overTR(){
    var trs = document.getElementById("setTbl").getElementsByTagName("tr");
    for(var i in trs){
        trs[i].onmouseover = function(){
        var oldBgColor=this.bgColor;
        var oldFontColor=this.style.color;
        this.bgColor = "#0000FF";
        this.style.color="#FFFFFF";
        if(currTR != this&&currTR.tagName=="TR"){currTR.bgColor = oldBgColor; currTR.style.color=oldFontColor;}
        currTR = this;
            }
        }
    }
    window.onload = function(){overTR();} JS的行高亮
CTRL+单击
不是有个什么   ctrlkey&click 调用函数就可以了 呵呵 没有试过 我去试试

Answer 6

去吃了会饭，终于ok .hl,.hl a {background-color:#326496;color:#FFFFFF;}将下面的代码放在body后面,注意gridview的id(function() {
    var lastIndex=-1;
    var tb=document.getElementById("tb1");//表格的id可以写成"<%=GridView1.ClientID%>"
    for(var i=1;i<tb.rows.length;i++) {//从1开始，假设有列头
        (function(row,i){
            row.onclick=function(e) {
                e=window.event ||e;
                e.cancelBubble = true;
                if(e.shiftKey) {
                    if(lastIndex==-1) {
                        this.className="hl";
                        lastIndex=this.rowIndex;
                    }else if(lastIndex==this.rowIndex) {
                        this.className="";lastIndex=-1;
                    } else {
                        var start=Math.min(this.rowIndex,lastIndex);
                        var end=Math.max(this.rowIndex,lastIndex);
                        for(var i=start;i<end;i++) {
                            tb.rows[i].className="hl";
                        }
                        lastIndex=this.rowIndex;
                    }
                }else if(e.ctrlKey) {
                    this.className="hl";
                } else  {
                    for(var i=0;i<tb.rows.length;i++) {
                            tb.rows[i].className="";
                    }
                    this.className="hl";
                    lastIndex=this.rowIndex;
                }
            }
        })(tb.rows[i],i);
    }    
})();

Answer 7

window.onload=function() {
    var lastIndex=-1;
    var tb=document.getElementById("setTbl");
    for(var i=1;i<tb.rows.length;i++) {//从1开始，假设有列头
        (function(row,i){
            row.onclick=function(e) {
                e=window.event ||e;
                e.cancelBubble = true;
                if(e.shiftKey) {
                    if(lastIndex==-1) {
                        this.className="hl";
                        lastIndex=this.rowIndex;
                    }else if(lastIndex==this.rowIndex) {
                        this.className="";lastIndex=-1;
                    } else {
                        var start=Math.min(this.rowIndex,lastIndex);
                        var end=Math.max(this.rowIndex,lastIndex);
                        for(var i=start;i<end;i++) {
                            tb.rows[i].className="hl";
                        }
                        lastIndex=this.rowIndex;
                    }
                }else if(e.ctrlKey) {
                    this.className="hl";
                } else  {
                    for(var i=0;i<tb.rows.length;i++) {
                            tb.rows[i].className="";
                    }
                    this.className="hl";
                    lastIndex=this.rowIndex;
                }
            }
        })(tb.rows[i],i);
    }    
}呵呵我这样调用？

Answer 8

sohighthesky前辈的JS的确是能实现我要的功能的但是稍稍两点不明白 由于我这边是两个GV如图
我如何让两个GV的行同时都具有变色功能？还有一点是 选中的高亮行将来客户可能需要做一个删除的操作 如何捕捉已经高亮行的ID？

Answer 9

1.把那个写到一个方法里，传入gridview的id
2.遍历tb，获取className为hl的

Answer 10

再  onclick 事件 的 写，，，取到所有高亮行的 ID！！！
protected void gv_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
        if (e.Row.RowType == DataControlRowType.DataRow) 
        { 
 
e.Row.Attributes.Add("onclick", "row_click(this)");         }     } function row_click(Row)
{
   这ROW是被你点击后 高亮的行！  row.cells[0].innerHTML //取 主键
}
这里还有一问题，你必须 编辑 GRIDVIEW的所有行，判断 是否高亮！（你用SHIFT拉的高亮）
高亮就取值，最后把值 串起来，赋值给隐藏控件，后台取值 删除就好！

Answer 11

1,写到一个方法里，那应该只能分别高亮的吧 由于两个gridview是放在一起的v,看起来好像是一个的，所以之前我也没注意到- -2，我再试下