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

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

要实现的效果如下:

GirdView选中行变色,滑动鼠标指定列变色,合并指定列,全选反选等_第1张图片

(图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;
    }
}




你可能感兴趣的:(GirdView选中行变色,滑动鼠标指定列变色,合并指定列,全选反选等)