ASP.NET GridView設置固定表頭及動態綁定數據

def-kiki

已于 2023-12-22 09:46:53 修改

阅读量553

点赞数 11

文章标签： asp.net java 前端

于 2023-12-22 09:38:14 首次发布

本文链接：https://blog.csdn.net/weixin_48174801/article/details/135144731

版权

Language="C#"

此段代碼中使用getElementById（）方法綁定gvSummary的数据，getElementsByTagName() 方法可返回带有指定标签名的对象的集合。循環使用position固定表頭，即使滾動拉至下方依旧表头依然显示在最上方。

  <script type="text/javascript">
        window.onload = function () {
            var gridView = document.getElementById("gvSummary");
            var gridViewHeader = gridView.getElementsByTagName("th");

            for (var i = 0; i < gridViewHeader.length; i++) {
                gridViewHeader[i].style.position = "sticky";
                gridViewHeader[i].style.top = "0";
                gridViewHeader[i].style.backgroundColor = "#003399";

            }
        }
   </script>

完整的前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComReport.aspx.cs" Inherits="Public.ComReport" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
         <style type="text/css">
        .f-column-header {
            border-right: 1px solid #fff;
            color: #433;
            font: bold 13px/15px helvetica, arial, verdana, sans-serif;
            outline: 0;
            background-color: #87bdea;
        }

        .f-grid-body {
            border-top-color: #fff;
        }

        .f-grid-headerct {
            border: 1px solid #f2e4e4;
            border-bottom-color: #f5f5f5;
            background-color: #fff;
        }

        .f-grid-row-summary .f-grid-cell, .f-grid-row-summary .f-grid-rowwrap, .f-grid-row-summary .f-grid-cell-rowbody, .f-grid-colheader-row .f-grid-colheader {
            border-color: #ededed;
            border-top-color: rgb(237, 237, 237);
            background-color: #85bdf5 !important;
            border-top: 1px solid #ededed;
            font: normal 13px/15px helvetica, arial, verdana, sans-serif;
        }
             #form1 {
                 height: 100px;
             }
   </style>
        <script type="text/javascript">
        window.onload = function () {
            var gridView = document.getElementById("gvSummary");
            var gridViewHeader = gridView.getElementsByTagName("th");

            for (var i = 0; i < gridViewHeader.length; i++) {
                gridViewHeader[i].style.position = "sticky";
                gridViewHeader[i].style.top = "0";
                gridViewHeader[i].style.backgroundColor = "#003399";

            }
        }
        </script>
</head>
<body style="height: 737px">
<form id="form1" runat="server">
    <f:PageManager ID="PageManager1" runat="server" EnableAjax="false" />
    <f:Panel ID="Panel1" runat="server" Layout="VBox" EnableCollapse="true"
            BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigChildMargin="0"
            ShowBorder="false" ShowHeader="false" Width="900px" Height="250px"
            Title="報表">
            <Items>
                <f:Form ID="Form5" ShowBorder="False" BodyPadding="5px"AnchorValue="100%"
                    ShowHeader="False" runat="server" Width="500px">
                    <Rows>
                        <f:FormRow  ColumnWidths="50% 50%">
                            <Items>
                                <f:Button ID="btnQuery" Text="查詢" runat="server" 
                                   OnClick="btnQuery_Click" EnableAjax="False">
                                </f:Button>
                                <f:Button ID="btnToExcel" EnableAjax="false"    
                                   runat="server" Text="ToExcel" OnClick="btnToExcel_Click">
                                </f:Button>
                            </Items>
                        </f:FormRow>
                        <f:FormRow MarginTop="10px">
                            <Items>
                                 <f:TextArea runat="server" Width="300" ID="txt1"  ColumnWidth="300" LabelWidth="120px" AutoGrowHeight="false"  Height="100" LabelAlign="Right"  Label="條件"  EmptyText="多個格式如下(換行隔开)" ></f:TextArea>
                            </Items>
                        </f:FormRow>
                    </Rows>
                </f:Form>
            </Items>
        </f:Panel>
        <br />
        <br />
       <asp:GridView ID="gvSummary" runat="server" BackColor="White" 
            CellPadding="4" Font-Size="9pt"
            HorizontalAlign="Left" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px">
            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            <HeaderStyle CssClass="f-panel-header f-widget-header f-noselect" Font-Bold="True"
                ForeColor="#CCCCFF" BackColor="#003399" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            <RowStyle BackColor="White" ForeColor="#003399" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <SortedAscendingCellStyle BackColor="#EDF6F6" />
            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
            <SortedDescendingCellStyle BackColor="#D6DFDF" />
            <SortedDescendingHeaderStyle BackColor="#002876" />
        </asp:GridView>
    </form>
    </body>
</html>

后端：

public partial class ComReport
{
       DataTable dt = new DataTable();
       protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                dt = new DataTable();
            }

        }

       protected void gvSummary_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            gvSummary.PageIndex = e.NewPageIndex;
            BindGridViewByDataTable(gvSummary, (DataTable)Session["SummaryData"]);
        }
      
       protected void BindGridViewByDataTable(GridView gv, DataTable dt)
        {
            try
            {
                if (dt == null || dt.Rows.Count == 0)
                {
                    ShowNotify("Information", "There is no data found!", MessageBoxIcon.Information, PageManager1);
                    gv.Visible = false;
                    return;
                }
                else
                {
                    gv.DataSource = dt;
                    gv.DataBind();
                    gv.Visible = true;
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        protected void btnQuery_Click(object sender, EventArgs e)
        {
            dt = Query();
            Session["SummaryData"] = dt;
            gvSummary.DataSource = dt;
            gvSummary.DataBind();
            gvSummary.PageIndex = 1;
        }

        public DataTable Query()
        {
            List<string> ListA = new List<string>();
            string A = txtA.Text.Trim();
            ListA.AddRange(Model.Split(new string[] { "\r\n" }, 
            StringSplitOptions.None).ToList().Where(x => !string.IsNullOrEmpty(x)).ToList());
          //獲取數據方法（略）
             return dt;
        }

        protected void btnToExcel_Click(object sender, EventArgs e)
        {
            if (dt == null || dt.Rows.Count == 0)
            {
                dt = Query();
            }
            Session["SummaryData"] = dt;
            gvSummary.DataSource = dt;
            gvSummary.DataBind();
            gvSummary.PageIndex = 1;
            //生成excel方法（略）
        }
}

def-kiki

关注

11
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET GridView設置固定表頭及動態綁定數據

此段代碼中使用getElementById（）方法綁定gvSummary的数据，getElementsByTagName() 方法可返回带有指定标签名的对象的集合。循環使用position固定表頭，即使滾動拉至下方依旧表头依然显示在最上方。
复制链接

扫一扫