关于GRIDVIEW功能扩展

由于项目需要，对GRIDVIEW原因功能进行扩展，查阅了大量资料，没有找到符合要求的扩展。

实现功能：

1，gridview隔行变色

2,鼠标移动变换行背景色

3，无数据显示标题

4,固定表头

实现分析：

所有功能扩展全部通过继承原gridview

1，隔行变色 实现方式很简单只要定义对应的CSS样式就可以了。

然后设置

RowStyle.CssClass

AlternatingRowStyle.CssClass

 

  public GridView()
      {
          this.CssClass = "GridViewlist";//"Grid_General";
          this.HeaderStyle.CssClass = "GridHeadCss";//"Grid_Header";
          this.RowStyle.CssClass = "RowStyleCss";
          this.AlternatingRowStyle.CssClass = "AlternatingCss";//"Grid_AlternatingItem";
          this.AutoGenerateColumns = false;

          this .RowDataBound+=new GridViewRowEventHandler(GridView_RowDataBound);
         
          this.Sorting += new GridViewSortEventHandler(GridView_Sorting);
      }

 

 

2，实现方式很简单，只要在GridView_RowDataBound加入如下代码

 

 private void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
      {
          if (e.Row .RowType ==DataControlRowType.DataRow)//鼠标移动改变row的背景颜色
          {
              e.Row .Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#e6dcff'");
              e.Row .Attributes.Add("onmouseout", "this.style.backgroundColor=c;");
          }
      }

3，无数据显示标题，只要判断当GRIDIVEW无绑定的数据行是，复制表头显示就可以了。

 

 

 protected override int CreateChildControls(IEnumerable dataSource, bool dataBinding)
      {
          Int32 rowCount;
          Table table = new Table();

          rowCount = base.CreateChildControls(dataSource, dataBinding);
          this.HeaderRow.ID = this.ID + "head";
          if (this.EmptyShowHeader && (rowCount == 0))
          {
              table = CreateEmptyTable();
              Controls.Clear();
              Controls.Add(table);
           
          }

          return rowCount;

         
      }
      private Table CreateEmptyTable()
      {
          Table table = new Table();
          GridViewRow gridViewRow;
          TableCell cell = new TableCell();
          Int32 count;
          GridViewRowEventArgs e;

          table = base.CreateChildTable();
          table.ID = this.ID + "GridViewHead";
          count = this.Columns.Count - 1;

          //Create Title Columns
          gridViewRow = base.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);
          DataControlField[] fields = new DataControlField[count + 1];
          this.Columns.CopyTo(fields, 0);
          this.InitializeRow(gridViewRow, fields);
          e = new GridViewRowEventArgs(gridViewRow);
          this.OnRowCreated(e);
          table.Rows.Add(gridViewRow);

          Create Empty DataColumns
          gridViewRow = new GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal);
          cell.ColumnSpan = fields.Length;
          cell.Width = Unit.Percentage(100);
          cell.Text = this.EmptyDataText;
          cell.HorizontalAlign = HorizontalAlign.Center;
          gridViewRow.Cells.Add(cell);
          table.Rows.Add(gridViewRow);

          return table;
      }

4，固定标题最复杂，网上找到了两个解决办法，一个是通过CSS控制，另外一个JAVASCRIPT控制。

CSS:控制缺点有滚动条时，表头有部分被滚动条挡住，不够专业。

JS：控制，没仔细看，看评论说性能不好。

我的解决办法是：

分析，实现滚动条的CSS overflow:scroll;目标是只要数据行有滚动条，表头不需要，所以，就用DIV，把GRIDVIEW，的数据行抱起来，网上找了半天，也看了GRIDVIEW的MSDN帮助，没能实现，只好，在想办法，第一步：用DIV把gridview包起来，第二步：为gridview的表头行 添加ID，第三步：在gridiview前加入div用于显示新的表头，第四步：复制GRIDVIEW表头到新位置，隐藏原来的表头。以为这样就算完成了，可惜数据根本就对不齐。只好在想办法，增加第五步：复制数据行的列宽给新的表头列宽。至此功能完成。那叫一个激动呀！

具体代码：

 

 protected override void Render(HtmlTextWriter writer)
      {
          writer.Write("<div id=\""+this.ID+"Header\"></div>");
          writer.Write("<div class=\"gridviewData\">");
          base.Render(writer);
          writer.Write("</div>");
      }

 

 this.HeaderRow.ID = this.ID + "head";

 

 <script type="text/javascript">
    
        jQuery(document).ready(function (){
        
           // jQuery("#GridView1Header").width(jQuery("#GridView1").width());
           
//            var tds=jQuery("#GridView1_GridView1head + tr").find("td");
//            for(var i=0;i <tds.length;i ++){
//                jQuery("#GridView1_GridView1head").find("th")[i].width=jQuery(tds[i]).width();
//            }
//            jQuery("#GridView1Header").html("<table style='width:100%;'><tr>"+jQuery("#GridView1_GridView1head").hide().html()+"</tr></table>");
            CM.CopyClassHeader();
        });
    </script>

 

至此gridview扩展全部完成。

注：以上javascript 只要把注释去掉，把最后的函数注释掉就好了。

最终效果图：