`

GridView脚注行添加合计,并设置背景图片

    博客分类:
  • js
 
阅读更多

     以前在做GridView添加合计行时,都是通过DataTable新建一行,然后把数据写进去,最后绑定到GridView中,虽然功能实现了,但是不能很好的控制它的样式,某些时候还会出现问题,如:GridView中包含模板列,模板列又绑定了按钮控件,这样的话绑定到GridView中,合计行那行中按钮也会显示出来,这样就会十分的不友好。本文将演示如何使用GridView自带的Footer(脚注行)来解决这一问题,并且还可以随心所欲的控制其样式。

OnRowDataBound 事件
decimal totalCol8 =0.00M, totalCol9 = 0.00M, totalCol10 = 0.00M;
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRowView row = (DataRowView)e.Row.DataItem;

            totalCol8 += Convert.ToDecimal(row[9].ToString());
            totalCol9 += Convert.ToDecimal(row[10].ToString());
            totalCol10 += Convert.ToDecimal(row[11].ToString());

        }
        if (e.Row.RowType == DataControlRowType.Footer)
        {
            e.Row.Cells[0].Text = "合计";
            e.Row.Cells[8].Text = totalCol8.ToString();
            e.Row.Cells[9].Text = totalCol9.ToString();
            e.Row.Cells[10].Text = totalCol10.ToString();
            e.Row.CssClass = "cssFooter";   //设置行的样式
        }

    }
样式文件:
<style type="text/css" >
       .cssFooter
       {
         background-color:white;
         color:black;
         font-size:12px;
         font-family:Arial;
       }
     </style>


 设置GridView显示脚注行(Footer)
 <asp:GridView ID="GridView1" 
                          
 runat="server" 
                          
 AutoGenerateColumns="False"  
                           
showfooter="true"                                                  --显示脚注
                           
onRowDataBound="GridView1_RowDataBound">     --在事件中处理行的合计任务

 

if (e.Row.RowType == DataControlRowType.Footer)
        {
            //以跨栏的方式合并单元格
            e.Row.Cells[0].ColumnSpan = 8;
            //隐藏除第一个单元格之后的所有单元格
            for (int index = 1; index <= e.Row.Cells.Count - 1; index++)
            {
                e.Row.Cells[index].Visible = false;
            }
            e.Row.Cells[0].Text = "章立民研究室制作" + DateTime.Now.ToString("yyyy-MM-dd");
            e.Row.Cells[0].CssClass = "cssFooter";
        }
样式代码:
.cssFooter
{
   background-image:url(images/back_img.gif);
   font: italic 25px SimHei,标楷体,黑体;
   text-align:right;
   color:blue;
   height:90px;
}

 

分享到:
评论

相关推荐

    GridView添加合计行的实现方案

    为了在GridView的底部添加合计行,我们需要创建一个新的行,并将其类型设置为`DataControlRowType.Footer`。然后,我们可以将计算出的总计插入到对应的单元格中。 ```csharp // 创建合计行 GridViewRow footerRow ...

    winform gridview最下面的合计

    总结,实现“winform gridview最下面的合计行”涉及了数据绑定、自定义列、事件处理、添加新行、样式设置等多个步骤。同时,如果需要在GridView中展示GIF动画,还需要额外处理动画显示的逻辑。这些知识对于开发高效...

    DevExpress GridControl GridView新增行数据解决方案

    在开发过程中,我们可能会遇到在GridView中添加新行数据时遇到数据为空或者无法自动刷新的问题。本篇文章将深入探讨这个问题及其解决方案。 首先,当试图在GridView中添加新的数据行时,如果数据为空,可能的原因有...

    gridview动态添加空白行

    当需要在`GridView`中动态添加一个空白行时,可以先调用`InsertData()`方法获取当前的数据表,然后创建一个新的空白行并添加到`DataTable`中,最后重新绑定数据源即可。 ```csharp protected void btnAdd_Click...

    使用gridView完成添加图片功能

    这个demo是自己整理后应用的,添加图片是仿照微信上传图片时的弹出框,包含拍照和本地图片选取两部分,并且无论是本地选择相片还是拍照上传相片都带有裁剪功能,上传的图片添加到gridview九宫格中,点击选择的图片还...

    GridView合计列

    为了显示合计列,我们需要在GridView的列集合中添加一个自定义列。这通常在GridView的InitializeColumns事件中完成,该事件在数据绑定之前触发。创建一个新的BoundField或TemplateField,并设置其Visible属性为false...

    android GridView 添加图片

    通过以上步骤,开发者可以实现一个功能完备的Android应用,允许用户在GridView中添加、查看、删除图片,并支持从图库选择和通过相机拍照。在实际开发中,还需要考虑异常处理、用户体验优化等细节,以提供高质量的...

    GridView添加图片DeleteGridView

    在这个主题“GridView添加图片DeleteGridView”中,我们将深入探讨如何在GridView中集成图片展示,并提供删除功能。 首先,我们需要理解GridView的基本使用。GridView继承自AbsListView,通过Adapter来填充数据。...

    编辑gridview指定单元格添加新行排序等

    2. **添加新行**:要向GridView中添加新行,可以利用`InsertItemTemplate`模板,并在代码-behind中处理`RowInserted`事件。在事件处理程序中,你需要创建新的数据项,将其添加到数据源中,并重新绑定GridView以显示...

    DataGridView底部合计行

    5. **样式设置**:为了使合计行突出,可以通过设置其背景色、字体样式等方式区分,例如使用不同的颜色或加粗字体。 6. **测试数据库**:描述中提到的附带测试数据库可能是为了验证功能的正确性。可以使用SQLite、...

    GridView动态添加图片

    在本项目"GridView动态添加图片"中,开发者通过 APK 的形式实现了一个功能,允许用户动态地向 GridView 添加图片,这些图片可以来自手机的即时拍照或从手机的相册(画廊)选择。下面将详细介绍这一功能的实现原理和...

    GridView动态增加行

    3. **AddNewRow方法**:如果需要在GridView中手动添加一行,可以创建一个新的`GridViewRow`对象,设置其类型(如普通行或交替行),然后将其添加到GridView的`Rows`集合中。 4. **DataSource和DataBind()**:添加行...

    js 与Gridview结合 行移动,添加行

    在这个场景中,我们讨论的是如何利用JavaScript增强GridView的功能,实现行的移动和添加。这通常是通过AJAX技术来完成的,以提供更丰富的用户体验,而无需每次操作都刷新整个页面。 首先,我们需要了解JavaScript的...

    GridView动态添加模板列

    那么,如何动态添加模板列,并对其中的控件添加事件和自动绑定数据呢?下面,我们就会详细介绍GridView动态添加模板列的实现方法。 GridView动态添加模板列的必要性 在实际开发中,我们经常需要根据不同的业务需求...

    GridView添加行并且默认显示行数

    - 在`GridView`的数据源为空时,可以通过预先创建一个包含指定行数的`DataTable`,并将这些行设置为空值来实现。 - 当`GridView`的数据源中有数据时,先检查数据的行数是否达到指定的数量,如果没有,则通过添加...

    GridView行背景颜色

    5. **数据绑定时设置颜色**:如果需要根据数据动态设置行的背景色,可以在GridView的数据绑定事件(如DataBound)中检查数据源中的字段,然后根据字段值设置行的背景颜色。 6. **JavaScript/jQuery**:在客户端,...

    GridView行的背景随鼠标改变而改变

    ### GridView行的背景随鼠标改变而改变 #### 知识点概述 在Web开发中,尤其是在使用ASP.NET进行页面设计时,GridView控件是展示数据列表的一种非常实用且灵活的方式。用户界面的交互性和美观性对于提升用户体验至...

    GridView合并表头并且有合计

    标题"GridView合并表头并且有合计"所涉及的知识点主要集中在如何在GridView中实现表头的多行合并以及添加合计行。下面将详细介绍这些内容。 首先,要实现GridView的表头合并,通常需要在后台代码中进行处理,因为...

    动态添加,删除 gridview 行

    如果存在“添加”按钮,可以创建一个新的空行并将其添加到GridView的行集合中。 3. **ButtonField**:在GridView的列定义中,添加一个ButtonField,作为用户触发添加新行的按钮。 4. **Command事件**:监听“添加...

    GridView跨行demo

    可以为数据模型添加一个表示跨行数的属性,例如`rowSpan`。在`getView()`方法中,通过这个属性来设置`View`的高度。如果`rowSpan`大于1,那么就需要增加View的高度以覆盖更多的行。 4. **计算View高度** 需要计算...

Global site tag (gtag.js) - Google Analytics