32

我有一个 ASP.NET GridView,它的列如下所示:

| Foo | Bar | Total1 | Total2 | Total3 |

是否可以在看起来像这样的两行上创建标题?

|           |  Totals   |    
| Foo | Bar | 1 | 2 | 3 |

每行中的数据将保持不变,因为这只是为了美化标题并减少网格占用的水平空间。

整个 GridView 是可排序的,以防万一。我不打算让添加的“总计”跨越列具有任何排序功能。

编辑:

基于下面给出的一篇文章,我创建了一个继承自 GridView 并添加第二个标题行的类。

namespace CustomControls
{
    public class TwoHeadedGridView : GridView
    {
        protected Table InnerTable
        {
            get
            {
                if (this.HasControls())
                {
                    return (Table)this.Controls[0];
                }

                return null;
            }
        }

        protected override void OnDataBound(EventArgs e)
        {
            base.OnDataBound(e);
            this.CreateSecondHeader();
        }

        private void CreateSecondHeader()
        {
            GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);

            TableCell left = new TableHeaderCell();
            left.ColumnSpan = 3;
            row.Cells.Add(left);

            TableCell totals = new TableHeaderCell();
            totals.ColumnSpan = this.Columns.Count - 3;
            totals.Text = "Totals";
            row.Cells.Add(totals);

            this.InnerTable.Rows.AddAt(0, row);
        }
    }
}

如果您像我一样不熟悉 ASP.NET,我还应该指出您需要:

1)通过在您的网络表单中添加这样的一行来注册您的课程:

<%@ Register TagPrefix="foo" NameSpace="CustomControls" Assembly="__code"%>

2) 将之前标记中的 asp:GridView 更改为 foo:TwoHeadedGridView。不要忘记结束标签。

另一个编辑:

您也可以在不创建自定义类的情况下执行此操作。

只需为网格的 DataBound 事件添加一个事件处理程序,如下所示:

protected void gvOrganisms_DataBound(object sender, EventArgs e)
{
    GridView grid = sender as GridView;

    if (grid != null)
    {
        GridViewRow row = new GridViewRow(0, -1,
            DataControlRowType.Header, DataControlRowState.Normal);

        TableCell left = new TableHeaderCell();
        left.ColumnSpan = 3;
        row.Cells.Add(left);

        TableCell totals = new TableHeaderCell();
        totals.ColumnSpan = grid.Columns.Count - 3;
        totals.Text = "Totals";
        row.Cells.Add(totals);

        Table t = grid.Controls[0] as Table;
        if (t != null)
        {
            t.Rows.AddAt(0, row);
        }
    }
}

自定义控件的优点是您可以在 Web 表单的设计视图中看到额外的标题行。不过,事件处理程序方法要简单一些。

4

7 回答 7

12

我采用了接受的答案方法,但将标题添加到现有的 GridView 而不是自定义继承的 GridView。

绑定 GridView 后,我执行以下操作:

/*Create header row above generated header row*/

//create row    
GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);

//spanned cell that will span the columns I don't want to give the additional header 
TableCell left = new TableHeaderCell();
left.ColumnSpan = 6;
row.Cells.Add(left);

//spanned cell that will span the columns i want to give the additional header
TableCell totals = new TableHeaderCell();
totals.ColumnSpan = myGridView.Columns.Count - 3;
totals.Text = "Additional Header";
row.Cells.Add(totals);

//Add the new row to the gridview as the master header row
//A table is the only Control (index[0]) in a GridView
((Table)myGridView.Controls[0]).Rows.AddAt(0, row);

/*fin*/
于 2010-11-17T16:02:28.937 回答
11

本文应该为您指明正确的方向。您可以以编程方式创建行并将其添加到位置 0 的集合中。

于 2008-11-24T16:49:54.103 回答
2

替代文字

对于那些选择在 VB.NET 中使用 RowDataBound 方法的人的注意事项

如果您最终弹出了太多额外的标题行,请添加一个 If 语句,该语句仅在 gridview 的标题行为空时才会继续(意味着它是当前被绑定的行)

 If grid.HeaderRow Is Nothing Then
于 2010-01-21T23:04:45.507 回答
1

您必须创建一个扩展 gridview 的类,然后覆盖 CreateRow 方法。

试试这个作为起点

于 2008-11-24T16:50:51.730 回答
1

添加t.EnableViewState = false;行后添加:

Dim t As Table = TryCast(grid.Controls(0), Table)
If t IsNot Nothing Then
    t.Rows.AddAt(0, row)
End If

t.EnableViewState = false;
于 2011-04-26T11:48:34.567 回答
0

请参考https://stackoverflow.com/a/9333714/1060656

我创建了这个解决方案示例

要在本地系统中运行,需要创建 2 个文件(一个用于控件,一个用于 aspx),您可以创建一个项目或 2 个项目。

  1. GridViewPlus ==> 控制类
  2. GridViewPlusCustomHeaderRows ==> 一个保存自定义标题类的集合
  3. CustomHeaderEventArgs ==> 创建自定义标题行时的事件参数
  4. aspx 文件 ==> 测试程序

    public class GridViewPlus : GridView
    {
    
        public event EventHandler<CustomHeaderEventArgs> CustomHeaderTableCellCreated;
    
        private GridViewPlusCustomHeaderRows _rows;
    
        public GridViewPlus() : base ()
        {
            _rows = new GridViewPlusCustomHeaderRows();
        }
    
        /// <summary>
        /// Allow Custom Headers
        /// </summary>
        public bool ShowCustomHeader { get; set; }
    
    
        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        [MergableProperty(false)]
        public GridViewPlusCustomHeaderRows CustomHeaderRows
        {
            get {return  _rows; }
    
        }
    
        protected virtual void OnCustomHeaderTableCellCreated(CustomHeaderEventArgs e)
        {
            EventHandler<CustomHeaderEventArgs> handler = CustomHeaderTableCellCreated;
    
            // Event will be null if there are no subscribers
            if (handler != null)
            {
                // Use the () operator to raise the event.
                handler(this, e);
            }
    
        }
    
        protected override void OnRowCreated(GridViewRowEventArgs e)
        {
            if (ShowCustomHeader && e.Row.RowType == DataControlRowType.Header) return;
            base.OnRowCreated(e);
        }
    
    
        protected override void PrepareControlHierarchy()
        {
            //Do not show the Gridview header if show custom header is ON
            if (ShowCustomHeader) this.ShowHeader = false;
    
    
            base.PrepareControlHierarchy();
            //Safety Check
            if (this.Controls.Count == 0)
                return;
            bool controlStyleCreated = this.ControlStyleCreated;
            Table table = (Table)this.Controls[0];
    
            int j = 0;
            if (CustomHeaderRows ==null )return ;
    
            foreach (TableRow tr in CustomHeaderRows)
            {
                OnCustomHeaderTableCellCreated(new CustomHeaderEventArgs(tr,j));
                table.Rows.AddAt(j, tr);
                tr.ApplyStyle(this.HeaderStyle);
                j++;
            }
    
    
        }
    }
    
    public class GridViewPlusCustomHeaderRows : System.Collections.CollectionBase
    {
        public GridViewPlusCustomHeaderRows()
        {
        }
    
        public void Add(TableRow aGridViewCustomRow)
        {
            List.Add(aGridViewCustomRow);
        }
    
        public void Remove(int index)
        {
            // Check to see if there is a widget at the supplied index.
            if (index > Count - 1 || index < 0)
            // If no widget exists, a messagebox is shown and the operation 
            // is cancelled.
            {
                throw (new Exception("Index not valid"));
            }
            else
            {
                List.RemoveAt(index);
            }
        }
    
        public TableRow Item(int Index)
        {
            // The appropriate item is retrieved from the List object and
            // explicitly cast to the Widget type, then returned to the 
            // caller.
            return (TableRow)List[Index];
        }
    
    }
    
    
    public class CustomHeaderEventArgs : EventArgs
    {
        public CustomHeaderEventArgs(TableRow tr ,int RowNumber  )
        {
            tRow = tr;
            _rownumber = RowNumber;
        }
        private TableRow tRow;
        private int _rownumber = 0;
    
    
        public int RowNumber { get { return _rownumber; } }
    
        public TableRow HeaderRow
        {
            get { return tRow; }
            set { tRow = value; }
        }
    
    
    }
    
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Example1();
            GridViewExtension1.CustomHeaderTableCellCreated += new EventHandler<CustomHeaderEventArgs>(GridViewExtension1_CustomHeaderTableCellCreated);
        }
    
        void GridViewExtension1_CustomHeaderTableCellCreated(object sender, CustomHeaderEventArgs e)
        {
            TableRow tc = (TableRow)e.HeaderRow;
    
            tc.BackColor = System.Drawing.Color.AliceBlue;
        }
    
        private void Example1()
        {
            System.Data.DataTable dtSample = new DataTable();
            DataColumn dc1 = new DataColumn("Column1",typeof(string));
            DataColumn dc2 = new DataColumn("Column2",typeof(string));
            DataColumn dc3 = new DataColumn("Column3",typeof(string));
            DataColumn dc4 = new DataColumn("Column4",typeof(string));
           // DataColumn dc5 = new DataColumn("Column5",typeof(string));
            dtSample.Columns.Add(dc1);
            dtSample.Columns.Add(dc2);
            dtSample.Columns.Add(dc3);
            dtSample.Columns.Add(dc4);
           // dtSample.Columns.Add(dc5);
            dtSample.AcceptChanges();
    
            for (int i = 0; i < 25; i++)
            {
                DataRow dr = dtSample.NewRow();
    
                for (int j = 0; j < dtSample.Columns.Count; j++)
                {
                    dr[j] = j;
                }
                dtSample.Rows.Add(dr);
            }
            dtSample.AcceptChanges();
            //GridViewExtension1.ShowHeader = false;
            GridViewExtension1.ShowCustomHeader = true;
    
            /*
             *=======================================================================
             *  |Row 1 Cell 1   |   Row 1 Col 2 (Span=2)        | Row 1 Col 3   |
             *  |               |                               |               |
             *=======================================================================             
             *  |Row 2 Cell 1   |               |               |               |
             *  |               |   Row 2 Col 2 | Row 2 Col 3   |Row 2 Col 4    |
             *=======================================================================
             * 
             * 
             * 
             * 
             * */
    
            // SO we have to make 2 header row as shown above
    
            TableRow TR1 = new TableRow();
            TableCell tcR1C1 = new TableCell();
            tcR1C1.Text = "Row 1 Cell 1";
            tcR1C1.ColumnSpan = 1;
            TR1.Cells.Add(tcR1C1);       
    
            TableCell tcR1C2 = new TableCell();
            tcR1C2.Text = "Row 1 Cell 2";
            tcR1C2.ColumnSpan = 2;
            TR1.Cells.Add(tcR1C2);  
    
            TableCell tcR1C3 = new TableCell();
            tcR1C3.Text = "Row 1 Cell 3";
            tcR1C3.ColumnSpan = 1;
            TR1.Cells.Add(tcR1C3);
    
    
            GridViewExtension1.CustomHeaderRows.Add(TR1);
    
            TableRow TR2 = new TableRow();
            TableCell tcR2C1 = new TableCell();
            tcR2C1.Text = "Row 2 Cell 1";
            tcR2C1.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C1);
    
            TableCell tcR2C2 = new TableCell();
            tcR2C2.Text = "Row 2 Cell 2";
            tcR2C2.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C2);
    
            TableCell tcR2C3 = new TableCell();
            tcR2C3.Text = "Row 2 Cell 3";
            tcR2C3.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C3);
    
            TableCell tcR2C4 = new TableCell();
            tcR2C4.Text = "Row 2 Cell 4";
            tcR2C4.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C4);
    
            GridViewExtension1.CustomHeaderRows.Add(TR2);
    
    
            GridViewExtension1.DataSource = dtSample;
            GridViewExtension1.DataBind();
    
        }
    }
    
于 2012-02-21T18:06:39.397 回答
0

我想做一个类似的任务,但需要标题内的可点击按钮——在这种情况下,上述方法都不起作用,因为事件处理程序没有连接(由于事件的顺序)。最后,我在网格视图的相应模板字段中使用了 headertemplate 标记。html 看起来有点臃肿,但事件保持不变,没有额外的代码。例如

<asp:TemplateField >
             <HeaderTemplate>
               <div>
                <div style="text-align: center;padding-bottom: 5px;">
                                                          text
                   </div>
                    <div>
                     <asp:Button ID="Button1" runat="server" Text="Apply to all" ToolTip="Apply to all - Special Bolt On" CssClass="sub_button input_btn_5" OnClick="ApplyButton1_Click" />
                   </div>
                  </div>
                  </HeaderTemplate>
                  <ItemTemplate>....
于 2014-02-12T15:04:42.467 回答