GirdView选中行变色，滑动鼠标指定列变色，合并指定列，全选反选等

最新推荐文章于 2021-08-20 15:11:44 发布

邹琼俊

最新推荐文章于 2021-08-20 15:11:44 发布

阅读量2.3k

点赞数 1

分类专栏： ASP.NET WebForm开发

本文链接：https://blog.csdn.net/zouyujie1127/article/details/30713317

版权

ASP.NET WebForm开发专栏收录该内容

77 篇文章 0 订阅

订阅专栏

最近，去了新公司，由于限制了网络，有过一阵子没有写东西了，只能周末在家的时候有时间写。本想写一些最近关于学习CRM2011的学习心得，但一方面考虑到公司限网，另一方面，网上已经有大神写了非常详细的一个CRM2011编程系列，因此就打消了这个念头，只好记录下一些工作中常用到的技术点，就当备忘吧，也供大家参考。

要实现的效果如下：

(图1）

（图2）

实现思路：大家都知道，Gridview控件，生成的html代码其实就是对应的一个table。要合并某一列中数据相同的行，会用到该单元格也即td的RowSpan属性。1、当Gridview中有数据时，我先取第一行中要合并列的文本，并设置第一行中指定的列不跨行，记录下待合并列的索引位置。2、遍历Gridview中的数据，但是要从第二行开始遍历。如果有文本和前一行中指定的列文本相同，则先隐藏这一单元格中的文本，再设置上一单元格的RowSpan+1(有多少连续相同值的行，就跨多少行)。如果不同，则重新更新要合并的文本和待合并单元格起始索引，RowSpan默认为1。3、合并单元格方法应放置在DataBind事件中。

（图1）代码如下：

    /// <summary>
    /// 合并行（普通列）
    /// </summary>
    /// <param name="gv">Girdview对象</param>
    /// <param name="columnIndex">要合并的列的索引</param>
    public static void UnitCell(GridView gv, int columnIndex)
    {
        int i;
        string lastText; //合并行中列的文本
        int lastCell; //待合并单元格的起始索引

        if (gv.Rows.Count > 0)
        {
            lastType = gv.Rows[0].Cells[columnIndex].Text;
            gv.Rows[0].Cells[columnIndex].RowSpan = 1;
            lastCell = 0;

            for (i = 1; i < gv.Rows.Count; i++)
            {
                if (gv.Rows[i].Cells[columnIndex].Text == lastText) //连续行的文本相同
                {
                    gv.Rows[i].Cells[columnIndex].Visible = false;
                    gv.Rows[lastCell].Cells[columnIndex].RowSpan++;
                }
                else
                {
                    lastType = gv.Rows[i].Cells[columnIndex].Text;
                    lastCell = i;
                    gv.Rows[i].Cells[columnIndex].RowSpan = 1;
                }
            }
        }
    }

    /// <summary>
    /// 合并行（模板列）
    /// </summary>
    /// <param name="gv">Girdview对象</param>
    /// <param name="columnIndex">要合并的列的索引</param>
    /// <param name="lblName">模板列里面label的ID</param>
    public static void UnitCell(GridView gv, int columnIndex, string lblName)
    {
        int i;
        string lastType; //合并行中列的文本
        int lastCell; //待合并单元格的起始索引

        if (gv.Rows.Count > 0)
        {
            lastType = (gv.Rows[0].Cells[columnIndex].FindControl(lblName) as Label).Text;
            gv.Rows[0].Cells[columnIndex].RowSpan = 1;
            lastCell = 0;
            for (i = 1; i < gv.Rows.Count; i++)
            {
                if ((gv.Rows[i].Cells[columnIndex].FindControl(lblName) as Label).Text == lastText) //连续行的文本相同
                {
                    gv.Rows[i].Cells[columnIndex].Visible = false;
                    gv.Rows[lastCell].Cells[columnIndex].RowSpan++;
                }
                else
                {
                    lastType = (gv.Rows[i].Cells[columnIndex].FindControl(lblName) as Label).Text;
                    lastCell = i;
                    gv.Rows[i].Cells[columnIndex].RowSpan = 1;
                }
            }
        }
    }
    public string GetGenderName(object obj)
    {
        return Convert.ToBoolean(obj) == true ? "男" : "女";
    }
    //为什么写在这里?这里是gridview数据绑定完之后，执行的方法。考虑到分页后，或者页面刷新等原因
    protected void GridView1_DataBound(object sender, EventArgs e)
    {
        UnitCell(GridView1, 9, "lbl");
    }

（图2）cs代码如下：

 protected void gdvWaterFee_RowDataBound(object sender, GridViewRowEventArgs e)
        {
    if (e.Row.RowType == DataControlRowType.DataRow)
      {
             e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){this.style.backgroundColor='#Efefef'}");//当鼠标停留时更改背景色
             e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor='#ffffff'}");//当鼠标移开时还原背景色
             e.Row.Attributes.Add("onclick", e.Row.ClientID.ToString() + ".checked=true;selectx(this,11,8)"); //单击时改变行中指定列的背景色
             }
        }
        protected void gdvWaterFee_DataBound(object sender, EventArgs e)
        {
            int index = 3;
            int endIndex = 9;
            for (int i = index; i <= endIndex; i++)
            {
                UnitCell(gdvWaterFee, i, index);
            }
        }
        /// <summary>
        /// 合并行（普通列）  
        /// </summary>
        /// <param name="gv">Girdview对象</param>
        /// <param name="columnIndex">要合并的列的索引</param>
        /// <param name="textIndex">比较文本相同的列索引（如果此列的文本相同则合并指定列）</param>
        public static void UnitCell(GridView gv,int columnIndex, int textIndex)
        {
            int i;
            string lastText; //合并行中列的文本  
            int lastCell; //待合并单元格的起始索引  

            if (gv.Rows.Count > 0)
            {
                lastText = gv.Rows[0].Cells[textIndex].Text;
                gv.Rows[0].Cells[columnIndex].RowSpan = 1;
                lastCell = 0;

                for (i = 1; i < gv.Rows.Count; i++)
                {
                    if (gv.Rows[i].Cells[textIndex].Text == lastText) //连续行的文本相同  
                    {
                        gv.Rows[i].Cells[columnIndex].Visible = false;
                        gv.Rows[lastCell].Cells[columnIndex].RowSpan++;
                    }
                    else
                    {
                        lastText = gv.Rows[i].Cells[textIndex].Text;
                        lastCell = i;
                        gv.Rows[i].Cells[columnIndex].RowSpan = 1;
                    }
                }
            }
        }

js代码如下：

var bgColor = '#A7CDF0'; //蓝色
var bgColor1 = '#ffffff'; //白色
var prevselitem = null;

//选中行变色 参数示例：11,8  (row:点击变色的行对象,cCounts:总共的列数,cIndex:此列索引后面的列都变色)
function selectx(row,cCounts,cIndex) {
    if (prevselitem != null) {
        for (var v = 0; v <= cCounts; v++) {
            if (prevselitem.cells.length == 5) {
                if (v < 5) {
                    prevselitem.cells[v].style.backgroundColor = bgColor1;
                }
            }
            else {
                prevselitem.cells[v].style.backgroundColor = bgColor1;
            }
        }
    }
    for (var v = 0; v <= cCounts; v++) {
        if (row.cells.length == 5) {
            if (v < 5) {
                row.cells[v].style.backgroundColor = bgColor;
            }
        }
        else {
            if (v < 2 || v > cIndex) {
                row.cells[v].style.backgroundColor = bgColor;
            }
        }
    }
    prevselitem = row;
}

总结：鼠标移到行上时设置该行的背景颜色，鼠标移开时，还原背景颜色。鼠标单击该行时，给该行设置颜色，并把该行存起来，当再次点击行时，先将存起来的那一行颜色复原，再给新点击的行设置颜色。如果要设置行中指定单元格的背景颜色，则只要以单元格为单位设置其背景颜色即可。

关于全选和反选功能，太简单，我这里只提一下思路。单击全选按钮时，判断该按钮是否为选中，如果为选中，则遍历该Gridview中所有的checkbox，并设置其为选中，否则设置为不选中。当单击Gridview数据行中的复选框时，再次遍历Gridview中所有复选框，如果选中的数量等于总数，则全选框选中，否则不选中。关键代码如下：

//获Ggridview中所有的复选框 sName: Gridview 的ID
function getCheckbox(sName) {
    var aryCheckbox = new Array();
    var tb = document.getElementById(sName);
    if (tb == null)
        return;
    var objs = tb.getElementsByTagName("input");
    for (var i = 0; i < objs.length; i++) {
        if (objs[i].type == 'checkbox' && startsWith(objs[i].id, sName))
            aryCheckbox.push(objs[i]);
    }
    return aryCheckbox;
}

//监听每一行的复选框,控制全选、反选按钮
function controlSelectAll(t) {
    var tblName, cbkAll; //Gridview ID ，全选框ID
    if (t == 1) { //水费
        tblName = "gdvWaterFee";
        cbkAll = "chkAllFee";
    }
    else if(t==2) //代收费
    {
        var tblName = "gdvCollFee";
        var cbkAll = "chkAllColl";
    }
    else
    {
        return;
    } 
    var chks = getCheckbox(tblName);
    var count = 0;
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked == true) {
            count++;
        }
    }
    if (count < chks.length) {
        document.getElementById(cbkAll).checked = false;
    }
    else {
        document.getElementById(cbkAll).checked = true;
    }
}