修复ASP.NET GridView的标题行

时间：2013-07-15 05:24:06

标签： javascript jquery asp.net css web

在详细介绍之前，我想提一下我已经尝试过stackoverflow和net的各种解决方案。但是，在我的场景中没有一个适合。所以，我提供了详细信息。

在ASP.NET 2.0 Web应用程序中，使用gridview控件，并在运行时根据用户的设置生成该gridview的列。 因此，在Default.aspx中，gridview定义如下：

<div id="DivListB" runat="server" onscroll="SaveScrollValue(); SetListFloatingHeader()" visible="True">
<asp:GridView ID="ObjList" runat="server" OnLoad="ReloadGrid" CssClass="ObjList" AutoGenerateColumns="false" OnRowDataBound="ObjList_RowDataBound" AutoGenerateSelectButton="false" OnSelectedIndexChanged="ObjList_SelectedIndexChanged" OnRowCreated="ObjList_RowCreated">
    <Columns>
        <asp:TemplateField HeaderText="&nbsp" ItemStyle-Width="46px" ItemStyle-HorizontalAlign="Center">
            <HeaderTemplate>
                <asp:CheckBox AutoPostBack="true" ID="chkAll" runat="server" OnCheckedChanged="HeaderChk_Changed" /> 
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox AutoPostBack="true" ID="chkRow" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "Selection")%>' OnCheckedChanged="ChkRow_OnCheckChange" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

gridview列在运行时添加，下面的方法根据web.config中的用户设置创建列：

private void CreateDefaultGridView(Hashtable htPartSchema)
    {
        string sTempHeader, sTempAlignment, sTempWidth, sTempVisible;
        try
        {
            //get partlist settings section from web.config
            NameValueCollection plConfigKeys = (NameValueCollection)ConfigurationManager.GetSection("CONFIG_SETTINGS/PL_SETTINGS");
            //cond: check partlist config keys exist
            if (plConfigKeys != null && plConfigKeys.Count > 0)
            {
                //loop: every key present in configruation
                foreach (string key in plConfigKeys)
                {
                    //cond: config key is present in part schema
                    if (htPartSchema.ContainsKey(key.ToUpper()) == true)
                    {
                        //create new databound column                        
                        BoundField gridCol = new BoundField();
                        //assign datafield to bind with data table column
                        gridCol.DataField = key;
                        //get value from config key                
                        string sKeyValue = plConfigKeys[key].ToString();                         
                        try
                        {
                            string[] sTempArray = sKeyValue.Split(new string[] { "|" }, StringSplitOptions.RemoveEmptyEntries);
                            sTempHeader = sTempArray[0];
                            sTempAlignment = sTempArray[1];
                            sTempWidth = sTempArray[2];
                            sTempVisible = sTempArray[3];
                            PLDefaultColumnHeaderAlignments.Add(sTempHeader, sTempAlignment);
                            PLDefaultColumHeaderWidths.Add(sTempHeader, sTempWidth);
                        }
                        catch
                        {
                            sTempHeader = string.Empty;
                            sTempAlignment = string.Empty;
                            sTempWidth = string.Empty;
                            sTempVisible = "false";
                        }
                        if (sTempVisible.ToLower().Equals("true"))
                        {
                            //assign display header text
                            gridCol.HeaderText = sTempHeader;
                            //add the column in the gridview
                            ObjList.Columns.Add(gridCol);

                            //cond: to check the specified alignment
                            if (sTempAlignment.ToUpper() == "L")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;        
                            }
                            else if (sTempAlignment.ToUpper() == "R")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
                            }
                            else if (sTempAlignment.ToUpper() == "C")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                            }
                            if (string.IsNullOrEmpty(sTempWidth) == false)
                            {
                                gridCol.ControlStyle.Width = Unit.Pixel(int.Parse(sTempWidth));
                                gridCol.HeaderStyle.Width = int.Parse(sTempWidth);

                                gridCol.HeaderStyle.Wrap = false;
                                gridCol.ItemStyle.Wrap = false;
                                gridCol.ItemStyle.Width = Unit.Pixel(int.Parse(sTempWidth));

                                //set column width
                                double dTempColWidth = 120;  //default value
                                double.TryParse(sTempWidth, out dTempColWidth);
                                //change width of grid view according to column sizes
                                ObjList.Width = new Unit((ObjList.Width.Value + dTempColWidth), UnitType.Pixel);                                   
                            }
                        }
                        gridCol.ItemStyle.Wrap = false;
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

当行与GridView绑定时，很少有事件和css也在运行时应用于GridView的DataRowBound事件中，如下所述：

protected void ObjList_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        try
        {
            int iDataRowsCounter = 0;
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //get datatable from 
                DataTable dtList = (DataTable)Session["ListTable" + ViewState["ViewerId"]];

                //get position of the respective row
                string strPostion = dtList.Rows[e.Row.RowIndex]["Position"].ToString();
                string strLinkNum = dtList.Rows[e.Row.RowIndex]["LinkNumber"].ToString();
                //get row check box
                CheckBox cbRow = ((CheckBox)e.Row.FindControl("chkRow"));
                string pnum = dtList.Rows[e.Row.RowIndex]["PartNumber"].ToString();
                if (a_PartNumber != null && pnum == a_PartNumber)
                {
                    HighlightPic.Value = HighlightPic.Value + "||" + e.Row.RowIndex.ToString();
                    e.Row.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#3D98FF");
                    e.Row.Style.Add(HtmlTextWriterStyle.Color, "#FFFFFF");
                }
                //mouse hover effects on gridview (CSS)
                e.Row.Attributes.Add("onmouseover", "this.className='ObjListHighlight'");
                e.Row.Attributes.Add("onmouseout", "this.className='ObjListNormal'");
                //keep position of the row in case needed in javascript
                e.Row.Attributes.Add("RowPosition", strPostion);
                //on row checkbox check change of a single row
                cbRow.Attributes.Add("onclick", "OnRowCheckChange(this, 'ObjList')");
                //on full row click highlight picture 
                e.Row.Attributes.Add("onclick", "HighlightPicture('" + strPostion + "'," + e.Row.RowIndex + ", false)");
                //on row double click 
                e.Row.Attributes.Add("ondblclick", "OnRowDblClick(" + e.Row.RowIndex + ",'ObjList')");                              
            }
            else if (e.Row.RowType == DataControlRowType.Header)
            {
                //find header checkbox control
                CheckBox cbHeader = ((CheckBox)e.Row.FindControl("chkAll"));
                e.Row.Attributes.Add("class", "item_HeaderRow");
                e.Row.Cells[0].Attributes.Add("class", "item_HeaderCell");
                //add header change event on checkbox click
                cbHeader.Attributes.Add("onclick", "OnHeaderCheckChange(this,'ObjList')");                    
            }
        }
        catch
        {
            throw new Exception(ex.Message);
        }
    }

它的演示如下： enter image description here 各自的css如下：

    .ObjList
{
    height: auto;    
}
.ObjListHighlight
{
    background-color: #CAE4FF;
    cursor: pointer;
}
.ObjListNormal
{
    background-color: White;
    cursor: pointer;
}

.ObjList tr.row
{
    cursor: pointer;
    color: #1B3A7A;
    background-color: #FFFFFF;
}

.ObjList tr.row:hover
{
    background-color: #CAE4FF;
}

.ObjList tr.row_selected
{
    cursor: default;
    color: #FFFFFF;
    background-color: #3D98FF;
}

我想要做的是修复该gridview的标题行。解决方案可以是javascript或jQuery。建议表示赞赏。

2 个答案:

答案 0 :(得分：2)

试试这个，

ASPX页面：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script src="gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            gridView1 = $('#gridtest').gridviewScroll({
                width: 600,
                height: 300,
                railcolor: "#F0F0F0",
                barcolor: "#CDCDCD",
                barhovercolor: "#606060",
                bgcolor: "#F0F0F0",
                freezesize: 1,
                arrowsize: 30,                
                headerrowcount: 1,
                railsize: 16,
                barsize: 8
            });
        }
    </script>
    <div style="width: 100%; height: 400px; overflow: scroll">
            <asp:GridView ID="gridtest" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="UserID" HeaderText="ID" SortExpression="UserID" ReadOnly="true" />
                    <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
                </Columns>
            </asp:GridView>
        </div>

CS页面：

protected void Page_Load(object sender, EventArgs e)
    {
        gridtest.DataSource = getUserDetails();
        gridtest.DataBind();
    }
    public class details
    {
        public int UserID { get; set; }
        public string FirstName {get;set;}
    }
    public List<details> getUserDetails()
    {
        List<details> gt = new List<details>();
        for (int i = 1; i < 40; i++)
        {
            details objDetails = new details();
            objDetails.UserID = i;
            objDetails.FirstName = "test" + i;
            gt.Add(objDetails);
        }
        return gt;
    }

供参考使用：http://gridviewscroll.aspcity.idv.tw/

答案 1 :(得分：1)

您最好的选择是创建两个GridView。一个纯粹的标题。第二，身体包裹在第一个下方的可滚动div中。将第二个gridview定位为负上边距以隐藏其标题。这样你就可以使用第一个girdview的标题并滚动第二个。

或者，您可以使用像这样的插件：http://www.fixedheadertable.com

此插件也使用与上述相同的逻辑。

相关问题
最新问题