如何格式化GridView動態添加的頁腳列

Question

我創建了下面的代碼，使用了ASP中的GridView。 網格幾乎按我希望的方式工作。 新控件自動將列添加到gridview的頁腳，並在需要時添加“保存”，“取消”和“添加”按鈕。 我只有一件事無法正常工作。 當網格為空時，將在頁腳中添加列和按鈕，但不是水平布局，而是垂直創建了字段。 原因是字段未包含在“ td”元素中。 字段和按鈕都可以使用，但是布局錯誤。 關於如何解決這個問題的任何線索？

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Fortrus.Intranet.WebControls
{
    /// <summary>
    /// Produces a GridView with 'Edit', 'Cancel' and 'Insert' buttons
    /// </summary>
    public class CttGridView : GridView
    {
        public CttGridView()
        {
            ShowHeaderWhenEmpty = true;
            ShowFooter = true;
            RowDataBound += CttGridView_RowDataBound;
        }

        void CttGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            e.Row.Cells[e.Row.Cells.Count - 1].Width = new Unit(50, UnitType.Pixel);
        }

        /// <summary>
        /// This class is used to fill the different templates in the gridview dynamically
        /// </summary>
        public class StandardGridViewTemplateGenerator : ITemplate
        {

            private ListItemType Type;
            private DataControlFieldCollection Columns;

            /// <summary>
            /// In this variable the initialy defined columns are saved
            /// This is needed because we also add a column to the gridview
            /// </summary>
            private DataControlFieldCollection InitialColumns;

            public StandardGridViewTemplateGenerator(ListItemType type, DataControlFieldCollection columns = null)
            {
                Type = type;
                Columns = columns;

                if (columns != null)
                {
                    InitialColumns = new DataControlFieldCollection();

                    // Save the columns initialy defined for the gridview
                    foreach (DataControlField column in columns)
                    {
                        InitialColumns.Add(column);
                    }
                }
            }

            /// <summary>
            /// Method of the ITemplate interface is called when a specific template is needed
            /// </summary>
            void ITemplate.InstantiateIn(Control container)
            {
                switch (Type)
                {
                    // The tamplate for editing is needed
                    case ListItemType.EditItem:
                        CreateEditButtons(container);
                        break;

                    // A display template is needed
                    case ListItemType.Item:
                        CreateItemButtons(container);
                        break;

                    // A footer template is needed
                    case ListItemType.Footer:
                        CreateColumnControls(container);
                        CreateEmptyButtons(container);
                        break;

                    case ListItemType.SelectedItem:
                    case ListItemType.AlternatingItem:
                    case ListItemType.Header:
                    case ListItemType.Pager:
                    case ListItemType.Separator:
                    default:
                        throw new NotImplementedException();
                }
            }
            /// <summary>
            /// Adds buttons for the empty (footer) template
            /// </summary>
            private void CreateEmptyButtons(Control container)
            {
                AddButton(container,
                    id: "AddNewButton",
                    cssClass: "CttGridViewSaveButton",
                    commandName: "Insert",
                    toolTip: "Toevoegen");
                AddButton(container,
                    id: "CancelNewButton",
                    cssClass: "CttGridViewCancelButton",
                    commandName: "Cancel",
                    toolTip: "Ongedaan maken");
            }

            /// <summary>
            /// Generate the footer controls from the initial columns
            /// </summary>
            private void CreateColumnControls(Control container)
            {
                if (InitialColumns != null)
                {
                    foreach (TemplateField column in InitialColumns)
                    {
                        column.EditItemTemplate.InstantiateIn(container);
                    }
                }
            }

            /// <summary>
            /// Adds buttons for the Edit template
            /// </summary>
            private void CreateEditButtons(Control container)
            {
                AddButton(container,
                    id: "SaveButton",
                    cssClass: "CttGridViewSaveButton",
                    commandName: "Update",
                    toolTip: "Opslaan");
                AddButton(container,
                    id: "CancelButton",
                    cssClass: "CttGridViewCancelButton",
                    commandName: "Cancel",
                    toolTip: "Ongedaan maken");
            }

            /// <summary>
            /// Adds buttons for the (display) item template
            /// </summary>
            private void CreateItemButtons(Control container)
            {
                AddButton(container,
                    id: "EditButton",
                    cssClass: "CttGridViewEditButton",
                    commandName: "Edit",
                    toolTip: "Bewerken");
                AddButton(container,
                    id: "DeleteButton",
                    cssClass: "CttGridViewDeleteButton",
                    commandName: "Delete",
                    toolTip: "Verwijderen",
                    confirmation: "return confirm('Weet u zeker dat u deze rij wilt verwijderen?');");
            }

            /// <summary>
            /// Adds a button to the container
            /// </summary>
            private static void AddButton(Control container, string id, string cssClass, string commandName, string toolTip, string confirmation = null)
            {
                ImageButton button = new ImageButton();

                button.ID = id;
                button.CssClass = cssClass;
                button.CommandName = commandName;
                button.ToolTip = toolTip;
                button.OnClientClick = confirmation;
                // Added blank image to prevent the default gray placeholder border
                // Image should be set using the background-image from CSS
                button.ImageUrl = "data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==";

                container.Controls.Add(button);
            }
        }

        /// <summary>
        /// Create the child controls
        /// </summary>
        protected override void CreateChildControls()
        {
            ShowFooter = true;

            InitializeTemplate();

            base.CreateChildControls();
        }

        /// <summary>
        /// Initialize the templates
        /// </summary>
        private void InitializeTemplate()
        {
            TemplateField template = new TemplateField();

            template.ItemTemplate = new StandardGridViewTemplateGenerator(ListItemType.Item);
            template.EditItemTemplate = new StandardGridViewTemplateGenerator(ListItemType.EditItem);
            template.FooterTemplate = new StandardGridViewTemplateGenerator(ListItemType.Footer);

            EmptyDataTemplate = new StandardGridViewTemplateGenerator(ListItemType.Footer, columns: Columns);

            Columns.Add(template);
        }
    }
}

Answer 1

我解決了 這是完整的代碼：

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Fortrus.Intranet.WebControls
{
    /// <summary>
    /// Produces a GridView with 'Edit', 'Cancel' and 'Insert' buttons
    /// </summary>
    public class CttGridView : GridView
    {
        public CttGridView()
        {
            ShowHeaderWhenEmpty = true;
            ShowFooter = true;
            RowDataBound += CttGridView_RowDataBound;
        }

        void CttGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            e.Row.Cells[e.Row.Cells.Count - 1].Width = new Unit(50, UnitType.Pixel);
        }

        /// <summary>
        /// This class is used to fill the different templates in the gridview dynamically
        /// </summary>
        public class StandardGridViewTemplateGenerator : ITemplate
        {

            private ListItemType Type;
            private DataControlFieldCollection Columns;

            /// <summary>
            /// In this variable the initialy defined columns are saved
            /// This is needed because we also add a column to the gridview
            /// </summary>
            private DataControlFieldCollection InitialColumns;

            public StandardGridViewTemplateGenerator(ListItemType type, DataControlFieldCollection columns = null)
            {
                Type = type;
                Columns = columns;

                if (columns != null)
                {
                    InitialColumns = new DataControlFieldCollection();

                    // Save the columns initialy defined for the gridview
                    foreach (DataControlField column in columns)
                    {
                        InitialColumns.Add(column);
                    }
                }
            }

            /// <summary>
            /// Method of the ITemplate interface is called when a specific template is needed
            /// </summary>
            void ITemplate.InstantiateIn(Control container)
            {
                switch (Type)
                {
                    // The tamplate for editing is needed
                    case ListItemType.EditItem:
                        CreateEditButtons(container);
                        break;

                    // A display template is needed
                    case ListItemType.Item:
                        CreateItemButtons(container);
                        break;

                    // A footer template is needed
                    case ListItemType.Footer:
                        CreateColumnControls(container);
                        break;

                    case ListItemType.SelectedItem:
                    case ListItemType.AlternatingItem:
                    case ListItemType.Header:
                    case ListItemType.Pager:
                    case ListItemType.Separator:
                    default:
                        throw new NotImplementedException();
                }
            }

            /// <summary>
            /// Generate the footer controls from the initial columns
            /// </summary>
            private void CreateColumnControls(Control container)
            {
                if (InitialColumns != null)
                {
                    TableRow row = new TableRow();

                    foreach (TemplateField column in InitialColumns)
                    {
                        TableCell cell = new TableCell();
                        row.Controls.Add(cell);
                        column.EditItemTemplate.InstantiateIn(cell);
                    }

                    CreateInsertButtons(row);

                    container.Controls.Add(row);
                }
                else
                {
                    CreateInsertButtons(container);
                }
            }

            /// <summary>
            /// Adds buttons for the empty (footer) template
            /// </summary>
            private void CreateInsertButtons(Control container)
            {
                Control control = container;

                if (container is TableRow)
                {
                    control = new TableCell();
                    container.Controls.Add(control);
                }

                AddButton(control,
                    id: "AddNewButton",
                    cssClass: "CttGridViewSaveButton",
                    commandName: "Insert",
                    toolTip: "Toevoegen");

                AddButton(control,
                    id: "CancelNewButton",
                    cssClass: "CttGridViewCancelButton",
                    commandName: "Cancel",
                    toolTip: "Ongedaan maken");
            }

            /// <summary>
            /// Adds buttons for the Edit template
            /// </summary>
            private void CreateEditButtons(Control container)
            {
                AddButton(container,
                    id: "SaveButton",
                    cssClass: "CttGridViewSaveButton",
                    commandName: "Update",
                    toolTip: "Opslaan");
                AddButton(container,
                    id: "CancelButton",
                    cssClass: "CttGridViewCancelButton",
                    commandName: "Cancel",
                    toolTip: "Ongedaan maken");
            }

            /// <summary>
            /// Adds buttons for the (display) item template
            /// </summary>
            private void CreateItemButtons(Control container)
            {
                AddButton(container,
                    id: "EditButton",
                    cssClass: "CttGridViewEditButton",
                    commandName: "Edit",
                    toolTip: "Bewerken");
                AddButton(container,
                    id: "DeleteButton",
                    cssClass: "CttGridViewDeleteButton",
                    commandName: "Delete",
                    toolTip: "Verwijderen",
                    confirmation: "return confirm('Weet u zeker dat u deze rij wilt verwijderen?');");
            }

            /// <summary>
            /// Adds a button to the container
            /// </summary>
            private static void AddButton(Control container, string id, string cssClass, string commandName, string toolTip, string confirmation = null)
            {
                ImageButton button = new ImageButton();

                button.ID = id;
                button.CssClass = cssClass;
                button.CommandName = commandName;
                button.ToolTip = toolTip;
                button.OnClientClick = confirmation;
                // Added blank image to prevent the default gray placeholder border
                // Image should be set using the background-image from CSS
                button.ImageUrl = "data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==";

                container.Controls.Add(button);
            }
        }

        /// <summary>
        /// Create the child controls
        /// </summary>
        protected override void CreateChildControls()
        {
            ShowFooter = true;

            InitializeTemplate();

            base.CreateChildControls();
        }

        /// <summary>
        /// Initialize the templates
        /// </summary>
        private void InitializeTemplate()
        {
            TemplateField template = new TemplateField();

            template.ItemTemplate = new StandardGridViewTemplateGenerator(ListItemType.Item);
            template.EditItemTemplate = new StandardGridViewTemplateGenerator(ListItemType.EditItem);
            template.FooterTemplate = new StandardGridViewTemplateGenerator(ListItemType.Footer);

            EmptyDataTemplate = new StandardGridViewTemplateGenerator(ListItemType.Footer, columns: Columns);

            Columns.Add(template);
        }
    }
}